这是一段自动执行的受保护代码。让我们来分解一下：
(function(window, PhotoSwipe){
...
}(window, window.Code.PhotoSwipe));
括号使我们的代码自行执行，没有任何其他东西调用它。
这将创建对window and window.Code.PhotoSwipe不能被外部代码篡改。所以在我们的父母中，PhotoSwipe是受保护的别名window.Code.PhotoSwipe. And window，虽然名称没有不同，但也是对外部全局的受保护引用window object.
下一行，addEventListener行，可以重写以将其匿名函数作为命名函数：
function myFunc() {
var options = {},
instance = PhotoSwipe.attach( window.document.querySelectorAll('#Gallery a'), options );
}
document.addEventListener('DOMContentLoaded', myFunc, false);
请注意，这在功能上与原始代码中的功能相同，只是我们将该功能从addEventListener打电话并给它起了个名字。
addEventListener附加回调函数来处理某些事件。在本例中，我们正在处理该事件DOMContentLoaded。正在监听此事件document目的。任何时候此活动heard，我们通过调用来响应myFunc.
最后一个参数，false，处理捕获和冒泡。这是事件在 DOM 中传播的两种方法。捕获时，事件从 DOM 顶部向内移动。当冒泡时，它们从 DOM 内部向外移动。使用false说明你想在其处理这个bubbling phrase.
Within myFunct，任何时候都会调用DOMContentLoaded事件发生在document，我们有一行代码，它首先声明一个名为options。该对象是空的，没有成员。
其次，您将两个参数传递给attach的方法PhotoSwipe目的。第一个方法是选择器。它在 DOM 中搜索匹配的元素是什么？#Gallery a，表示 ID 为“Gallery”的元素内的任何锚元素。这意味着以下所有内容：
<div id="Gallery"><a href="#">Foo</a></div>
Or
<div id="Gallery">
<div class="picture">
<a href="#">Open</a>
</div>
<div class="picture">
<a href="#">Open</a>
</div>
</div>
这与我们创建的空对象相关联。什么PhotoSwipe目前内部情况尚不清楚，因为此处未提供该代码。
