理解jQuery$.extend(）的正确用法

Understanding jQuery $.extend() correct usage

本文关键字：用法 jQuery extend 理解      更新时间：2023-09-26

我有一个jQuery图像库插件，最近的一个pull请求让我怀疑我是否正确使用了extend()。

我目前使用的格式是：

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

但在阅读文档时，我似乎应该这样做：

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

虽然我有一些动态的默认值，所以我可能应该这样做：

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

我应该使用什么方法？

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}

正如您所看到的，目标对象将接收来自第一个more1和第二个more2的属性。

至于您的情况，您可以使用这三种方法，但我建议您使用第二种方法，因为它可以覆盖默认值，因为它们可以使用：（$.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" };

您的第一个调用是可以的，因为选项将合并到第一个对象（默认值）中，该对象仅在那里创建和使用。只有当默认对象在另一个地方声明并在多个调用之间共享时，才需要第二种语法，因为合并可能会更改默认对象。

相关文章：