jquery 插件的子选项答案

【问题标题】：Sub Options for jquery pluginjquery 插件的子选项
【发布时间】：2012-01-25 01:36:43
【问题描述】：

我正在开发一个插件。确切地说，是一个拖放插件。

我的默认设置如下所示：

var defaults = {
    activeClass: false,
    containment: false,
    cookies: true,
    cookieExdate: 65,
    cursor: 'crosshair',
    cursorAt: {
        top: false,
        bottom: false,
        left: false,
        right: false
    },
    delay: 0,
    distance: 0,
    dragLimitation: false,
    ghostDrop: true,
    ghostOpacity: '0.50',
    ghostRevert: false,
    grid: [20,50],
    handle:false,
    iFrameFix: true,
    instantGhost: false,
    not: false,
    onDrop: function() {},
    onPickUp: function() {},
    radialDrag: true,
    radialOutline: false,
    radius: 100,
    revert: false,
    revertDuration: 500,
    strictMovement: false,
    target: {
        init: '#container',
        lock: false,
        offTarget: function(t) {
            $(t).removeClass('i');
        },
        onTarget: function(t) {
            $(t).addClass('i');
        }
    },
    zIndex: false
}

然后我使用：

var o = $.extend(defaults, options)

获取默认值。

Ex. o.cursorAt.left. 这将获得 cursorAt 中的 Sub 选项 left 的值如您所见，我有子选项（我称之为它们），它们看起来像这样：

cursorAt: {
    top: false,
    bottom: false,
    left: false,
    right: false
},

当我在我的插件中使用它时，我只想使用一个。例如：

cursorAt: {
    bottom: 0
}

但这不起作用，我知道这是因为在 cursorAt 点的默认值中必须存在以下内容：

{
    top: false,
    bottom: false,
    left: false,
    right: false
}

有没有办法让它工作，所以我只需要命名一个。有什么简单的方法吗？或者这将是一个艰难而复杂的过程。我的插件代码已经有 1000 行了，所以我不想做大的改动。

Jsfiddle 示例：

这行得通：

http://jsfiddle.net/C4f97/

但这不是：http://jsfiddle.net/C4f97/1/

我插件上的任何 cmets 都会很好 ;) 提前致谢！

【问题讨论】：

我希望每个人都把问题写得简洁而详细。示例、期望的结果、使用上下文……你能教一堂课吗？ :)
哇，谢谢！这是我第一次在 StackOverflow 上得到如此惊人的评论。实际上，当我长大一点时，我打算教 Javascript :)

标签： javascript jquery plugins jquery-plugins

【解决方案1】：

试试这个：

var o = $.extend(true, {}, defaults, options);

这里有两个值得注意的细节。第一个是布尔值 true，它告诉 jQuery 递归地扩展它们（而不是覆盖你的“子选项”）。

第二个是 {}，它创建一个新对象，因此您实际上并没有在每次创建新实例时都修改默认值。

【讨论】：

【解决方案2】：

当您将选项复制到默认值时，您希望使用“深拷贝”，它通过子对象递归并复制所有内容。

$.extend(true, defaults, options);

http://api.jquery.com/jQuery.extend/

【讨论】：

触摸！ +1 链接。但是，您的示例仍然让他在每次创建实例时修改默认值（因为默认值位于第一个插槽中）:)
字。我假设插件的每个实例都会重新实例化默认值，但你是对的；只创建一个全新的对象会更安全。

【解决方案3】：

使用$.extend(true, defaults, options) 进行深度复制到递归合并。 jQuery.extend

【讨论】：