一、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