0

Let's say I have a web form that collects a company name and its address information from a user. In a related javascript file, to reduce the jQuery selectors scattered throughout the functions and to collect related information in a single object structure, I might store all that in one object like in this simple example:

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")
    }
};

I only need to list these selectors once, and then whenever I need to reference the company name that the user entered, I can use this:

companyForm.name.inputField.val()

Or, if I want to check the validity of the user's input:

companyForm.name.isValid()

Etc. (The labelField would be, say, a label element that I might want to add a class named "error" to, should the user enter badly formatted input and I want to emphasize to them that it needs their attention).

My dilemma is, by applying the DRY principle to my jQuery selectors, I'm now hurting readability, since:

$("#CompanyName").val()

is a lot easier to read and understand than:

companyForm.name.inputField.val()

Should I not be trying to reduce redundancy in this manner? Is there a better way I can manage or minimize the selector references?

4

1 に答える 1

2

ゲッター関数とセッター関数を実装するのはどうですか? 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();
   }
};
于 2012-09-26T16:18:56.093 に答える