В коде JavaScript, из -за различий в поведении между браузерами, мы часто включаем большое количество операторов IF в функции, чтобы проверить характеристики браузера и решать задачи совместимости различных браузеров. Например, наша наиболее распространенная функция для добавления событий в узел DOM:
Кода -копия выглядит следующим образом:
Функция addEvent (тип, элемент, веселье) {
if (element.addeventlistener) {
element.AddeventListener (тип, веселье, false);
}
else if (element.attachevent) {
element.attachevent ('on' + type, развлечение);
}
еще{
element ['on' + type] = веселье;
}
}
Каждый раз, когда вызывается функция addEvent, она должна проверять возможности, поддерживаемые браузером. Во -первых, проверьте, поддерживается ли метод addeventListener. Если он не поддерживается, проверьте, поддерживается ли метод AttactEvent. Если он не поддерживается, используйте метод DOM Level 0 для добавления событий. Этот процесс должен быть выполнен каждый раз, когда вызывается функция addEvent. Фактически, если браузер поддерживает один из методов, он всегда будет его поддержать, и нет необходимости обнаруживать другие ветви. Другими словами, если операторы не должны выполняться каждый раз, а код может работать быстрее.
Решение - это техника, называемая ленивой нагрузкой.
Так называемая ленивая загрузка означает, что если ветвь функции будет выполнена только один раз, а затем, когда функция будет вызвана, она напрямую введет поддерживаемый код ветви. Есть два способа реализации ленивой загрузки. Во -первых, когда функция вызовет в первый раз, сама функция будет обработана квадратично. Функция будет перезаписана как функция, которая соответствует условиям ветви, так что вызов исходной функции больше не должен проходить через выполненную ветвь. Мы можем использовать ленивую загрузку, чтобы перезаписать addevent () следующим образом.
Кода -копия выглядит следующим образом:
Функция addEvent (тип, элемент, веселье) {
if (element.addeventlistener) {
addEvent = function (тип, элемент, веселье) {
element.AddeventListener (тип, веселье, false);
}
}
else if (element.attachevent) {
addEvent = function (тип, элемент, веселье) {
element.attachevent ('on' + type, развлечение);
}
}
еще{
addEvent = function (тип, элемент, веселье) {
element ['on' + type] = веселье;
}
}
return addEvent (тип, элемент, веселье);
}
В этом ленивом загруженном addevent () каждая ветвь оператора IF назначит значение переменной addEvent, эффективно перезаписывая исходную функцию. Последний шаг - вызов новой функции назначения. В следующий раз, когда вы вызовите addevent (), вновь назначенная функция будет вызвана напрямую, так что вам больше не нужно выполнять операторы.
Второй способ реализации ленивой загрузки - указать соответствующую функцию при объявлении функции. Таким образом, производительность не будет потеряна, когда функция будет вызвана в первый раз, и только небольшая производительность будет потеряна при загрузке кода. Вот addevent (), переписанный в соответствии с этой идеей.
Кода -копия выглядит следующим образом:
var addEvent = (function () {
if (document.addeventlistener) {
возврат функции (тип, элемент, веселье) {
element.AddeventListener (тип, веселье, false);
}
}
else if (document.attachevent) {
возврат функции (тип, элемент, веселье) {
element.attachevent ('on' + type, развлечение);
}
}
еще {
возврат функции (тип, элемент, веселье) {
element ['on' + type] = веселье;
}
}
}) ();
Уловка, используемая в этом примере, состоит в том, чтобы создать анонимную функцию самостоятельного выполнения и использование разных ветвей, чтобы определить, какая функция должна быть реализована. Фактическая логика такая же. Разница в том, что используется экспрессия функции (функция определяется VAR) и добавляется анонимная функция. Кроме того, каждая ветвь возвращает правильную функцию и немедленно присваивает ее переменной AddEvent.
Преимущество ленивых функций загрузки состоит в том, что если филиалы выполняются только один раз, избегая выполнения функции, если филиалы и ненужный код каждый раз, когда она выполняется, что повышает производительность кода. Что касается того, какой метод более подходит, это зависит от ваших потребностей.