把自己写的代码封装成插件是很有必要的，不仅利于团队合作，而且今后需要的时候也可以直接调用。接下来，我为大家介绍一种实用的插件封装方式。
在开始写代码之前，我们首先了解这几个知识点。
闭包
在很多插件框架中我们都会看到这样一段代码：
(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对象就可以啦~