Question

在下面声明像inputs这样的对象是一种好习惯吗？

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

如果没有，我该怎么办？

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

这些只是想法。您可能还想考虑到这种缓存可能已经由浏览器完成了，这可能是过早的优化。如果您发现速度变慢，我只会考虑这种问题。

Answer 2

是的，您可以用这种方式来做！此代码是绝对正确的代码。但是我个人会像下面这样缩短您的代码：

function $(id){return document.getElementById(id)}

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

因为服务器和客户端的工作量更少，您将节省资源。

如何声明对象属性，这些属性是获取HTML元素的方法？

2 个答案:

一些问题

可能的解决方案