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 命名空间模式,在和其他插件一起使用时,采用命名空间模式避免和其他插件的冲突问题。
  • 更多...

缪斯的情人
ส็็็็็็็็็็็็็็ส็็็็็็็็็็็็็็ส็็็็็็็็็็็็็็ส็็็็็็็็็็็็็็技术博客ส็็็็็็็็็็็็็็ส็็็็็็็็็็็็็...

能吟诗担粪,与上帝乞儿

1.2k 声望
96 粉丝
0 条评论
推荐阅读
2019年山东互联网技术大会精彩回顾(PPT下载)
这个年底我们再次重逢,作为一个由山东互联网开发者自发组织的公益沙龙,j+ 陪伴大家走过了6个年头,6年中,我们组织了将近50场技术沙龙,覆盖人数2W多,为山东互联网开发者搭建了一个互通交流的平台。

缪斯的情人3阅读 2.9k

从零搭建 Node.js 企业级 Web 服务器(零):静态服务
过去 5 年,我前后在菜鸟网络和蚂蚁金服做开发工作,一方面支撑业务团队开发各类业务系统,另一方面在自己的技术团队做基础技术建设。期间借着 Node.js 的锋芒做了不少 Web 系统,有的至今生气蓬勃、有的早已夭折...

乌柏木148阅读 12.1k评论 10

JavaScript有用的代码片段和trick
平时工作过程中可以用到的实用代码集棉。判断对象否为空 {代码...} 浮点数取整 {代码...} 注意:前三种方法只适用于32个位整数,对于负数的处理上和Math.floor是不同的。 {代码...} 生成6位数字验证码 {代码...} ...

jenemy46阅读 5.8k评论 12

从零搭建 Node.js 企业级 Web 服务器(十五):总结与展望
总结截止到本章 “从零搭建 Node.js 企业级 Web 服务器” 主题共计 16 章内容就更新完毕了,回顾第零章曾写道:搭建一个 Node.js 企业级 Web 服务器并非难事,只是必须做好几个关键事项这几件必须做好的关键事项就...

乌柏木65阅读 6k评论 16

再也不学AJAX了!(二)使用AJAX ① XMLHttpRequest
「再也不学 AJAX 了」是一个以 AJAX 为主题的系列文章,希望读者通过阅读本系列文章,能够对 AJAX 技术有更加深入的认识和理解,从此能够再也不用专门学习 AJAX。本篇文章为该系列的第二篇,最近更新于 2023 年 1...

libinfs39阅读 6.3k评论 12

封面图
从零搭建 Node.js 企业级 Web 服务器(一):接口与分层
分层规范从本章起,正式进入企业级 Web 服务器核心内容。通常,一块完整的业务逻辑是由视图层、控制层、服务层、模型层共同定义与实现的,如下图:从上至下,抽象层次逐渐加深。从下至上,业务细节逐渐清晰。视图...

乌柏木42阅读 7.2k评论 6

CSS 绘制一只思否猫
欢迎关注我的公众号:前端侦探练习 CSS 有一个比较有趣的方式,就是发挥想象,绘制各式各样的图案,比如来绘制一只思否猫?思否猫,SegmentFault 思否的吉祥物,是一只独一无二、特立独行、热爱自由的(>^ω^&lt...

XboxYan42阅读 2.9k评论 14

封面图

能吟诗担粪,与上帝乞儿

1.2k 声望
96 粉丝
宣传栏