我需要添加setter到下面的JavaScript模块:
在下面的代码中,我只是将表单数据返回给模块对象。我需要添加setter功能,这样我就可以对用户输入进行最小的检查。
var Mod = (function(){
var module = {};
var element = document.forms.[0];
Object.defineProperty(module, 'Country', {
get: function () {
return element.txtCountry.value;
}
});
Object.defineProperty(module, 'City', {
get: function () {
return element.txtCity.value;
}
});
return module;
})();
然而,我遇到的所有例子,包括MDN上的例子,都显示了一个具有文字值的对象:
像这样:
var module = {
Country: "United States",
get function() {
return this.Country;
},
set function(x) {
this.Country = x + ' ' + somethingElse;
}
};
如何添加setter来返回数据到没有文字对象成员的对象?
最后我像这样调用模块:
var btn = document.getElementById( 'btnDataEntry' );
var result = document.getElementById('result');
btn.addEventListener('click', function(e) {
var t = document.createTextNode(Mod.Country + ',' + Mod.City);
result.appendChild(t);
e.preventDefault();
}, false);
Update (Additional Info):在最简单的形式中,我想在setter
中执行检查,如下所示:
var Mod = (function(){
var module = {};
var element = document.forms.dataEntry;
Object.defineProperty(module, 'Country', {
get: function () {
return Country;
},
set: function(val) {
if( val == 'A') {
val = element.txtCountry.value;
}
}
});
return module;
})();
更新:(解决方案)。
虽然看起来很简单,但它可能会让人感到困惑,因为JavaScript在如何完成特定任务时更加抽象。
问题是,当在Object.defineProperty()
方法中使用setter时,您必须使用点表示法将值传递给对象,并且还使用函数范围内的变量来模拟私有成员。
如果您查看我的先前的代码,您将看到我在getter
中直接传递表单数据,这违背了拥有getter/setter
的整个目的。
这是一个完整的工作代码:基于以下书的阅读和示例: the Principles of Object-Oriented JavaScript: By Nicholas C. Zakas.
代码:
var LocationData = (function(){
var location = {};
//Private member to eliminate global scope
var _country;
Object.defineProperty(location, "Country", {
get: function() {
return this._country;
},
set: function(value) {
if(value === 'A') {
this._country = value;
} else {
this._country = 'X';
}
}
});
return location;
})();
var btn = document.getElementById( 'btnDataEntry' );
var result = document.getElementById('result');
btn.addEventListener('click', function(e) {
var element = document.forms[0];
//Pass the value to the method
LocationData.Country = element.txtCountry.value;
var t = document.createTextNode(LocationData.Country);
result.appendChild(t);
e.preventDefault();
}, false);
在定义getter的defineProperty
调用中定义setter:
Object.defineProperty(module, 'City', {
get: function () {
return element.txtCity.value;
},
set: function (value) {
// do minimal check
element.txtCity.value = value;
}
});