美文网首页我爱编程
jQuery插件写法

jQuery插件写法

作者: Leo_0 | 来源:发表于2017-04-19 13:30 被阅读0次

    最近在学写jQuery插件,记录一下写插件的方式。
    jQuery为用户提供了jQuery.extend()jQuery.fn.extend()的方法。
    jQuery.extend()方法将两个或多个对象的内容合并到第一个对象中。一般jQuery.extend()方法用来合并参数。
    用法:<code>jQuery.extend(target [, object1 ] [, objectN ]);</code>
    或<code>jQuery.extend([deep],target [, object1 ] [, objectN ]);</code>
    如果deep为true,则递归合并,会进行深拷贝.
    jQuery.extend(target [, object1 ] [, objectN ])示例:
    <pre>
    var person1 = {
    name:'who',
    age:18,
    parents:{father: 'someone', mom: 'anybody'}
    };
    var person2= {
    parents:{mom:'someone'},
    sex:'boy'
    };
    $.extend(person1,person2);//person1={name:'who',age:18,parents:{mom:'someone'},sex:'boy'};
    </pre>
    jQuery.extend([deep],target [, object1 ] [, objectN ])示例:
    <pre>
    var person1 = {
    name:'who',
    age:18,
    parents:{father: 'someone', mom: 'anybody'}
    };
    var person2= {
    parents:{mom:'someone'},
    sex:'boy'
    };
    $.extend(true,person1,person2);//person1={name:'who',age:18,parents:{father:'someone',mom:'someone'},sex:'boy'};
    </pre>
    一般在写插件时,不会覆盖掉默认参数defaults,所以在扩展参数时一个好的写法是$.extend({},defaults,options),用一个空对象{}作为第一个参数,这样能将所有值合并到{}中,并且保护好默认参数。
    jQuery.fn.extend()方法将对象的内容合并到jQuery原型上以提供新的jQuery实例方法。该方法扩展jQuery prototype($.fn)对象以提供可以链接到该jQuery()函数的新方法。
    插件一般有两种书写形式:
    <pre>
    //第一种
    $.fn.functionName = function([options]){};//这个一次只能声明一个函数
    //第二种
    $.fn.extend({func1:function{},funcN:function{}});//这个可以声明多个函数
    </pre>
    可以这样写插件:
    <pre>
    $.fn.myPlugin = function(options){
    var defaults={attr1:value1,attrN:valueN};//默认参数
    var settings=$.extend({},defaults,options);//扩展参数
    return this.each(function(){
    //some operations use settings you want
    });//加return返回jQuery对象本身,这样是为了能支持jQuery的链式调用
    }
    //调用方式
    $(obj).myPlugin({prop1:value1,propN:valueN});
    </pre>
    或者这样:
    <pre>
    $.fn.extend({
    func1:function(options){
    //something like $.fn.functionName
    },
    func2:function(options){
    //something like $.fn.functionName
    }
    });
    //调用方式
    $(obj).func1(options);
    $(obj).func2(options);
    </pre>
    一种较好的写法是将代码写在一个自调用匿名函数里面,例如:
    <pre>
    ;(function($,window,document,undefined){
    //our code
    })(jQuery,window,document);
    </pre>
    说明几点:

    1. 在最前面加分号;是为了防止别人在引用该插件时,别人在之前编写的代码结尾没有加;会导致该匿名函数与别人的代码相连,代码无法正常解析而报错。
    2. $实参接受jQuery对象;window, document实参分别接受window, document对象,window, document对象都是全局环境下的,而将window等系统变量以参数形式传递到插件内部时,这些变量在插件内部是一个局部的引用,这样可以减少作用域链的查询时间,提高访问速度。
    3. undefined形参可能是为了兼容性,实际上并没有传递这个参数。

    相关文章

      网友评论

        本文标题:jQuery插件写法

        本文链接:https://www.haomeiwen.com/subject/exbfzttx.html