Javascript/Jquery 对象文字版本，根据变量请求执行函数

Question

我有这个代码:

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;
         },
};

我可以请求变量City，并通过autoload函数自动执行它吗？

这就是我想要实现的目标:

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

Answer 1

如果您只想执行 ST.city.click() 而不担心任何内容是否与选择器匹配，请坚持使用 jQuery 集，而不是尝试直接使用 DOM 元素。

如果您可以依赖 Object.defineProperty(目前支持是合理的，但在 IE8 中对于普通对象来说是不支持的)，您可以这样做:

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

由于属性的 getter 返回 jQuery 集，因此即使它们为空，您也可以愉快地调用它们的 click :

ST.city.click();

上面的内容可以更简短，为了清晰起见，我将其保留为冗长。这是简短的版本:

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

但是如果您需要支持旧版浏览器，则需要函数调用。您可以将 ST 本身设置为函数:

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'
};

用法:

ST('city').click();

或者在ST函数上创建一个属性:

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

用法:

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