Понимание неясного код JavaScript

Я нашел этот код в <head> разделе HTML-странице (а коллега сделал это, но он здесь больше не работает):Понимание неясного код JavaScript

(function(window, PhotoSwipe){ 
    document.addEventListener('DOMContentLoaded', function(){ 
     var options = {}, 
      instance = PhotoSwipe.attach(window.document.querySelectorAll('#Gallery a'), options); 
    }, false); 
}(window, window.Code.PhotoSwipe));

В то время как я могу понять центральную часть (от document.addEventListener), я не могу понять первую и последнюю строку. Что они здесь делают? Код из галереи изображений с открытым исходным кодом называется PhotoSwipe. Любой указатель оценивается.

[EDIT]

Является ли этот код такой же, как:

document.addEventListener('DOMContentLoaded', function(){ 
     var options = {}, 
      instance = window.Code.PhotoSwipe.attach(window.document.querySelectorAll('#Gallery a'), options); 
    }, false);

источник

2012-04-18 Battery

Это прямоприменяемый защищенным битой коды , Давайте разбить его:

(function(window, PhotoSwipe){ 
    ... 
}(window, window.Code.PhotoSwipe));

Скобки вызвать наш код, который будет выполняться самостоятельно, без чего-либо еще ссылающегося на него.

Это создает ссылки на window и window.Code.PhotoSwipe, которые не могут быть изменены внешним кодом. Таким образом, в наших паранах PhotoSwipe является защищенным псевдонимом window.Code.PhotoSwipe. И window, хотя имя не отличается, также является защищенной ссылкой на внешний глобальный объект window.

Следующая линия, addEventListener линия, может быть переписан, чтобы принести свою анонимную функцию, как именованной функции:

function myFunc() { 
    var options = {}, 
     instance = PhotoSwipe.attach(window.document.querySelectorAll('#Gallery a'), options); 
} 
document.addEventListener('DOMContentLoaded', myFunc, false);

Заметим, что это функционально то же самое, у вас есть в исходном коде, только мы 'вытащил функцию из вызова addEventListener и дал ей имя.

addEventListener прикрепляет функцию обратного вызова для обработки определенных событий. В этом случае мы обрабатываем событие DOMContentLoaded. Это событие прослушивается на объекте document. В любое время этого события слышал, мы отвечаем, позвонив по телефону myFunc.

Последний параметр, false, касается захвата и пузырения. Это два метода, которые события распространяются во всей DOM. Когда Capturing, события перемещаются из верхней части DOM внутрь. Когда Bubbling, они перемещаются изнутри DOM наружу. Используя false, вы хотите обработать это в своей фразе bubbling.

В myFunct, который называется каждый раз, когда DOMContentLoaded событие происходит на document, у нас есть одна строка кода, который первым объявляет новый объект под названием options. Этот объект пуст, не имеет членов.

Во-вторых, вы передаете два аргумента методу attach объекта PhotoSwipe. Первый метод - это селектор. Что он ищет в DOM для элементов, которые соответствуют #Gallery a, что означает любой элемент привязки внутри элемента, имеющего идентификатор «Галерея». Это означало бы, все следующий:

<div id="Gallery"><a href="#">Foo</a></div>

Или

<div id="Gallery"> 
    <div class="picture"> 
    <a href="#">Open</a> 
    </div> 
    <div class="picture"> 
    <a href="#">Open</a> 
    </div> 
</div>

Это связанно с пустым объектом, который мы создали. То, что PhotoSwipe делает внутренне, неизвестно на данный момент, так как этот код здесь не представлен.

источник

2012-04-18 15:06:15 Sampson

Он перемещает эти переменные в локальной области, чтобы ускорить поиск. Он также делает window.Code.PhotoSwipe доступным как PhotoSwipe.

Однако, как правило, нельзя было бы использовать window в качестве первого аргумента, но this так, что гарантированно будет глобальный объект (который является window) в браузере при выполнении в глобальном масштабе.

источник

2012-04-18 14:56:31 ThiefMaster

Я нашел, что это точная копия примера, который вы можете скачать с помощью библиотеки. – Battery

Первая строка - это объявление функции. Последним является автоматический вызов этой функции с аргументами. Таким образом, функция объявляется, вызывается и запускается за один шаг.

источник

2012-04-18 14:57:52 fmgp

Переформатирование:

(function(window, PhotoSwipe){ 
    document.addEventListener('DOMContentLoaded', function(){ 
     var options = {}, 
      instance = PhotoSwipe.attach(window.document.querySelectorAll('#Gallery a'), 
             options); 
     }, false); 
}(window, window.Code.PhotoSwipe));

Это создает функцию, принимающую два аргумента (окна и PhotoSwipe), который добавляет слушатель событий - вторая функция (внутренняя) - и затем сразу же вызывает внешнюю функцию с окном значений и window.Code.PhotoSwipe в качестве аргументов.

Зачем это делать? Javascript не очень подходит для разделения областей, если вы не вставляете код внутри функции. Таким образом, внутри основной функции в образце PhotoSwipe может ссылаться только на второй аргумент, переданный в.

источник

2012-04-18 14:58:54

Это автономная анонимная функция. Обычно она используется для обеспечения возможности для переменных в JavaScript, чтобы сохранить родительское пространство имен менее загромождены (в этом случае родительского пространства имен являются глобальным пространством имен.)

http://markdalgleish.com/2011/03/self-executing-anonymous-functions/

источник

2012-04-18 15:01:40

Спасибо за ссылку. – Zaje

Не забудьте проголосовать за вас, когда я получу больше 15 :-) – Battery

Итак, у этой вещи есть имя («self executing anonymous function»). – Battery

Понимание неясного код JavaScript

ответ

Смежные вопросы