Как лучше всего организовать хранение переменных, DOM объектов и event handler'ов внутри модуля JS (IIFE)?

Question

[sonic1995]

Скажем есть кусок такой:

(function(element){

element['content'] = element.querySelector(".tooltip__content");

//возможно даже так...
element['content']['handlers']['click'] = function(e){...};

}(document.querySelector(".tooltip"));

Таким образом, я могу «закэшировать» выборку DOM объектов и придать какую-то структуру...
и ссылаться на обработчики событий, которые будут использоваться с removeEventListener.

Насколько именно этот вариант плох? Каковы альтернативы? Спасибо.

Конечно, я могу хранить все в виде переменных, но, возможно, есть более изящные варианты?

Мое наибольшее опасение в том, что я таким образом могу переписать какое-то встроенное свойство.

каковы best practices? префиксить или постфиксить переменные содержащие ссылку на DOM?

Answer 1

[Anton fon Faust]

Если так уж боитесь что-то глобальное перезаписать, в первую очередь, изучите какие есть глобальные объекты и переменные в браузере (window, document и т.д.), дальше, не плохо было бы вспомнить, что для всех id в dom браузер создает переменные с именами, равными этим id и ссылающихся на эти элементы.
А теперь, внутри вашего модуля называйте переменные как хотите, за рамки модуля это не выйдет: хотите с префиксом, хотите без.
Например так:

myModuleGlobal = {
    DOMElements: [],
    EventListeners: [],
    variables: []
}