-1

我正在创建一个 jQuery 插件，我像下面这样调用它

$('#element').helpify({
    msg : 'This is my message',
    closeButton: {
        text: "Close this",
        colour: "red"
    }
});

然后在插件中我设置了一些默认值并使用扩展创建一个具有如下参数的对象：

var settings = $.extend({
    title: 'Default Title',
    msg : 'Default message',
    closeButton: {
        text: "Close",
        colour: "red",
        btnClass: "pull-right"
    }
}, options);

我知道我可以通过编写settings.title来访问标题，我不确定如何访问closeButton中的属性。

非常感谢任何帮助，谢谢！

编辑

当我在上面的第一个代码块中传递一些属性时，我可以访问属性，但是在第二个代码块中设置一些默认值，然后使用传入的“选项”对象应该提供一些属性 - 如果我不'不传递任何属性并依赖默认值，closeButton中的属性不起作用，但其他属性起作用，即msg

编辑 2 这是一个 JS 小提琴，显示我的意思 - http://jsfiddle.net/U5W5G/1/

4

1 回答 1

4

只需使用settings.closeButton.text

可以使用以下两种方法之一访问 JavaScript 属性：

  • 点符号

    访问属性的最常见和基本的方法 - 但是非法变量名（保留字除外 - 它们在 ES5 下被允许作为属性名）将不起作用。

    foo.bar; // OK
foo.class; // only in ES5 and up
foo.&^&%^&@&(@&&@; // SyntaxError: yeah, it doesn't work

  • 方括号符号

    使用方括号表示法时，它可以接受任何内容 - 但是它将被转换为字符串（JavaScript 中的所有对象属性都是字符串）：

    // both are the same
foo['bar'];
foo["bar"];

// this is fine
foo['&^&%^&@&(@&&@'];

// this is equivalent to foo["[object Object]"]
foo[{}];

选择你喜欢的 - 但除非你需要，否则使用点符号来访问 JavaScript 对象属性很可能更容易。

编辑：关于你的 jsFiddle，这就是它不起作用的原因：

var options = {
    // Passing these options in
    msg: 'This is my message',
    closeButton: {
        text: "Close this",
        colour: "red"
    }
},
    // These are the defaults if none are passed in
    settings = $.extend({
    title: 'Default Title',
    msg: 'Default message',
    closeButton: {
        text: "Close",
        colour: "red",
        btnClass: "pull-right"
    }
}, options);
console.log(settings.closeButton.text);
console.log(settings.closeButton.colour);
console.log(settings.closeButton.btnClass);
/*
    settings.closeButton.text
    settings.closeButton.colour
    settings.closeButton.btnClass
*/

当您调用$.extend()时，后面参数中的任何属性都将替换早期参数中的属性。在这种情况下，closeButton您调用中的属性将$.extend()被替换为 in options，因为参数是稍后给出的。

这是一个实际的例子：

var a = { foo: 'bar' };
var b = { foo: 'baz' };
var c = $.extend(a, b);
var d = $.extend(b, a);

console.log(c.foo); // baz (b was last argument)
console.log(d.foo); // bar (a was given last)

要解决这个问题，要么交换参数，要么（在这种情况下可以接受）执行深层复制，方法是在参数前面加上true：

$.extend({ a: { b: 1, c: 2 } }, { a: { b: 3 } }).a; // { b: 3 }
$.extend(true, { a: { b: 1, c: 2 } }, { a: { b: 3 } }).a; // { b: 3, c: 2 }
于 2013-09-05T12:34:47.333 回答