В моем другом блоге я только что опубликовал новую технику выполнения фрагмента JavaScript, как только страница загрузится. Вот код:
function addLoadEvent(func) {
var oldonload = window.onload;
if (typeof window.onload != 'function') {
window.onload = func;
} else {
window.onload = function() {
oldonload();
func();
}
}
}
addLoadEvent(nameOfSomeFunctionToRunOnPageLoad);
addLoadEvent(function() {
/* more code to run on page load */
});
В моем другом посте приведено краткое изложение того, зачем нужен этот метод, и объяснение того, как он работает, но я хотел бы подробнее остановиться на этом здесь, поговорив о том, как в приведенном выше коде используется функция языка JavaScript, известная как замыкание .
Замыкание состоит из функции вместе с лексическим окружением (набором доступных переменных), в котором оно было определено. Это удивительно мощная концепция, которую часто встречают в функциональных языках программирования, таких как JavaScript. Вот простой пример замыканий в действии:
function createAdder(x) {
return function(y) {
return y + x;
}
}
addThree = createAdder(3);
addFour = createAdder(4);
document.write('10 + 3 is ' + addThree(10) + '
');
document.write('10 + 4 is ' + addFour(10));
createAdder(x)В JavaScript функции являются объектами первого класса: они могут передаваться другим функциям в качестве аргументов и также возвращаться из функций. В этом случае возвращаемая функция сама является функцией, которая принимает аргумент и что-то добавляет к нему.Вот волшебство: функция, возвращаемая createAdder (), является закрытием. Он «запоминает» среду, в которой он был создан. Если вы передадите
createAdderЕсли вы передадите 4, вы получите функцию, которая добавляет 4. Функции addThree и addFour в приведенном выше примере создаются таким образом.Давайте еще раз посмотрим на функцию
addLoadEventВ качестве аргумента она принимает функцию обратного вызова, которую вы хотите выполнить после загрузки страницы. Далее следуют два случая: в первом случаеwindow.onloadwindow.onloadВо втором случае происходит закрытие: в window.onload уже есть что-то назначенное. Эта ранее назначенная функция сначала сохраняется в переменной с именем oldonload. Затем создается новая функция, которая сначала выполняет oldonload, а затем выполняет новую функцию обратного вызова. Эта новая функция назначена дляwindow.onloadБлагодаря магическому свойству замыканий, он «запомнит», какой была начальная функция загрузки. Более того, вы можете вызывать функцию addLoadEvent несколько раз с разными аргументами, и она создаст цепочку функций, гарантируя, что все выполнится при загрузке страницы независимо от того, сколько обратных вызовов вы добавили.Замыкания - очень мощная языковая функция, но к ней можно привыкнуть. Эта статья в Википедии предоставляет более всестороннее освещение.