Javascript 如何以类似jQuery的方式设置函数的选项
对于许多jQuery函数,您可以将options对象传递给该函数。在内部重写函数的默认选项。我想你可以用下面的方法来做Javascript 如何以类似jQuery的方式设置函数的选项,javascript,jquery,Javascript,Jquery,对于许多jQuery函数,您可以将options对象传递给该函数。在内部重写函数的默认选项。我想你可以用下面的方法来做 function myFunc (userOptions) { userOptions = userOptions || {}; var defaultOptions = { 'myOption': true; }; var options = { 'myOption': userOptions.hasOwnP
function myFunc (userOptions) {
userOptions = userOptions || {};
var defaultOptions = {
'myOption': true;
};
var options = {
'myOption': userOptions.hasOwnProperty('myOption') ? userOptions.myOptions : defaultOptions.myOption;
};
...
if (options.myOption) {
//do stuff
}
}
这确实很乏味,而且似乎很容易出错,尤其是在维护时。所以我的问题是,什么是最简单、最安全的方法呢?明确是个不错的主意,因为它可以保持控制和清晰。但是,您可以这样做:
var actualOptions = defaultOptions;
for(var property in userOptions) {
if(userOptions.hasOwnProperty(property)) {
actualOptions[property] = userOptions[property];
}
}
请注意,我说的是“类似”。实际上上面有一个小缺陷,即它将覆盖defaultOptions对象。我将留给你来避免这种情况发生,循环是这里的核心思想。或者如果您更喜欢ECMAScript 5
var actualOptions = defaultOptions,
keys = Object.keys(userOptions);
for(var i = 0; i < keys.length; i++) {
actualOptions[keys[i]] = userOptions[keys[i]];
}
jquery在内部使用
.extend
()方法用用户属性覆盖默认值
在您的情况下,您必须手动对所有属性执行此操作,而不是简单地通过属性使用循环,并检查每个属性是否存在于用户选项中,然后将其分配给您的内部选项
差不多
var options = {myOpt1:1, myOpt2:2};
var userOptions = {myOpt1:3};
for(var p in options){
if(userOptions.hasOwnProperty(p)){
options[p] = userOptions[p];
}
}
console.log(options);
或者简单地使用jquery extend,它做同样的事情并且安全地做,因为上面的循环不是真正安全的代码。jquery有一个“extend”方法,可以实现您想要的功能:
.
它本质上是为您循环属性
如果您不想使用查询或编写自己的代码,可以使用。按照Ingo Burk的建议编写自己的循环不是一个坏主意。在jQuery中,我通常将此模式视为一种快捷方式,如下所示:
function myFunc(userOptions) {
userOptions = userOptions || {};
var defaultOptions = {
'opt1': true,
'opt2': false
},
// Preserve defaultOptions object, and deep copy userOptions
options = $.extend(true, {}, defaultOptions, userOptions);
// do stuff
}
我希望我的函数像jQuery函数一样接受options对象。我想问的是用用户指定的选项覆盖默认选项以供函数内部使用的最简单、最安全的方法。或者,由于jQuery标记,
var actualOptions=$.extend(defaultOptions,userOptions)
这可能是避免我刚才在编辑中提到的问题的更好方法,是的,我犯了一个小错误。。。第一个参数是扩展的目标,因此在我的示例中,defaultOptions
将是合并对象(与actualOptions
相同)。如果需要保持defaultOptions
不变,则必须使用var-actualOptions=$.extend({},defaultOptions,userOptions)代码>而我只是复制了那个错误。;)我也编辑了我的答案(这次我自己也试过了)。
function myFunc(userOptions) {
userOptions = userOptions || {};
var defaultOptions = {
'opt1': true,
'opt2': false
},
// Preserve defaultOptions object, and deep copy userOptions
options = $.extend(true, {}, defaultOptions, userOptions);
// do stuff
}