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对象就可以啦~