jQuery Boilerplate——流行的jQuery插件开发模板

在初次进行jquery插件开发时，咱们每每无从下手，固然咱们能够按照jquery官方提供的格式进行简单的插件开发，可是不少时候每每不尽完美，一不当心，就造出一个很“烂”的插件：难以维护、难以扩展、使用繁琐、性能不佳...当咱们在不断的实践中，慢慢积累下来时，有些问题获得了有效的避免，但也带来了新的问题：在众多纷杂的jquery插件开发模式中，究竟哪种模式才是最好的呢？

若是能提供一个模板，经过必定的约束和规范为开发者解决在jquery插件开发中的“迷惘”那该多好！在这里主要介绍下一个在实际开发中最经常使用的jquery模板插件——jQuery Boilerplate

jQuery Boilerplate不是jquery插件开发的银弹，他并无提供各类模式的完美解决方案，固然这也不是他所追求的目标，他的目的只是提供一个最基础的模板，对于初学者而言，你只须要在这个模板的基础上作相应的修改便可。来看一下jQuery Boilerplate提供的一个基础模板（是否是以为很熟悉呢？没错，bootstrap就是这个模式）：

// 这个分号的做用是防止和其余jquery插件合并时，别人不规范的jquery插件忘记使用分号结束
    //影响到咱们当前的插件，致使没法运行的问题。 
    ;(function ( $, window, document, undefined ) {

            // undefined做为形参的目的是由于在es3中undefined是能够被修改的
            //好比咱们能够声明var undefined = 123,这样就影响到了undefined值的判断，幸运的是在es5中,undefined不能被修改了。
            // window和document自己是全局变量，在这个地方做为形参的目的是由于js执行是从里到外查找变量的（做用域），把它们做为局部变量传进来，就避免了去外层查找，提升了效率。

            // 声明默认属性对象
            var pluginName = "defaultPluginName",
                    defaults = {
                    propertyName: "value"
            };

            // 构造函数
            function Plugin ( element, options ) {
                    this.element = element;
                    // 将默认属性对象和传递的参数对象合并到第一个空对象中
                    this.settings = $.extend( {}, defaults, options );
                    this._defaults = defaults;
                    this._name = pluginName;
                    this.init();
            }

            // 为了不和原型对象Plugin.prototype的冲突，这地方采用继承原型对象的方法
            $.extend(Plugin.prototype, {
                    init: function () {
                                // 初始化，因为继承自Plugin原型，
                                // 你能够在这里直接使用this.element或者this.settings
                            console.log("xD");
                    },
                    yourOtherFunction: function () {
                            // some logic
                    }
            });

            // 对构造函数的一个轻量级封装，
            // 防止产生多个实例
            $.fn[ pluginName ] = function ( options ) {
                    this.each(function() {
                            if ( !$.data( this, "plugin_" + pluginName ) ) {
                                    $.data( this, "plugin_" + pluginName, new Plugin( this, options ) );
                            }
                    });

                    // 方便链式调用
                    return this;
            };

    })( jQuery, window, document );

上面的模板是一个轻量级的基础模板，在开发中已经能知足咱们大部分需求，例如：对象只实例化一次，链式调用、默认参数、以及公有和私有方法的调用。来看一个示例：

http://jsfiddle.net/mirandaasm/wjPvF/3/

可是在实际开发中，尤为在有必定规模的组件开发中，咱们还面临着不少问题须要解决，好比命名空间的冲突、插件的可扩展性以及公有方法如何方便的调用？固然还有一部分是我的爱好的缘由，我就喜欢使用其余模式的开发方式。这里jQuery Boilerplate也提供了几种不一样模式的组件开发方式，你能够选择一个适合你的使用：

• 轻量级（基础）模式 为初学者提供的一个简单通用的基础模板，包括基础的默认对象、简单的构造函数、默认参数和传递参数的合并以及防止对象屡次实例化的构造函数的简单封装。
• Widget factory 工厂模式，没错，jquery ui使用的典型模式，使用面向对象的方式构建复杂有状态的组件，jquery ui中的组件大部分依赖于widget factory基础组件，这个基础模板提供了大部分的默认方法，包括事件触发方法。
• Widget factory + RequireJS 这是个使用RequireJS对Widget factory进行简单封装，使其支持AMD模块化加载规范。
• Namespaced pattern 命名空间模式，在和其余插件一块儿使用时，采用命名空间模式避免和其余插件的冲突问题。
• 更多...