Как объявить свойства объекта, которые являются методами для получения элементов 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();

Это всего лишь идеи.Возможно, вы также захотите учесть, что это кэширование может быть уже выполнено браузером, и это может быть преждевременной оптимизацией.Я бы посчитал подобные вещи только проблемой, если вы видите замедление.

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

, потому что серверу и клиентам будет меньше работать, а вы сэкономите ресурсы.