工作需要一個(gè)JS分頁(yè)插件，心想自己動(dòng)手寫(xiě)一個(gè)吧，一來(lái)上網(wǎng)找一個(gè)不清楚代碼結(jié)構(gòu)的，出了問(wèn)題難以解決，而且網(wǎng)上的插件所包含的功能太多，有些根本用不到，就沒(méi)必要加載那段JS，二來(lái)想起沒(méi)寫(xiě)過(guò)jQuery插件，就當(dāng)練一下手了，好了，先看結(jié)果：

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

 簡(jiǎn)單說(shuō)一下這個(gè)插件所要實(shí)現(xiàn)的功能

 后臺(tái)將查詢出來(lái)的內(nèi)容全部顯示到頁(yè)面上，這個(gè)插件要控制這些內(nèi)容，使其一頁(yè)一頁(yè)顯示。有上一頁(yè)，下一頁(yè)，首頁(yè)，尾頁(yè)的功能。在第一頁(yè)時(shí)，上一頁(yè)，首頁(yè)要隱藏。在最后一頁(yè)時(shí)，尾頁(yè)，下一頁(yè)要隱藏。一次只顯示幾個(gè)按鈕，當(dāng)點(diǎn)擊當(dāng)次最后一個(gè)按鈕時(shí)，顯示后面幾個(gè)。

 接下來(lái)簡(jiǎn)單說(shuō)一下編碼過(guò)程：

首先可以大膽的先寫(xiě)下以下的代碼：

//為了更好的兼容性，開(kāi)始前有個(gè)分號(hào)
;(
function($){//此處將$作為匿名函數(shù)的形參
}
)(jQuery)//將jQuery作為實(shí)參傳遞給匿名函數(shù)

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

接下來(lái)就是在這個(gè)結(jié)構(gòu)里面寫(xiě)自己的方法了，jQuery提供了兩種方式可以在jQuery里面擴(kuò)展方法。打開(kāi)jQuery API，找到插件機(jī)制，可以看到兩個(gè)方法

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

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

這樣，就相當(dāng)于在jQuery對(duì)象里面添加了一個(gè)max方法，調(diào)用的時(shí)候可以進(jìn)行這樣調(diào)用：jQuery.max()

那么，jQuery.fn是什么呢，打開(kāi)jQuery源碼，可以看到 jQuery.fn = jQuery.prototype。那么jQuery.fn.extend相當(dāng)于在jQuery中添加成員函數(shù)。

這樣子應(yīng)該明白兩者之間的區(qū)別了吧，靜態(tài)方法可以直接調(diào)用,jQuery.max()。成員函數(shù)只有jQuery實(shí)例可以調(diào)用，比如jQuery("#my").max()。

這里我采用jQuery.extend方法。代碼如下：

;(
 function($){
  $.extend({
   "easypage":function(options){
   options = $.extend({//參數(shù)設(shè)置
   contentclass:"contentlist",//要顯示的內(nèi)容的class
   navigateid:"navigatediv",//導(dǎo)航按鈕所在的容器的id
   everycount:"5",//每頁(yè)顯示多少個(gè)
   navigatecount:"5"http://導(dǎo)航按鈕一次顯示多少個(gè)
   }, options); 
}); 

easypage就是使用分頁(yè)插件使用的方法名，contentclass,navigateid,everycount,navigatecount是參數(shù)。

基本框架已經(jīng)搭好了，接下來(lái)就是完成功能。

首先是要找到要分頁(yè)的內(nèi)容，并生成導(dǎo)航按鈕。代碼如下：

var currentpage = 0;//當(dāng)前頁(yè) 
var contents = $("."+options.contentclass);//要顯示的內(nèi)容
var contentcount = contents.length;//得到內(nèi)容的個(gè)數(shù)
var pagecount = Math.ceil(contentcount/options.everycount);//計(jì)算出頁(yè)數(shù)
//拼接導(dǎo)航按鈕
var navigatehtml = "<div id='pagefirst' class='pagefirst'><a href='javascript:void(0)'>首頁(yè)</a></div><div id='pagepre' class='pagepre'><a href='javascript:void(0)'>上一頁(yè)</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)'>下一頁(yè)</a></div><div id='pagelast' class='pagelast'><a href='javascript:void(0)'>尾頁(yè)</a></div>";
 //加載導(dǎo)航按鈕

$("#"+options.navigateid).html(navigatehtml) 

這段代碼比較簡(jiǎn)單，就不多講。

接下來(lái)就是就是實(shí)現(xiàn)一些基本的功能，這里抽取其中兩個(gè)顯示

//隱藏所有的導(dǎo)航按鈕
$.extend({
"hidenavigates":function(){
//遍歷所有的導(dǎo)航按鈕
navigates.each(function(){
$(this).hide();
}) 
} 
});
 
//顯示導(dǎo)航按鈕
$.extend({
"shownavigate":function(currentnavigate){
$.hidenavigates();
//當(dāng)前按鈕如果小于要求一次顯示按鈕個(gè)數(shù)的，從0開(kāi)始顯示
var begin = currentnavigate>=options.navigatecount?currentnavigate-parseInt(options.navigatecount):0;
//這里保證從第二頁(yè)開(kāi)始，按鈕的個(gè)數(shù)都是2*options.navigatecount
if(begin>navigates.length-2*options.navigatecount){
begin = navigates.length-2*options.navigatecount; 
}
//開(kāi)始顯示
for(var i = begin;i < currentnavigate+parseInt(options.navigatecount);i++){
$(navigates[i]).show();
}
} 
});

 好了，基本的代碼流程就是這樣了，程序的源代碼在附件中，具體的功能實(shí)現(xiàn)在源代碼注釋中已經(jīng)解釋的挺清楚了。對(duì)于閉包還有疑問(wèn)的，可以查看我上一篇博客，談?wù)刯avascript閉包。

下面總結(jié)一下jQuery插件的基本要點(diǎn)，呵呵，從鋒利的jQuery中摘錄出來(lái)的。

•插件的文件名推薦為 jquery.[插件名].js，例如jquery.color.js
• 所有的對(duì)象方法都應(yīng)當(dāng)附加到j(luò)Query.fn對(duì)象上，而所有的全局函數(shù)都應(yīng)當(dāng)附加到j(luò)Query對(duì)象本身上

•在插件內(nèi)部，this指向的是當(dāng)前通過(guò)選擇器獲取的jQuery對(duì)象，而不像一般的方法那樣，例如click()方法，內(nèi)部的this指向的是DOM元素

•可以通過(guò)this.each來(lái)遍歷所有元素
•所有的方法或函數(shù)插件，都應(yīng)當(dāng)以分號(hào)結(jié)尾，否則壓縮時(shí)可能出問(wèn)題，有的為了更加穩(wěn)妥些，在插件的開(kāi)始處加上一個(gè)分號(hào)
•插件應(yīng)該返回一個(gè)jQuery對(duì)象，這樣可以保證插件的可鏈?zhǔn)讲僮?。除非插件需要返回的是一些需要獲取的量，例如字符串或者數(shù)組等
•盡量利用閉包技巧歷來(lái)避免變量名的沖突
 

因?yàn)榈谝淮螌?xiě)jQuery插件，可能會(huì)有一些地方說(shuō)的不對(duì)，請(qǐng)大家包涵。

最新評(píng)論