JavaScript编程开发中jQuery分页插件开发

工作需要一个js分页插件，心想自己动手写一个吧，一来上网找一个不清楚代码结构的，出了问题难以解决，而且网上的插件所包含的功能太多，有些根本用不到，就没必要加载那段js，二来想起没写过jquery插件，就当练一下手了。

 简单说一下这个插件所要实现的功能

 后台将查询出来的内容全部显示到页面上，这个插件要控制这些内容，使其一页一页显示。有上一页，下一页，首页，尾页的功能。在第一页时，上一页，首页要隐藏。在最后一页时，尾页，下一页要隐藏。一次只显示几个按钮，当点击当次最后一个按钮时，显示后面几个。

 接下来简单说一下编码过程：

首先可以大胆的先写下以下的代码：

//为了更好的兼容性，开始前有个分号
;(
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:"navigatep",//导航按钮所在的容器的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 = "<p id='pagefirst' class='pagefirst'><a href='javascript：void(0)'>首页</a></p><p id='pagepre' class='pagepre'><a href='javascript：void(0)'>上一页</a></p>";
for(var i = 1;i <= pagecount;i++){
 navigatehtml+='<p class="pagenavigate"><a href="javascript：void(0)">'+i+'</a></p>';
}
navigatehtml+="<p id='pagenext' class='pagenext'><a href='javascript：void(0)'>下一页</a></p><p id='pagelast' class='pagelast'><a href='javascript：void(0)'>尾页</a></p>";
 //加载导航按钮

$("#"+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对象，这样可以保证插件的可链式操作。除非插件需要返回的是一些需要获取的量，例如字符串或者数组等
•尽量利用闭包技巧历来避免变量名的冲突。