理解晦涩的JavaScript代码

我在HTML页面的<head>部分找到此代码（collegue使这个，但他不在这里工作了）：理解晦涩的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的开源图像库。任何指针赞赏。

[编辑]

这段代码一样：

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中传播的两种方法。捕捉时，事件从DOM的顶部向内移动。 Bubbling时，它们从DOM的内部向外移动。使用false表示您想要在其bubbling短语中处理此操作。

在myFunct，这就是所谓的随时DOMContentLoaded事件发生在document，我们有一行代码它首先声明了一个名为options新对象。此对象为空，没有成员。

其次，您传递了PhotoSwipe对象的attach方法的两个参数。第一种方法是选择器。它在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-18 15:06:15 Sampson

它移动本地范围中的这些变量以加快查找速度。它也使window.Code.PhotoSwipe可用PhotoSwipe。

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

来源

2012-04-18 14:56:31 ThiefMaster

我发现这是您可以使用该库下载示例的确切副本。 – Battery 2012-04-18 14:59:33

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

来源

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 2012-04-18 15:10:03

当我超过15岁时，我必须记得给你投票:-) – Battery 2012-04-18 15:10:59

所以这个东西有一个名字（“自动执行匿名函数”）。 – Battery 2012-04-18 15:12:01

理解晦涩的JavaScript代码

回答

相关问题