理解jQuery $ .extend()正确用法

时间:2013-08-02 11:17:16

标签: javascript jquery plugins

我有一个jQuery image gallery plugin,最近的拉取请求让我怀疑我是否正确使用extend()

我目前使用的格式为:

$.fn.collagePlus = function( options ) {

    // Defaults
    var settings = $.extend( {
        "someDefault" : true
        ...
    }, options);

reading the documentation,我似乎应该这样做:

var settings = $.extend( {}, $.fn.collagePlus.defaults, options );

虽然我有一些动态的默认值,所以我应该这样做:

var defaults = { "someDefault" : true };
var settings = $.extend( {}, defaults, options );

我应该采用什么方法?

2 个答案:

答案 0 :(得分:2)

extend方法可以描述如下:

$.extend(target, more1, more2, moreN);

其中target将是使用more1...N中所有属性扩展的对象:

var target = {};
var more1 = {a: 1, b: 2};
var more2 = {b: -2, c: -3};

$.extend(target, more1, more2);

console.log(target); // {a: 1, b: -2, c: -3}

正如您所看到的,目标对象将从第一个接收属性1然后再接收更多2个属性。

至于你的情况,你可以使用这三种方法,但我建议你使用第二种方法,因为它可以覆盖默认值,因为它们可以使用以下方式从全局范围访问:$.fn.plugin.defaults )。

$。fn.plugin.defaults

然后,您插件的用户可以为他正在使用的内容设置插件的默认值:

$.fn.plugin.defaults.something = false;

并没有使用该信息初始化插件乘以次数:

// Top of file, config file or so:
$.fn.plugin.defaults.something = false;

// Somewhere else
$(a).plugin();
$(b).plugin();

// If this pattern is not used you will have to do:
$(a).plugin({something: false});
$(b).plugin({something: false});

$ .extend(true,target,more);

一个副节点是,如果将true作为$.extend的第一个参数传递,则jQuery将进行深度克隆评估而不是浅层克隆:

var target = { a: { a: 1 } };
var more = { a: { b: 2 } };

$.extend(target, more); 
console.log(target) { a: { b: 2 } }


var target = { a: { a: 1 } };
var more = { a: { b: 2 } };
//         V--- Note true here
$.extend(true, target, more); 
console.log(target) { a: { a: 1, b: 2 } } 

静态与动态默认值:

$.fn.plugin = function() {
    return this.each(function() {
         var options = $.extend({}, $.fn.plugin.defaults, {
             images: $(this).children()
         }, arguments[0]);
    });
};

$.fn.plugin.defaults = { something: true, text: "Default Text" };

答案 1 :(得分:1)

您的第一个电话是正常的,因为选项将合并到第一个对象(默认值)中,该对象仅在那里创建和使用。仅当您的默认对象在另一个地方声明并在多个调用之间共享时才需要第二种语法,因为合并更改了默认对象的危险。