Что вы называете подходом, используемым в этом коде JavaScript?

Question

На моем текущем месте работы у нас есть определенный способ работы с JavaScript, и мне было интересно, может ли кто-нибудь помочь пролить свет на приведенный ниже подход к хранению переменных и кэшированных объектов jQuery.

(function($) {

    var APP = {};

    $(function() {

        APP.header = $("#header");
        APP.footer = $("#footer");

    });

})(jQuery);

Во-первыхКакой смысл устанавливать глобальную переменную и затем добавлять к ней объекты jQuery?Делает ли это вещи чище, заставляет ли ваше приложение работать быстрее или это более простой способ установки переменных без необходимости:

var header = $("#header");
var footer = $("#footer");

Я понимаю все, что происходит, но всегда задавался вопросом, почему это былообщее место во всех файлах JS нашего проекта?Я предполагаю, что здесь есть название для того, что происходит, и я хотел бы понять это немного лучше, особенно если есть предостережения, которые я должен сообщить своему менеджеру об этом.

Answer 1

Названия этих конструкций closure и namespace.Закрытие - это функция, которая поддерживает ссылки на переменные вне своей области.

Обратите внимание, что теперь вы можете получить доступ к переменной APP, и она будет корректно обновлена:

(function($) {
    var APP = {};

    $(function() {
        APP.header = $("#header");
        APP.footer = $("#footer");
    });

    // "APP.header" and "APP.footer" are defined later in the code
})(jQuery);

Есливы использовали локальные переменные, вы не могли получить его эффект:

(function($) {
    $(function() {
        var header = $("#header");
        var footer = $("#footer");
    });

    // "header" and "footer" are long gone local variables
})(jQuery);

Обратите внимание, что вы можете использовать глобальные переменные (технически свойства window) здесь:

(function($) {
    $(function() {
        header = $("#header");
        footer = $("#footer");
    });

    // "header" and "footer" are accessible global variables
})(jQuery);

Но это плохая практика по ряду причин (в частности, возможные коллизии и неожиданно определенные переменные).Итак, вы настроили так называемое пространство имен - переменную типа APP для хранения ваших данных, которые должны быть «глобальными».

Что касается конкретной полезности этого замыкания в вашем случае, обратите внимание, чтоон окружен $().Это способ jQuery сказать «запустите эту функцию, когда DOM завершит загрузку».DOM необходимо завершить загрузку, прежде чем пытаться получить доступ к $('#header') и $('#footer'), чтобы убедиться, что эти элементы действительно существуют в DOM.Но так как это обратный вызов, он будет выполнен позже , поэтому необходимо закрытие для сохранения ссылки на APP, когда он в конце концов будет вызван.

Answer 2

APP - это пространство имен, которое ваша компания использует для согласованной нотации всего приложения, не загромождая глобальное пространство имен.

Также использование переменных для хранения доступа к Dom-Elements происходит быстрее, чем доступ к ним каждый раз, когда это необходимо через jQuery Construct $("...")

Answer 3

Это называется пространством имен.

Это сделано для того, чтобы вы могли поддерживать DOM в чистоте, чтобы другие плагины / скрипты не мешали.Если бы вы создали глобальную переменную с именем header или footer, другой плагин мог бы захотеть использовать эту глобальную переменную, и таким образом нарушить ваш код.

Answer 4

Кроме моего комментария, некоторые "предостережения" для "Global Vars"

• Локальные переменные освобождаются из памяти, в то время как глобальные переменные остаются с временем жизни открытого приложения
• Есликод находится внутри функции или в другой области видимости и ссылается на эту переменную, движок должен замедляться, чтобы отступить, пока не достигнет вашей глобальной области видимости, что вызывает «лаг»
• Малоизвестный фактоид, глобальная область видимости используется совместно соконный объект !!!Это означает, что для их поиска двигателю требуется еще БОЛЬШЕ, таким образом, еще одна отрицательная точка замедления