最近有几个新项目开发,框架使用的spring-boot,在开发早期会封装大量的工具包. 我看了下项目的前端页面分页都是复制粘贴,感觉实在是不妥.看着都难受. 就将他们引用的分页工具包封装成jquery的插件.使得代码简洁,调用方便.

下面就切入代码. 首先贴出项目中分页的代码 基本上每个页面的分页都是将这段代码粘贴一份.

OK开始将上面的代码进行封装.

(function($, window, document) {
	var MyPage = {
		init : function(elem, options) {
			var self = this;
			self.options = $.extend({}, $.fn.mypage.options, options);

			self.validate();

			self.reqData();
		},
		validate : function() {
			var self = this;
			if (self.options.url == '') {
				throw new error("分页请求url未设置.");
			}
		},
		reqData : function() {
			
			var self = this;
			$.ajax({
				type : "get",
				url : self.options.url,
				data : self.options,
				success : function(data) {
					$("tbody").html(data);
					self.reqPageAfterHandler($("tbody").find("#totalPages").val());
				},
				error : function(data) {
					alert("请求分页数据出错");
				}
			});
		},
		reqPageAfterHandler : function(totalPage) {
			var self = this;
			if (totalPage <= 1) {
				$(".pagination").empty();
				return false;
			}
			console.log('totalPage:'+totalPage);
//			var totalPage = parseInt(count / self.options.limit)
//					+ ((count % self.options.limit) > 0 ? 1 : 0);
			$(".pagination").bootstrapPaginator({
				bootstrapMajorVersion : 3.0,
				currentPage : self.options.current,
				totalPages : totalPage,
				numberOfPages : self.options.limit,
				itemTexts : function(type, page, currentpage) {
					switch (type) {
					case "first":
						return "首页";
					case "prev":
						return "上一页";
					case "next":
						return "下一页";
					case "last":
						return "尾页";
					case "page":
						return page;
					}
				},
				onPageClicked : function(event, originalEvent, type, page) {
					if (self.options.current == page) {
						return false;
					}
					self.options.current = page;
					self.options.start = page-1;
					self.reqData();
				}
			});

		}
	};

	$.fn.mypage = function(options) {
		var mt = Object.create(MyPage);
		mt.init(this, options);
	};
	$.fn.mypage.options = {
		'current' : 1,
		'limit' : 10,
		'start' : 0,
		'url' : ''
	};
})(jQuery, window, document);

上面有段代码肯定不少小伙伴在jquery的代码中经常看到. 就进行了4个方法的封装, 初始化,验证,请求数据,数据处理 ,其中参数统一封装到对象属性上,作为全局参数进行使用.

那么究竟该如何使用了

1. 引入前面的插件.
2. 调用代码如下

$(document).ready(function(){
	$(document).mypage({'url':'/management/term/list','schoolId':1,'q':$(':input[name=q]').val()});
});

在上面引入了一个 Object.create(MyPage); 这个是为了创建对象的时候兼容各个浏览器而做的转换.

if (typeof Object.create != "function") {
	Object.prototype.create = function(obj) {
		var F = function() {
		};
		F.prototype = obj;
		return new F();
	}
};

这段代码放在插件前面进行初始就可以了.

到此封装已经结束,这里就只简单讲述下如何将公用的代码变成jquery插件.对于上面的插件项目中还进行了很多其他处理,比如方法回调等.这里就不再详细累述.