理解模糊的JavaScript代码

我在HTML页面的

部分找到了这段代码（一个同事做了这段代码，但他不再在这里工作）：

虽然我可以理解中心部分（来自document.addEventListener），但我不能理解第一行和最后一行。他们在这里干什么？代码来自一个名为Photosweep的开源图像库。任何一个指针都很感激

[编辑]

此代码是否与以下代码相同：

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

---

？

它在本地范围内移动这些变量，以加快查找速度。它还使

window.code.photosweep

可用作

photosweep

---

但是，通常不使用

窗口

作为第一个参数，而是使用

此

，因为在全局范围内执行时，它保证是浏览器中的全局对象（即

窗口

）。

第一行是函数声明。 最后一个是使用参数自动调用此函数。这样，函数就可以在一个步骤中声明、调用和运行。

重新格式化：

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

这将创建一个包含两个参数（window和Photosweep）的函数，该函数添加一个事件侦听器（第二个（内部）函数），然后立即调用外部函数，并将值window和window.Code.Photosweep作为参数

---

为什么要这样做？Javascript不擅长分离作用域，除非将代码放入函数中。因此，在示例的main函数中，photosweep只能引用传入的第二个参数

这是一个自动执行的匿名函数。通常，它用于为Javascript中的变量提供作用域，以减少父命名空间的混乱（在本例中，父命名空间是全局命名空间）

---

这是一个自动执行的受保护代码位。让我们把它分解一下：

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

括号使我们的代码自行执行，而没有任何其他调用它的东西

这将创建对

window

和

window.code.photoswip

的引用，外部代码无法对这些引用进行篡改。因此，在我们的范围内，

photosweep

是

window.code.photosweep

的受保护别名。和

窗口

，虽然名称没有区别，但也是对外部全局

窗口

对象的受保护引用

下一行，

addEventListener

行可以重写，以将其匿名函数作为命名函数显示：

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

注意，这在功能上与原始代码中的功能相同，只是我们从

addEventListener

调用中提取了该函数并为其命名

addEventListener

将回调函数附加到特定事件的处理程序。在本例中，我们正在处理事件

DOMContentLoaded

。正在

文档

对象上侦听此事件。任何时候听到此事件，我们都会通过调用

myFunc

进行响应

最后一个参数，

false

，处理捕获和冒泡。这是事件在整个DOM中传播的两种方法。捕获时，事件从DOM顶部向内移动。冒泡时，它们从DOM内部向外移动。使用

false

表示您希望在其

冒泡

短语中处理此问题

在

myFunct

中，只要

文档上发生
DOMContentLoaded
事件，就会调用
myFunct
，我们有一行代码首先声明一个名为
options
的新对象。此对象为空，没有成员

其次，将两个参数传递给
photoswip
对象的
attach
方法。第一种方法是选择器。它在DOM中搜索与
#Gallery a
匹配的元素，即ID为“Gallery”的元素中的任何锚元素。这将意味着以下所有方面：

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



或



这与我们创建的空对象相关联。现在还不知道
photoswip
在内部做了什么，因为这里没有显示该代码。
我发现这是一个可以随库下载的示例的精确副本。因此这个东西有一个名称（“自动执行匿名函数”）。
<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>