工作需要一個JS分頁插件，心想自己動手寫一個吧，一來上網找一個不清楚代碼結構的，出了問題難以解決，而且網上的插件所包含的功能太多，有些根本用不到，就沒必要加載那段JS，二來想起沒寫過jQuery插件，就當練一下手了，好了，先看結果：

http://demo.jb51.net/js/2014/EasyPage/

 簡單說一下這個插件所要實現的功能

 后臺將查詢出來的內容全部顯示到頁面上，這個插件要控制這些內容，使其一頁一頁顯示。有上一頁，下一頁，首頁，尾頁的功能。在第一頁時，上一頁，首頁要隱藏。在最后一頁時，尾頁，下一頁要隱藏。一次只顯示幾個按鈕，當點擊當次最后一個按鈕時，顯示后面幾個。

 接下來簡單說一下編碼過程：

首先可以大膽的先寫下以下的代碼：

//為了更好的兼容性，開始前有個分號
;(
function($){//此處將$作為匿名函數的形參
}
)(jQuery)//將jQuery作為實參傳遞給匿名函數

這段代碼大家應該不陌生，就是javascript的神級特性---閉包。這也是jQuery插件的常見結構。為什么要使用閉包來作這jQuery的常用結構呢，一來既可以避免內部臨時變量影響全局空間，又可以在插件內部繼續(xù)使用$作為jQuery的別名。

接下來就是在這個結構里面寫自己的方法了，jQuery提供了兩種方式可以在jQuery里面擴展方法。打開jQuery API，找到插件機制，可以看到兩個方法

• jQuery.extend(object)  擴展jQuery對象本身。用來在jQuery命名空間上增加新函數。
• jQuery.fn.extend(object)  擴展 jQuery 元素集來提供新的方法（通常用來制作插件）。
從上面可以看到jQuery.extend(object)是擴展jQuery本身，要是參照java或者C#這些語言的角度來講，就相當于向jQuery中添加靜態(tài)方法。比如說我們這樣寫：

jQuery.extend({
 "max":function(){
  return max;
 } 
}) 

這樣，就相當于在jQuery對象里面添加了一個max方法，調用的時候可以進行這樣調用：jQuery.max()

那么，jQuery.fn是什么呢，打開jQuery源碼，可以看到 jQuery.fn = jQuery.prototype。那么jQuery.fn.extend相當于在jQuery中添加成員函數。

這樣子應該明白兩者之間的區(qū)別了吧，靜態(tài)方法可以直接調用,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"http://導航按鈕一次顯示多少個
   }, 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來遍歷所有元素
•所有的方法或函數插件，都應當以分號結尾，否則壓縮時可能出問題，有的為了更加穩(wěn)妥些，在插件的開始處加上一個分號
•插件應該返回一個jQuery對象，這樣可以保證插件的可鏈式操作。除非插件需要返回的是一些需要獲取的量，例如字符串或者數組等
•盡量利用閉包技巧歷來避免變量名的沖突
 

因為第一次寫jQuery插件，可能會有一些地方說的不對，請大家包涵。

最新評論