对象中的jQuery选择器-减少冗余与可读性

Question

假设我有一个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()

我不应该尝试以这种方式减少冗余吗？有没有更好的方法可以管理或最小化选择器引用

Answer 1

实现getter和setter函数怎么样？这样你只需要调用companyForm.getName()来获得companyForm.name.inputField.val()的值

比方说：

var companyForm = {
name: {
inputField: $("#CompanyName"),
isValid: function() {
return IsNameValid(this.inputField.val());
},
labelField: $("#CompanyNameLabel")
},
...
getName: function() {
return this.name.inputField.val();
}
};