3

我在 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);

?

4

5 回答 5

3

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

(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调用的内部，我们有一行代码首先声明了一个名为 的新对象。这个对象是空的，没有成员。DOMContentLoadeddocumentoptions

其次，您将两个参数传递给对象的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是未知的，因为这里没有提供该代码。

于 2012-04-18T15:06:15.740 回答
2

它将这些变量移动到本地范围内以加快查找速度。它还window.Code.PhotoSwipe可以作为PhotoSwipe.

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

于 2012-04-18T14:56:31.610 回答
2

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

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

于 2012-04-18T15:01:40.987 回答
0

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

于 2012-04-18T14:57:52.263 回答
0

重新格式化：

(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 和 window.Code.PhotoSwipe 作为参数调用外部函数。

为什么要这样做？除非您将代码放在函数中，否则 Javascript 不擅长分离范围。所以在示例的主函数内部，PhotoSwipe 只能引用传入的第二个参数。

于 2012-04-18T14:58:54.160 回答