我正在创建一个jQuery插件,我称之为以下
$('#element').helpify({
msg : 'This is my message',
closeButton: {
text: "Close this",
colour: "red"
}
});
然后在插件中我设置了一些默认值并使用extend来创建一个带有如下参数的对象:
var settings = $.extend({
title: 'Default Title',
msg : 'Default message',
closeButton: {
text: "Close",
colour: "red",
btnClass: "pull-right"
}
}, options);
我知道我可以通过编写 settings.title 来访问标题,我不确定如何访问 closeButton 中的属性。
非常感谢任何帮助,谢谢!
修改
当我在上面的第一个代码块中传递一些内容时,我可以访问属性,但是在第二个代码块中设置一些默认值然后使用传入的'options'对象应该提供一些属性 - 如果我没有传递任何属性并依赖默认值,那么 closeButton 中的属性不起作用,但其他属性不起作用,即 msg
编辑2 这是一个JS小提琴,显示我的意思 - http://jsfiddle.net/U5W5G/1/
答案 0 :(得分: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()
属性将被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 }