jQuery插件的开发（一）：如何写一个插件框架？

把自己写的代码封装成插件是很有必要的，不仅利于团队合作，而且今后需要的时候也可以直接调用。接下来，我为大家介绍一种实用的插件封装方式。

在开始写代码之前，我们首先了解这几个知识点。
#####闭包
在很多插件框架中我们都会看到这样一段代码：

(function($){
	/your code
})(jQuery);

这里使用闭包的好处官方给出了三点解释：

• 避免全局依赖
• 避免第三方破坏
• 兼容jQuery操作符'$'和jQuery

接下来我们看一下jQuery插件的开发方式。
jQuery的开发方式有两种，

• 类级别组件开发

即给jQuery命名空间下添加新的全局函数，也称为静态方法。

具体代码如下：

jQuery.myPlugin = function(){
   	//code
}

我们平时也常见到过，例如：$.Ajax()、$.extend()

---

• 对象级别组件开发

即挂在jQuery原型下的方法，这样通过选择器获取的jQuery对象实例也能共享该方法，也称为动态方法。

具体代码如下：

$.fn.myPlugin = function(){
   	//code
};
/*这里$.fn === $.prototype*/

我们平时也常见到过，例如：addClass()、attr()等，需要创建实例来调用

很明显，动态方法要比静态方法好用得多，因此，我们这里的插件开发采用动态方法来实现。

---

#####链式调用
这里，我们重点强调一下jQuery的链式调用$("div").next().addClass()...，jQuery的强大之处也在于此，在插件开发时，我们需要这样来获取：

$.fn.myPlugin = function(){
	return this.each(function){
		//code
	}
}
/*return this 返回当前对象，来维护插件的链式调用*/
/*each 循环实现每个元素的访问*/

---

#####单例模式
我们采用的是动态的开发方式，那么就需要创建实例，在创建实例的时候，有一个单例模式的概念。
我们来看一下这样一段代码：

$.fn.MyPlugin = function(){
	var me = $(this),
		instance = me.data("myPlugin");
	if (!instance) {
		me.data("myPlugin",(instance = new myPlugin()));
	}
};

/*如果实例存在则不再重新创建实例*/
/*利用 data() 来存放插件对象的实例*/

---

实现jQuery插件的重点便只有这几点，接下来，我们来实现这个框架

//首部加一个分号是为了防止别人调用时，最后一行代码没加分号，而导致插件报错。
;(function($){
	var _privateFun = function(){
		//这里是私有方法：由于闭包，在外面是访问不到的
	}
	$fn.PageSwitch = (function(){
		function PageSwitch(element,options){
			this.settings = $.extend(true,$.fn.PageSwitch.default,options||{});
			this.element = element;
			this.init();
		}
		PageSwitch.prototype = {
			init : function(){
				//code
			}
		}
		return PageSwitch;
	})();
	$.fn.PageSwitch = function(options){
		//链式调用
		return this.each(function(){
			// 单例模式
			var me = $(this),
				instance = me.data("PageSwitch");
			if (!instance) {
				instance = new PageSwitch(me,options);
				me.data("PageSwitch",instance);
			}
			if ($.type(options) === "string") return instance[options]();
		});
	}
	//默认的配置参数
	$.fn.PageSwitch.default = {
		selectors : {               //配置分页的class
			sections : ".sections",
			section : ".section",
			page : ".pages",
			active : ".active"
		},
		index : 0, 					//对应页面开始的索引值，默认为0
		easing : "ease",			//动画效果
		duration : 500,				//动画执行时间
		loop : false,				//是否循环播放
		pagination : true,			//是否分页
		keyboard : true,			//键盘事件
		direction : "horizontal",		//横竖屏切换
		callback:""					//当实现滑屏后的回调函数
	}
})(jQuery)

在插件外部，我们按照常规的方式去调用：

<script src="../lib/PageSwitch.js"></script>
	<script>
		$("#container").PageSwitch({	//里面是插件配置的属性
			index : 1,
			easing : "linear",
			duration : 800,
			loop : true,
			pagination : true,
			dirction : "herizontal",
		});
		$("#container").PageSwitch("init");
	</script>

大家可以看看这个插件的框架，熟悉一下框架的组成，在今后的开发中，可以像模板一样使用，框架的代码不需要去改变，只需要根据你的需求，去完善这个PageSwitch 对象就可以啦~