了解晦涩的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屋!