代码之家 › 专栏 › 技术社区 › barciewicz

如何声明作为获取HTML元素的方法的对象属性?

javascript-objects javascript

2

barciewicz · 技术社区 · 7 年前

正在声明一个类似 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")
};

2 回复 | 直到 7 年前

1

Hedzer 7 年前

我知道这不太吸引人,但一点备忘录可以走很长的路。您可以执行以下操作:

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 将从页面返回元素并缓存它,或者如果它在缓存中找到它,则返回缓存的版本。

一些问题

如果要更改页面内容而不重新加载页面,则需要一种使缓存过期的机制,否则会得到过时(错误)的元素。在温泉浴场尤其如此。

可能的解决办法

理想情况下,使用新的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();

2

0

Bharata colxi 7 年前

是的,你可以这样做!此代码是绝对正确的代码。但我个人会将您的代码缩短如下:

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