Question

我在HTML页面的<head>部分找到了这段代码（一位同事做了这个，但他不再在这里工作了）：

(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的开源图像库。任何指针都很受欢迎。

[编辑]

此代码是否与：

相同

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

Answer 1

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

(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中传播的两种方法事件。捕获时，事件从DOM的顶部向内移动。冒泡时，它们会从DOM内部向外移动。使用false个状态，您希望在其bubbling短语中处理此问题。

在myFunct内，DOMContentLoaded事件发生在document时随时调用，我们有一行代码首先声明一个名为options的新对象。此对象为空，没有成员。

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

<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内部的内容未知，因为此处未显示该代码。

Answer 2

它会在局部范围内移动这些变量，以便更快地进行查找。它还使window.Code.PhotoSwipe可用PhotoSwipe。

但是，通常不会使用window作为第一个参数，而是使用this，因为在浏览器中执行时，它保证是浏览器中的全局对象（window）。全球范围。

Answer 3

这是一个自动执行的匿名函数。通常它用于为Javascript中的变量提供范围，以保持父命名空间不那么混乱（在这种情况下，父命名空间是全局命名空间。）

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

Answer 4

第一行是函数声明。最后一个是对该函数的自动调用。这样，函数被声明，调用并在一步中自行运行。

Answer 5

重新格式化：

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

这创建了一个带有两个参数的函数（window和PhotoSwipe），它添加了一个事件监听器 - 第二个（内部）函数 - 然后立即使用值窗口和window.Code.PhotoSwipe作为参数调用外部函数。 / p>

为什么这样？除非将代码放在函数中，否则Javascript在分隔范围方面并不是很好。因此，在示例中的main函数内，PhotoSwipe只能引用传入的第二个参数。

了解晦涩的JavaScript代码

5 个答案: