javascript - 如何声明对象的属性，即获取 HTML 元素的方法？

Question

像下面的 inputs 这样声明一个对象是一种好的做法吗？

我担心每次调用对象的属性时都必须搜索 DOM，例如 inputs.voucher。

如果没有，我该怎么做？

var inputs = {
     bu: document.getElementById("InputKeys_BUSINESS_UNIT"),
     voucher: document.getElementById("InputKeys_VOUCHER"),
     invoice: document.getElementById("InputKeys_INVOICE_ID"),
     vendor_id: document.getElementById("InputKeys_VENDOR_ID"),
     requester: document.getElementById("InputKeys_BUSINESS_UNIT"),
     vendor_name: document.getElementById("InputKeys_BUSINESS_UNIT")
};

Answer 1

我知道它看起来不太吸引人，但一点点内存可以大有帮助。您可以执行以下操作:

var getById = (function() {
    var cache = {};
    return function getById(id) {
        if (cache[id]) { return cache[id]; }
        
        var el = document.getElementById(id);
        cache[id] = el;
        return el;
    }
})();

var inputs = {
    bu: getById("InputKeys_BUSINESS_UNIT"),
    voucher: getById("InputKeys_VOUCHER"),
    invoice: getById("InputKeys_INVOICE_ID"),
    vendor_id: getById("InputKeys_VENDOR_ID"),
    requester: getById("InputKeys_BUSINESS_UNIT"),
    vendor_name: getById("InputKeys_BUSINESS_UNIT"),
};

getById 方法将从页面返回元素并缓存它，或者如果它在缓存中找到它，则返回缓存的版本。

一些问题

如果您要更改页面内容而不是重新加载页面，则需要一种使缓存过期的机制，否则您将获得陈旧(错误)的元素。在 SPA 中尤其如此。

可能的解决方案

理想情况下，使用新的 ES 模块会更加优雅，但如果您想将它们放在一起，可以采取以下方向:

var getById = (function() {
    var cache = {};
    var api = {
        clear: function clear() { cache = {}; }
    };

    return function getById(id) {
        if (!arguments.length) { return api; }

        if (cache[id]) { return cache[id]; }
        
        var el = document.getElementById(id);
        cache[id] = el;
        return el;
    }
})();

// to clear you would do
getById().clear();

这些只是想法。您可能还需要考虑这种缓存可能已经由浏览器完成，这可能是一个过早的优化。如果您看到经济放缓，我会认为这种事情只是一个问题。