工作需要一個JS分頁插件，心想自己動手寫一個吧，一來上網找一個不清楚代碼結構的，出了問題難以解決，而且網上的插件所包含的功能太多，有些根本用不到，就沒必要加載那段JS，二來想起沒寫過jQuery插件，就當練一下手了，好了，先看結果：
http://demo.cnblogs.com/js/2014/EasyPage/
簡單說一下這個插件所要實現的功能
後台將查詢出來的內容全部顯示到頁面上，這個插件要控制這些內容，使其一頁一頁顯示。有上一頁，下一頁，首頁，尾頁的功能。在第一頁時，上一頁，首頁要隱藏。在最後一頁時，尾頁，下一頁要隱藏。一次只顯示幾個按鈕，當點擊當次最後一個按鈕時，顯示後面幾個。
接下來簡單說一下編碼過程：
首先可以大膽的先寫下以下的代碼：
//為了更好的兼容性，開始前有個分號
;(
function($){//此處將$作為匿名函數的形參
}
)(jQuery)//將jQuery作為實參傳遞給匿名函數
這段代碼大家應該不陌生，就是javascript的神級特性---閉包。這也是jQuery插件的常見結構。為什麼要使用閉包來作這jQuery的常用結構呢，一來既可以避免內部臨時變量影響全局空間，又可以在插件內部繼續使用$作為jQuery的別名。
接下來就是在這個結構裡面寫自己的方法了，jQuery提供了兩種方式可以在jQuery裡面擴展方法。打開jQuery API，找到插件機制，可以看到兩個方法
• jQuery.extend(object) 擴展jQuery對象本身。用來在jQuery命名空間上增加新函數。
• jQuery.fn.extend(object) 擴展 jQuery 元素集來提供新的方法（通常用來制作插件）。
從上面可以看到jQuery.extend(object)是擴展jQuery本身，要是參照java或者C#這些語言的角度來講，就相當於向jQuery中添加靜態方法。比如說我們這樣寫：
jQuery.extend({
"max":function(){
return max;
}
})
這樣，就相當於在jQuery對象裡面添加了一個max方法，調用的時候可以進行這樣調用：jQuery.max()
那麼，jQuery.fn是什麼呢，打開jQuery源碼，可以看到 jQuery.fn = jQuery.prototype。那麼jQuery.fn.extend相當於在jQuery中添加成員函數。
這樣子應該明白兩者之間的區別了吧，靜態方法可以直接調用,jQuery.max()。成員函數只有jQuery實例可以調用，比如jQuery("#my").max()。
這裡我采用jQuery.extend方法。代碼如下：
;(
function($){
$.extend({
"easypage":function(options){
options = $.extend({//參數設置
contentclass:"contentlist",//要顯示的內容的class
navigateid:"navigatediv",//導航按鈕所在的容器的id
everycount:"5",//每頁顯示多少個
navigatecount:"5"//導航按鈕一次顯示多少個
}, options);
});
easypage就是使用分頁插件使用的方法名，contentclass,navigateid,everycount,navigatecount是參數。
基本框架已經搭好了，接下來就是完成功能。
首先是要找到要分頁的內容，並生成導航按鈕。代碼如下：
var currentpage = 0;//當前頁
var contents = $("."+options.contentclass);//要顯示的內容
var contentcount = contents.length;//得到內容的個數
var pagecount = Math.ceil(contentcount/options.everycount);//計算出頁數
//拼接導航按鈕
var navigatehtml = "<div id='pagefirst' class='pagefirst'><a href='javascript:void(0)'>首頁</a></div><div id='pagepre' class='pagepre'><a href='javascript:void(0)'>上一頁</a></div>";
for(var i = 1;i <= pagecount;i++){
navigatehtml+='<div class="pagenavigate"><a href="javascript:void(0)">'+i+'</a></div>';
}
navigatehtml+="<div id='pagenext' class='pagenext'><a href='javascript:void(0)'>下一頁</a></div><div id='pagelast' class='pagelast'><a href='javascript:void(0)'>尾頁</a></div>";
//加載導航按鈕
$("#"+options.navigateid).html(navigatehtml)
這段代碼比較簡單，就不多講。
接下來就是就是實現一些基本的功能，這裡抽取其中兩個顯示
//隱藏所有的導航按鈕
$.extend({
"hidenavigates":function(){
//遍歷所有的導航按鈕
navigates.each(function(){
$(this).hide();
})
}
});
//顯示導航按鈕
$.extend({
"shownavigate":function(currentnavigate){
$.hidenavigates();
//當前按鈕如果小於要求一次顯示按鈕個數的，從0開始顯示
var begin = currentnavigate>=options.navigatecount?currentnavigate-parseInt(options.navigatecount):0;
//這裡保證從第二頁開始，按鈕的個數都是2*options.navigatecount
if(begin>navigates.length-2*options.navigatecount){
begin = navigates.length-2*options.navigatecount;
}
//開始顯示
for(var i = begin;i < currentnavigate+parseInt(options.navigatecount);i++){
$(navigates[i]).show();
}
}
});
好了，基本的代碼流程就是這樣了，程序的源代碼在附件中，具體的功能實現在源代碼注釋中已經解釋的挺清楚了。對於閉包還有疑問的，可以查看我上一篇博客，談談javascript閉包。
下面總結一下jQuery插件的基本要點，呵呵，從鋒利的jQuery中摘錄出來的。
•插件的文件名推薦為 jquery.[插件名].js，例如jquery.color.js
• 所有的對象方法都應當附加到jQuery.fn對象上，而所有的全局函數都應當附加到jQuery對象本身上
•在插件內部，this指向的是當前通過選擇器獲取的jQuery對象，而不像一般的方法那樣，例如click()方法，內部的this指向的是DOM元素
•可以通過this.each來遍歷所有元素
•所有的方法或函數插件，都應當以分號結尾，否則壓縮時可能出問題，有的為了更加穩妥些，在插件的開始處加上一個分號
•插件應該返回一個jQuery對象，這樣可以保證插件的可鏈式操作。除非插件需要返回的是一些需要獲取的量，例如字符串或者數組等
•盡量利用閉包技巧歷來避免變量名的沖突
因為第一次寫jQuery插件，可能會有一些地方說的不對，請大家包涵。