最近在公司做一個項目，由於后台數據太多需要分頁顯示，在網上找了很多插件都沒有找到合適的分頁插件，所有的分頁插件始終達不到自己想要的效果。由於這個項目也不是很趕，就在網上查找各種資料，自己寫一個基於jquery的分頁插件；在接下來的一篇博客中我將詳細為大家介紹如何基於jquery書寫分頁插件，在講解之前，先給大家介紹一下基於jquery書寫插件的相關知識！
jquery插件開發主要有三種方法：
1、通過$.extend()方法來拓展jquery；
2、通過$.fn向jquery添加新的方法；這次在分頁插件中就用到了該方法，為jQuery添加新的方法。
3、通過$.widget()應用jQuery UI的部件工廠方式創建；不過第三種方法不常用，我們經常使用的就是第一和第二這兩個方法，主要原因還是因為相對於第三個方法來說前兩個簡單一點，好理解。
$.extend是最簡單的一種，只是在jquery基礎上拓展（添加）新方法，只需要用$.functionName就可以調用，也就是說一處定義多處調用；給大家舉個例子看看，我們就定義一下輸出函數吧
1 $.extend({ 2 console: function(str) { 3 console.log('hello,Welcome to use the console method defined based on jquery,'+str); 4 } 5 }) 6 $.console(); //調用
運行結果如下：
但是這種方法無法利用jquery選擇器的優點以及便利性，所以我們還需要學習了解第二種方法$.fn。為什么$.fn定義的方法就可以使用dom節點選擇器對象獲取這些方法呢，那是因為jQuery內部定義了一個jQuery.fn對象，查看jQuery源碼可以發現jQuery.fn=jQuery.prototype，也就是說jQuery.fn對象是jQuery的原型對象,jQuery的DOM操作方法都在jQuery.fn對象上定義的，然后jQuery對象就可以通過原型繼承這些方法。
我們先使用$.fn定義一個最簡單的改變字體顏色的小插件，代碼如下：
$.fn.changeColor = function(color){
this.css('color',color);
}
在這邊定義好插件之后就可以調用了，例如;$('domName').changeColor('red')就可以改變該DOM節點的額字體顏色為紅色；
但常常很多時候我們需要鏈式調用相關的方法，這就需要我們對上面的方法做以修改，只需要在上面代碼方法的末尾加上一段代碼就好
return this;
這樣就可以鏈式調用，例如$("p").changeColor("red").addClass("red-color");
但是很多時候js庫都會使用$符號，雖然jQuery可以使用jQuery.noConflict()方法交出$符號的使用權，但是如果定義插件的時候，使用$.fn對象來定義的，那么這些插件使用的時候就會受到其它使用$變量的js庫的影響。對於這種情況，我們可以使用立即執行函數通過傳參的方式封裝插件。形式如下：
(function($){
$.fn.changeColor = function(colorStr){
this.css("color",colorStr);
return this;
}
}(jQuery));
在上面的插件方法中我們可以看到使用了傳遞參數，但是很多時候我們都使用傳遞對象的方式傳遞參數這個時候就用到了$.extend方法，這個方法在這里的用法就是合並兩個對象，即把后面一個對象的存在的屬性值賦值給第一個對象，具體參考這里，給大家附上相關代碼以供參考
1 (function($){ 2 3 $.fn.changeColor = function(option){ 4 var defaultSetting = { colorStr:"green",fontSize:12}; 5 var setting = $.extend(defaultSetting,option); 6 this.css("color",setting.colorStr).css("fontSize",setting.fontSize+"px"); 7 return this; 8 } 9 }(jQuery));
說道這里基於jquery開發插件的方法已經介紹完畢，下面一篇博客我會給大家介紹怎么基於jquery開發一款分頁插件。
在查看的時候如果發現什么問題,歡迎大家在評論區提出來，我們相互討論