转载——jquery 插件开发进阶

深入理解jQuery插件开发 换一种思路来做js的开发

/*
 * jQuery renrenBase plugin
 * @requires jQuery v1.3 or later
 *    人人平台接入相关JS
 * Examples at:
 * Dual licensed under the MIT and GPL licenses:
 * ####天铭技术技术部程序五组####
 * author: yangzhu 2010-12-07
 * Version: 1.0.1
 */
 (function(jQuery){
    
    /*变量设置*/
    var defaults_setting = {
        appId: '124300',
        descript : '添加关注,获得更多抽奖机会!'
    };
    
    jQuery.default_setting = {
        appId: '124300',
        descript : '添加关注,获得更多抽奖机会!'
    }
    
    jQuery.fn.test = function(setting){
        defaults_setting = jQuery.extend(defaults_setting,setting);
        return this.each(function(){});
    }

    /*插件命名空间*/
    jQuery.test = {
       
        testb:function()
        {
            alert('testb');
            testa();
        }
    }
    
    function testa(){
        alert(defaults_setting.appId);
        alert(jQuery.default_setting.appId);
    }
   

})(jQuery);

上面的是完整的例子有详细的说明

今天又仔细看看下jquery插件开发的文档，发现自已之前理解的还是有问题，命名空间乱用。没有用私有方法。于是再总结了一下。

首先是闭包 格式如下

      (function(jQuery){
   
      })(jQuery);

jquery 的插件其实就是一个js的闭包。闭包我也理解不深，大概的就是闭包内的函数和变量在函数外部都是不能直接访问的，并且闭包里的资源(方法和变量等)在函数 返回后并不注销。这里传进来的$就是jquery对像 (注意不是$('#abc')这样的选择器对像),我们给这个对像附加变量和方法以便在闭包外部调用（这是核心的思想）。

往下看
    var defaults_setting = {
        appId: '124300',
        descript : '添加关注,获得更多抽奖机会!'
    };

这是定义了一个数组对像。由于是在闭包内部定义的所以我们不能在闭包外部调用到。我个人的感觉这类似于面向对像中的private属性.

接着

    jQuery.default_setting = {
        appId: '124300',
        descript : '添加关注,获得更多抽奖机会!'
    }

 这里我们给jQuery对像添加了一个属性也是一个数组对像，前面有介绍了，这个属性是对jquery对像本身的改变，我们在插件外部是可以访问和改变属性值的。 方法如下

      jQuery.default_setting.appId = 'fuck';

很 明显这类似于面向对像语言中的public属性。 这里再说明下 jQuery 这个关键字跟 $ 是等效的。在写插件时推荐用 jQuery 代替 $ 这样子在用户自定交jquery关键字$为其它符号时插件也可用。（我曾经遇到过 $ 与其它JS的定义冲突，把 $ 改成 $$$ jquery的使用方法也变成了$$$('#abc').show()这样 ）记得jQuery的第二个字Q大写，必须一致。

再下面

    jQuery.fn.test = function(setting){
        defaults_setting = jQuery.extend(defaults_setting,setting);
        return this.each(function(){

                   /*这是城是执行的操作*/

        });
    }

这是给jquery对像添加了一个静态方法。 可以外部调用，调用方式如下$().test(); 其中可以传一个数组对像做为参数。

       return this.each(function(){});

这个写法是为了保留JQUERY的链式操作特性。 比如我们曾经曾这样用过。

       $('#abc').show().hide('slow');

那么我们的插件方法也可以这样调用了。

       $('#abc').show().test().hide('slow');

能这样做的功能就是  return this.each(function(){}); 这一句实现的。其实也很简单  this 是我们传进来的jquery选择器对像，在我们执行完插件内部的操作后我们把这个对像返回。于是就可以进行下一次调用了。 我们可以

        alert(  $('#abc'));

        alert(  $('#abc').show().test(). );

会发现他们的值都是一个对像。

 

还有这一句

       defaults_setting = jQuery.extend(defaults_setting,setting);

是jquery的一个方法(函数) ，这个方法的做为是合并两个变量。如果有重复的值setting会覆盖defaults_setting中对应的值。看下手册就明白了。这是个很有用的方法。

 

再往下就是

 /*插件命名空间*/
    jQuery.test = {
        testb:function()
        {
            alert('testb');
            testa();
        }
    }

什么是插件的命名空间我也不知道我的理解是否正确，我的理解是要把我们实现某种功能的方法整合在一起放在一个命名空间之下，方便管理，并且不容易与其它插件的方法冲突。命名空间可以在闭包外部调用。方法如下

jQuery.test.testb();

我的感觉这有些类似php中的静态方法而且是public的，只要知道类名和方法就可以使用，而之前那种方式必须要有选择器对像才能调用$().test(); (当然也可以$.test();不过还是有选择器。)

可能我的理解有误吧，但是把实现一系列操作的方法放进一个命名空间这样本身也会很方便管理（我比较讨厌乱七八糟的代码）。 另外可以在一个包中定义多个命名空间（前提是不能重复）。

 

再往下就是   

    function testa(){
        alert(defaults_setting.appId);
        alert(jQuery.default_setting.appId);
    }

这是一个很普通的函数，但是在闭包中他变成了一个私有的函数。不能被外部访问，就像是面向对像中的private。这样子我们可以把我们的核心逻辑放进这样的function 然后在jquery的静态方法和命名空间中提供外部访问的接口。

 

总的来说jquery插件利用闭包实现了方法和变量的私有，并能够提供public的访问方式。在实际项目中还是很有意义。甚至可以想像到这样的方式已经能够做为大型的js项目提供一种有序的开发机制了（当然可以用extjs了，只是应该可以实现的）。

 

写点东东不容易，如有转载请注明出处！