jQuery返回定位插件详解

一、jQuery 提供开发者开发插件的几种模式

1.$.extend();     //这个方法是绑定在$上面的。可以通过$直接调用

2.$.fn.方法名     //这个方法是绑定在Dom对象上面的可以通过$('').方法名();调用

3.$.widget   //通过jQuery UI 部件工厂模式创建。

二、插件的开发过程

1.$.extend();

这个方法其实很简单，只是像$上面添加了一个静态的方法而已。主要用途是对插件api的扩展.

eg:

//$.extend();为了防止，变量和方法之间的相互污染，我们采用闭包的模式。  (function($,factory){    var obj = factory();    $.extend({      sayHelloWorld:obj.firstApply,    })    $.secondApply = obj.secondApply;  })(jQuery,function(){    var obj = {      firstApply(){        console.log('hello world');      },      secondApply(){        console.log('直接绑定到$上');      },    };     return obj;  });  $.sayHelloWorld();//hello world  $.secondApply(); //直接绑定到$上   /*从上面的2种绑定方式可以看出用$.extend();对jQuery方法进行拓展，   其实和直接绑定到$上是一样的效果*/

2.$.fn.方法名。   (方法名 其实就是插件名)。

a.插件结构

<div id="app">app</div>//$.fn.插件名字 (logText);  (function($,factory){    $.fn.logText = factory();  })(jQuery,function(){    var logText = function(){      console.log(this.text());      return this;    }    return logText;  });　　$("#app").logText(); //app  通过DOM元素之间调用该方法。并返回该对象。这也是jQuery实现链式操作的技巧。  var h = $("#app").logText().height(); // app  console.log(h); //18 //这样就可以自定义方法了。

在jQuery插件的开发过程中，其实主要是通过第二种模式($.fn.插件名)开发的。因为jQuery的强大之处就是对Dom的操作.

b.一个插件的强大之处就是参提供周全的参数。以及方便使用者对参数进行扩展。

<div id="app">app</div>   //$.fn.插件名字 (myPuglin);  (function(global,$,factory){    var common = factory(); //封装插件使用到的函数。    $.fn.myPuglin = function(opts){  //插件的名称      var defaults = {}; //默认的api      opts = $.extend(defaults,opts || {}); //对api的拓展      /*       *       * 要执行的功能       *        */      console.log(opts.hello);      return this;    }  })(window,jQuery,function(){    var common = {      a(opt){        return opt;      },    };    return common;  });  $("#app").myPuglin({hello:'hello world'}); //hello world

准备工作已经完毕。那么下面会一个插件为列子，来讲解

3.工作中经常用到的列表到详情。返回来需要保留该位置的插件。(返回定位) savePositon();  $.fn.savePosition