了解晦涩的JavaScript代码 [英] Understanding obscure JavaScript code
问题描述
我在HTML页面的< head> 部分找到了此代码（一位同事做了这个，但他不再在这里工作了）：
（函数（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）;
？
这是一个自执行的受保护的代码位。让我们分解一下：
（函数（window，PhotoSwipe）{
...
}（ window，window.Code.PhotoSwipe））;
括号会导致我们的代码自行执行，而不会调用任何其他代码。
这会创建对窗口和 window.Code.PhotoSwipe 的引用不能被外部代码篡改。所以在我们的内容中， PhotoSwipe 是 window.Code.PhotoSwipe 的受保护别名。而窗口虽然名称没有区别，但也是对外部全局窗口对象的受保护引用。 / p>
可以重写下一行 addEventListener 行，将其匿名函数作为命名函数：
function myFunc（）{
var options = {}，
instance = PhotoSwipe.attach（window。 document.querySelectorAll（'＃Gallery a'），options）;
}
document.addEventListener（'DOMContentLoaded'，myFunc，false）;
注意，这在功能上与原始代码中的相同，只是我们已拉出函数out addEventListener 调用并为其命名。
addEventListener 附加一个回调函数来处理某些事件。在这种情况下，我们正在处理事件 DOMContentLoaded 。正在文档对象上侦听此事件。无论何时听到此事件，我们都会通过调用 myFunc 来回复。
最后一个参数， false ，处理捕获和冒泡。这是在整个DOM中传播的两种方法事件。捕获时，事件从DOM的顶部向内移动。冒泡时，它们会从DOM内部向外移动。使用 false 表示您希望在其冒泡短语中处理此问题。
在 myFunct 中，只要在文档上发生，我们有一行代码首先声明一个名为 DOMContentLoaded 事件，就会调用该文件 options 的新对象。此对象为空，没有成员。
其次，您将两个参数传递给 attach 方法 PhotoSwipe 对象。第一种方法是选择器。它在DOM中搜索与 #Gallery a 匹配的元素，这意味着具有IDGallery的元素内的任何锚元素。这意味着以下所有内容：
< div id =Gallery>< a href =＃ >富< / A>< / DIV>
或
< div id =Gallery>
< div class =picture>
< a href =＃>打开< / a>
< / div>
< div class =picture>
< a href =＃>打开< / a>
< / div>
< / div>
这与我们创建的空对象相关联。什么 PhotoSwipe 此时内部未知，因为此处未显示该代码。
I found this code in the <head> section of an HTML page (a collegue made this but he doesn't work here anymore):
(function(window, PhotoSwipe){
document.addEventListener('DOMContentLoaded', function(){
var options = {},
instance = PhotoSwipe.attach( window.document.querySelectorAll('#Gallery a'), options );
}, false);
}(window, window.Code.PhotoSwipe));
While I can understand the central part (from document.addEventListener), I can't understand the first and the last line. What they're doing here? The code is from an open source image gallery called PhotoSwipe. Any pointer is appreciated.
[EDIT]
Is this code the same as:
document.addEventListener('DOMContentLoaded', function(){
var options = {},
instance = window.Code.PhotoSwipe.attach( window.document.querySelectorAll('#Gallery a'), options );
}, false);
?
This is a self-executing protected bit of code. Let's break it down:
(function(window, PhotoSwipe){
...
}(window, window.Code.PhotoSwipe));
The parenthesis cause our code to be executed on its own, without anything else invoking it.
This creates references to window and window.Code.PhotoSwipe that cannot be tampered with by outside code. So within our parens, PhotoSwipe is a protected alias of window.Code.PhotoSwipe. And window, though the name doesn't differ, is also a protected reference to the external global window object.
The next line, the addEventListener line, could be rewritten to bring its anonymous function out as a named function:
function myFunc() {
var options = {},
instance = PhotoSwipe.attach( window.document.querySelectorAll('#Gallery a'), options );
}
document.addEventListener('DOMContentLoaded', myFunc, false);
Note, this is functionally the same thing you have in your original code, only we've pulled the function out of the addEventListener call and gave it a name.
addEventListener attaches a callback function to handler certain events. In this case, we're handling the event DOMContentLoaded. This event is being listened for on the document object. Anytime this event is heard, we respond by calling myFunc.
The last parameter, false, deals with capturing and bubbling. These are two methods events propagate throughout the DOM. When Capturing, events move from the top of the DOM inward. When Bubbling, they move from the inside of the DOM outward. Using false states you want to handle this in its bubbling phrase.
Within myFunct, which is called anytime the DOMContentLoaded event happens on the document, we have one line of code which first declares a new object called options. This object is empty, having no members.
Secondly, you are passing in two arguments to the attach method of the PhotoSwipe object. The first method is a selector. What is does it searches the DOM for elements that match #Gallery a, meaning any anchor element inside an element having the ID "Gallery". That would mean all of the following:
<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>
This is associated with the empty object that we created. What PhotoSwipe does internally is unknown at this point, since that code is not presented here.
这篇关于了解晦涩的JavaScript代码的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
