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

落日映苍穹つ 2022-05-22 03:44 261阅读 0赞

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

> 在开始写代码之前，我们首先了解这几个知识点。

##### 闭包 #####

在很多插件框架中我们都会看到这样一段代码：

(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)

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

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