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

Question

假设我有一个从用户那里收集公司名称及其地址信息的网络表单。在相关的 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();
   }
};