假设我有一个 Web 表单,它从用户那里收集公司名称及其地址信息。在相关的 javascript 文件中,为了减少散布在函数中的 jQuery 选择器并在单个对象结构中收集相关信息,我可能会将所有这些信息存储在一个对象中,如下面的简单示例所示:
var companyForm = {
name: {
inputField: $("#CompanyName"),
isValid: function() {
return IsNameValid(this.inputField.val());
},
labelField: $("#CompanyNameLabel")
},
address: {
inputField: $("#Address"),
isValid: function() {
return IsAddressValid(this.inputField.val());
},
labelField: $("#AddressLabel")
},
city: {
inputField: $("#City"),
isValid: function() {
return IsCityValid(this.inputField.val());
},
labelField: $("#CityLabel")
}
};
我只需要列出这些选择器一次,然后每当我需要引用用户输入的公司名称时,我就可以使用它:
companyForm.name.inputField.val()
或者,如果我想检查用户输入的有效性:
companyForm.name.isValid()
等等(比如,labelField 是一个标签元素,如果用户输入格式错误的输入,我可能想要添加一个名为“error”的类,并且我想向他们强调它需要他们注意)。
我的困境是,通过将 DRY 原则应用于我的 jQuery 选择器,我现在损害了可读性,因为:
$("#CompanyName").val()
比以下内容更容易阅读和理解:
companyForm.name.inputField.val()
我不应该尝试以这种方式减少冗余吗?有没有更好的方法可以管理或最小化选择器引用?