Селекторы jQuery хранятся в виде свойств в пространстве имен

Question

Я работаю над рефакторингом пространства имен JavaScript для сайта. Пространство имен использует jQuery для селекторов и событий. Вот пример.

MyNamespace = {
    eventElements : {
        headerSectionA : $("h1.section-a");
        headerSectionB : $("h1.section-b");
    }
    sectionA : function() {
        // do stuff for section A here, such as
        MyNamespace.eventElements.headerSectionA.click(function(){
            // behavior A
        });
    }
    sectionB : function() { 
        // do stuff for section B here, such as
        MyNamespace.eventElements.headerSectionB.click(function(){
            // behavior B
        });
    }
}

Это пример дистиллированного кода. Представьте себе множество eventElements и множество разделов сайта, которые используют подмножества этих eventElements.

Мой вопрос заключается в том, проходит ли jQuery DOM для всех eventElements каждый раз, когда загружается этот скрипт, или только когда вызывается функция, использующая этот eventElement.

Я хочу избежать потери производительности, но я не уверен, что jQuery пересекает DOM при объявлении свойства eventElement или только когда событие присоединено к eventElement.

Если при использовании подхода, описанного выше, произойдет потеря производительности, я разветвлюсь в пространстве имен, чтобы объявить только eventElements в контексте раздела, в котором используются эти eventElements.

Answer 1

JavaScript выполняется, когда встречаются выражения. Так что да, если это в вашем файле скрипта:

MyNamespace = {
    eventElements : {
        headerSectionA : $("h1.section-a"),
        headerSectionB : $("h1.section-b")
    }
    // ...
}

Затем вызывается $ и DOM проходит во время выполнения сценария. Это плохо на паре уровней:

• размещение скрипта зависит от готовности DOM к прохождению (к сожалению, вся причина, по которой существует $(document).ready, заключается в том, чтобы обойти эту проблему)
• DOM проходит перед тем, как на эти элементы нужно ссылаться

Я бы настроил его так, чтобы он выполнял столько работы, сколько нужно:

MyNamespace = {
    eventElements : {
        headerSectionA : "h1.section-a", // THESE BECOME STRINGS
        headerSectionB : "h1.section-b"
    }
    ,// ...
    sectionA : function() {
        // Call $ as late as possible
        $(MyNamespace.eventElements.headerSectionA).click(function(){
            // ...
        });
    }
}

Теперь, если по какой-либо причине MyNamespace.eventElements.headerSectionA должен быть объектом jQuery до вызова sectionA, то вам следует хотя бы дождаться их инициализации, пока DOM не будет готов, чтобы уменьшить хрупкость самого сценария:

// namespace defined as before
// wait until DOM is ready
$(document).ready(function() {
    for(var selector in MyNamespace.eventElements) {
        MyNamespace.eventElements[selector] = $(MyNamespace.eventElements[selector])
    }
})