你准备好写jQuery插件了吗?

开始之前我得先声明关于几点jQuery的概念:

1、$是jQuery的简写,任何出现$()的地方你都可以转换成jQuery()。

2、jQuery.fn只是jQuery.prototype的一个别名而已。但前提是你要知道JavaScript里面prototype是什么意思。JavaScript prototype整理

OK,如果你清楚上面两个概念,那么我们进入正题:

jQuery提供两种实现插件机制:jQuery.extend(object)、jQuery.fn.extend(object)。

一、jQuery中的$.extend

$.extend也就是支撑起jQuery插件半天边吧,所以我们还是得先了解一下他:

$.extend(object) 将object对象逐个复制给jQuery对象。

问题:

$.extend({ showMsg: function(msg) {  } });

$.showMsg = function(msg) { }

这两者是没有区别,只是第二种方式看起来更加简洁(至少我喜欢这样子写),当然$.extend支持更加复杂操作,比如:

$.extend({

min: function(a, b) { // do something },

max: function(a, b) { // do something }

}); // 逐个将min、max方法复制给jQuery对象。

当然还可以提供另一个对象,并不一定非要复制给jQuery对象,比如:jQuery.extend({ args:'我是args属性' }, options); // 将args复制给options对象

理解上面这些将对我们后面写插件很有帮助。

二、jQuery.extend(object)

扩展jQuery对象本身,意思就是说在jQuery对象本身增加新函数。

当然这是针对jQuery做的一个扩展,实际上你也可以这么写:

jQuery.extend({ pluginName: function(args) { } });

当然还有更简洁、更漂亮的办法:

jQuery.pluginName = function(args) {}

它的使用方法非常简单:$.pluginName(‘我就是这么被调用的’);

jQuery官网就提供一个cookie插件,她就是使用这种插件机制实现的,感兴趣的同学可以看看

三、jQuery.fn.extend(object)

扩展 jQuery 元素集来提供新的方法,绝大部分我们都需要通过jQuery筛选出来一些元素集,然后对元素集进行操作,所以呢,这种插件机制也成了首选。

jQuery.fn.extend({  // 上面已经提到extend如果有多个成员、方法都将会逐个复制给jQuery
 check: function() {
 return this.each(function() { this.checked = true; });
 },
 uncheck: function() {
 return this.each(function() { this.checked = false; });
 }
 });

实现全选和非全选两个插件。

使用方法:$("input[type=checkbox]").check(); // 全选所有checkbox选项框

其中:$("input[type=checkbox]") 是一个元素集。

四、我需要很多参数

很多情况下,我们需要传递很多参数,但是绝大部分又是可选的,比如一个基于FLASH来切换图片效果示例(这在大部分网站里面都会出现的):

$.fn.SwfSlide = function(options) {

options = $.extend({ // 上面我已经讲明了,$.extend可以将对象复制到另一个对象上,而实现可选参数方法是通过她来实现
 swfFile: '/images/pixviewer.swf?1',
 fwidth: 200,  // 默认宽度
 fheight: 160, // 默认高度
 theight: 18,
 files: '',
 links: '',
 texts: ''
 }, options || {});

}

这里面有七个参数,但是当你在调用的时候你不需要七个全指明,也许你只要三个,像这样:$(‘div’).SwfSlide({ files:”, links:”, texts:” });

五、可不是这么就完了

JavaScript脚本框架非常多,最经典像是prototype、yui、mootools等等,如果说一个项目运用多套框架的话,遇到最多关于$冲突问题。jQuery本身提供一些多库共存的解决方案。但是做为我们基于jQuery来写插件,我们还是要考虑到这个多库共存带来的问题。

其实也只是非常简单的一个技巧,将插件代码放到一个包裹器里面:

(function($) {

// 插件代码

})(jQuery); // javascript的匿名对象,强制jQuery对象传递给$,确保我们插件里面使用$都是jQuery对象。

jQuery Boilerplate 插件模板

    // 这个分号的作用是防止和其他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 );

相比较有这么一个用于开发jQuery插件基础模板,自己写插件也会规范许多。

另外我还写过一篇关于Bootstrap插件开发概述,他所用的jQuery插件开发模板也是非常值得学习的地方。

1 Comment

  1. 理解很透彻呢。 帮助很大,谢谢。

发表评论

Your email address will not be published.

*

© 2017 卡片机色彩 沪ICP备13032872号-3

Theme by cipchk

to top