Note

春蚕到死丝方尽,人至期颐亦不休,一息尚存须努力,留作青年为范畴。

  博客园  :: 首页  :: 新随笔  :: 联系 :: 订阅 订阅  :: 管理

jQuery插件主要有两种扩展方式:

  1. 扩展全局函数方式。
  2. 扩展对象方法方式。

扩展全局函数方式

扩展全局函数方式定义的插件,即类级别插件,可以通过jQuery.extend()来进行定义。定义格式为:

jQuery.extend(function(){
    pluginName:function(){
        // 这里写实际代码
    };
});

 

这样定义的代码将直接扩展jQuery本身,通过$.pluginName()来进行调用。

定义插件时,需要注意传入的参数。由于这时插件运行在jQuery类范围中,所以传入的参数将是页面级全局的。

扩展对象方法方式

扩展对象方法方式定义的插件,即对象级别插件,是插件中使用最广泛的定义方式。对象级别插件通过$.fn.extend或者$.fn.pluginName来进行定义。推荐使用的定义格式为:

(function($){
    var defaultOptions={};
    $.fn.pluginName=function(option){
        var pluginMethods={
            init:function(option){
                var option=$.extend(defaultOptions,option);
            },
            methods1:function(){},
            methods2:function(){}
        };
 
        if(pluginMethods[option]){
            pluginMethods[option].apply(this,Array.prototype.slice.call(arguments,1));
        }else if(typeof option=='object'){
            pluginMethods.init.apply(this,arguments);
        }else{
            $.error("Some error.");
        }
    }
})(jQuery);

 

这种推荐的插件定义格式可以支持$('selector').pluginName('methods1',args)格式的方法调用,同时也可以支 持$('selector').pluginName({})格式的初始化方法。pluginMethods还可以定义到$.fn.pluginName 外面,但是这样传入的参数就会变成插件级全局的,会影响页面中第二个及以后的插件的使用。所以一般可定义在$.fn.pluginName内部,可方便支 持多个位置使用插件。

通过定义$.fn.pluginName.method形式的方法,可以直接将插件中的方法暴露出来,供外部访问。此外,$.fn.pluginName的定义中的this指的是选择器所选择的对象,可以直接使用,而不用$(this)的方式。

一些常用方法的解释

Array.prototype.slice是用来将类似于数组的参数按照数组的方式切割开,其数字表示返回值从何位置开始取。

prototype中的call和apply在意义上是相同的,第一个参数的意义也是相同的,只是call的第二个参数是作为参数传入,而apply则是 将多个参数组合为一个数组传入。不论A.prototype.method.call(B)还是 A.prototype.method.apply(B),都表示将B对象看作A对象来执行method。

posted on 2016-02-18 15:27  'Note'  阅读(1864)  评论(0编辑  收藏  举报