Статьи

Закрытие и выполнение JavaScript при загрузке страницы

В моем другом блоге я только что опубликовал новую технику выполнения фрагмента 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 несколько раз с разными аргументами, и она создаст цепочку функций, гарантируя, что все выполнится при загрузке страницы независимо от того, сколько обратных вызовов вы добавили.

Замыкания - очень мощная языковая функция, но к ней можно привыкнуть. Эта статья в Википедии предоставляет более всестороннее освещение.