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

你可能感兴趣的:(jQuery)