Javascript / Jquery Object Literal版本，对变量请求执行功能

Question

I have this code:

var ST = {
         city: 'a#cityId:eq(2)',
         state: 'div.location:eq(1)',
         zip: 'p#zipcodes:eq(3)',
         people: 'div.population :input',
         autoload: function(selector) {
                 var elem = $(selector).get(0);
                 if (!elem || elem == 'undefined' || elem.length == '0') {
                         return false;
                 }
                 return elem;
         },
};

Can I request the variable City for example, and have it automatically executed through autoload function?

This is what I'm trying to achieve:

ST.city ? ST.city.click() : '';

Answer 1

If you want to just do ST.city.click() without worrying about whether anything matches the selector, stick with using a jQuery set rather than trying to use the DOM element directly.

If you can rely on having Object.defineProperty (support is currently reasonable , but it's not in IE8 for normal objects for instance), you can do this:

var ST = {};
Object.defineProperties(ST, {
    "city": {
        get: function() {
            return $('a#cityId:eq(2)'); // (But see Mottie's note about this selector)
        }
    },
    "state": {
        get: function() {
            return $('div.location:eq(1)');
        }
    },
    // ...and so on
});

Since the getters for the properties return jQuery sets, you can happily call click on them even if they're empty:

ST.city.click();

The above can be make briefer, I left it verbose for clarity. Here's the short version:

var ST = {
    city: 'a#cityId:eq(2)',
    state: 'div.location:eq(1)',
    zip: 'p#zipcodes:eq(3)',
    people: 'div.population :input'
};
$.each(ST, function(key, value) {
    Object.defineProperty(ST, key, {
        get: function() {
            return $(value);
        }
    });
});

But if you need to support older browsers, you'll need a function call. You could make ST itself the function:

var ST = function(selector) {
    return $(ST.selectors[selector]);
};
ST.selectors = {
    city: 'a#cityId:eq(2)',
    state: 'div.location:eq(1)',
    zip: 'p#zipcodes:eq(3)',
    people: 'div.population :input'
};

Usage:

ST('city').click();

Or make a property on ST the function:

var ST = {
    city: 'a#cityId:eq(2)',
    state: 'div.location:eq(1)',
    zip: 'p#zipcodes:eq(3)',
    people: 'div.population :input',
    autoload: function(selector) {
        return $(this[selector]);
    }
};

Usage:

ST.autoload('city').click();

Answer 2

ST.autoload(ST.city) ? $(ST.city).click() : "";