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

ion 发表于 Dev

离子

我有以下代码：

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并通过自动加载功能自动执行该变量吗？

这是我要实现的目标：

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

TJ人群

如果您只想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]);
    }
};

用法：