分享一個自己動手寫的jQuery分頁外掛

分享一個自己動手寫的jQuery分頁外掛_jquery

WBOY

發布： 2016-05-16 16:38:29

原創

1192 人瀏覽過

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

http://demo.jb51.net/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&#63;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插件，可能會有一些地方說的不對，請大家包涵。