jQuery selectors in an object - reduce redundancy versus readability

Question

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?

score 2 · Accepted Answer · answered Sep 26 '12 at 16:18

2

How about implementing getter and setter functions? that way you'd only call companyForm.getName() to get the value of companyForm.name.inputField.val()

Let's say:

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

answered Sep 26 '12 at 16:18

Zathrus Writer

4,311
5
27
50

So simple a solution that I completely overlooked it! And should I need access to the other various jQuery properties and functions linked to the underlying HTML input element, I can still reference them using the longer syntax. Thanks! – Derek Sep 26 '12 at 21:34

jQuery selectors in an object - reduce redundancy versus readability

1 Answers1