js插件开发的一些感想和心得

; (function ($, window, document, undefined) {   "use strict";      var defaults = {          pageIndex: 0,          pageSize: 6,          itemCount: 50,          maxButtonCount: 7,          prevText: "上一页",          nextText: "下一页",          buildPageUrl: null,          onPageChanged: null      };        function Pager($ele, options) {          this.$ele = $ele;          this.options = options = $.extend(defaults, options || {});          this.init();      }      Pager.prototype = {          constructor: Pager,          init: function () {              this.renderHtml();              this.bindEvent();          },          renderHtml: function () {              var options = this.options;                options.pageCount = Math.ceil(options.itemCount / options.pageSize);              var html = [];                //生成上一页的按钮              if (options.pageIndex > 0) {                  html.push('<a page="' + (options.pageIndex - 1) + '" href="' + this.buildPageUrl(options.pageIndex + 1) + '" class="flip">' + options.prevText + '</a>');              } else {                  html.push('<span class="flip noPage">' + options.prevText + '</span>');              }                //这里是关键              //临时的起始页码中间页码，当页码数量大于显示的最大按钮数时使用              var tempStartIndex = options.pageIndex - Math.floor(options.maxButtonCount / 2) + 1;                //计算终止页码，通过max计算一排按钮中的第一个按钮的页码，然后计算出页数量              var endIndex = Math.min(options.pageCount, Math.max(0, tempStartIndex) + options.maxButtonCount) - 1;              var startIndex = Math.max(0, endIndex - options.maxButtonCount + 1);                // 第一页              if (startIndex > 0) {                  html.push("<a href='" + this.buildPageUrl(0) + "' page='" + 0 + "'>1</a> ");                  html.push("<span>...</span>");              }                //生成页码按钮              for (var i = startIndex; i <= endIndex; i++) {                  if (options.pageIndex == i) {                      html.push('<span class="curPage">' + (i + 1) + '</span>');                  } else {                      html.push('<a page="' + i + '" href="' + this.buildPageUrl(options.pageIndex + 1) + '">' + (i + 1) + '</a>');                  }              }                // 最后一页              if (endIndex < options.pageCount - 1) {                  html.push("<span>...</span> ");                  html.push("<a href='" + this.buildPageUrl(options.pageCount - 1) + "' page='" + (options.pageCount - 1) + "'>" + options.pageCount + "</a> ");              }                //生成下一页的按钮              if (options.pageIndex < options.pageCount - 1) {                  html.push('<a page="' + (options.pageIndex + 1) + '" href="' + this.buildPageUrl(options.pageIndex + 1) + '" class="flip">' + options.nextText + '</a>');              } else {                  html.push('<span class="flip noPage">' + options.nextText + '</span>');              }                this.$ele.html(html.join(""));          },          bindEvent: function () {              var that = this;              that.$ele.on("click", "a", function () {                  that.options.pageIndex = parseInt($(this).attr("page"), 10);                  that.renderHtml();                  that.options.onPageChanged && that.options.onPageChange(that.options.pageIndex);              })          },          buildPageUrl: function () {              if ($.isFunction(this.options.buildPageUrl)) {                  return this.options.buildPageUrl(pageIndex);              }              return "javascript:;";          }              };          $.fn.pager = function (options) {          options = $.extend(defaults, options || {});            return new Pager($(this), options);      }    })(jQuery, window, document);

这段代码中有两个关键点要记住：

（1）html代码的生成，由于页码可能太多，需要隐藏部分页码，所以我们要生成一个省略号表示被隐藏的页码，通过maxButtonCount来表示最多的页码按钮

（2）事件绑定，每次页码改变都会重新生成html，我们采用事件代理的方式，提高了性能，也不用重复绑定事件

这样一个最基本的分页插件已经可以了。

但是这样足够了吗？

假设我们需要支持输入页码直接跳转的功能，那该如何呢，是否需要修改原有的html结构和css？前面我们说到，开发一个插件要围绕最基本的需求开始，那对于这些潜在的可能存在的需求又该如何处理呢。

我的解决方案是这样的，提供简单的api，不提供UI，完全由用户自定义。

我们在上面的代码增加三个api：getPageIndex，setPageIndex和setItemCount，分别表示获取当前索引，设置当前索引，设置项目总数量。代码如下：

getPageIndex: function () {      return this.options.pageIndex;  },  setPageIndex: function (pageIndex) {      this.options.pageIndex = pageIndex;      this.renderHtml();  },  setItemCount: function (itemCount) {      this.options.pageIndex = 0;      this.options.itemCount = itemCount;      this.renderHtml();  }

整个插件的代码已经放在我的github上，有兴趣的同学可以点击查看 github

总结

这是我在编写js插件时，考虑如何轻量化并且适用性强的一些想法，欢迎大家交流！