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 定名空间形式,在和其他插件一同运用时,采纳定名空间形式防备和其他插件的争执题目。
  • 更多…
    原文作者:缪斯的情人
    原文地址: https://segmentfault.com/a/1190000000591665
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。
点赞