个人中心
文章发布
退出
作者热门文章
- iOS/Objective-C 元类和类别
- objective-c - -1001 错误，当 NSURLSession 通过 httpproxy 和/etc/hosts
- java - 使用网络类获取 url 地址
- ios - 推送通知中不播放声音
25
4
我在 <head> 中找到了这段代码HTML 页面的一部分(一个同事做了这个，但他不再在这里工作了):
(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);
?
最佳答案
这是一段自执行的 protected 代码。让我们分解一下:
(function(window, PhotoSwipe){
...
}(window, window.Code.PhotoSwipe));
括号使我们的代码自行执行，而无需其他任何东西调用它。
这会创建对 window 和 window.Code.PhotoSwipe 的引用，这些引用不能被外部代码篡改。所以在我们的括号内，PhotoSwipe 是 window.Code.PhotoSwipe 的 protected 别名。而 window，虽然名称没有区别，但也是对外部全局 window 对象的 protected 引用。
下一行，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 表示您想在其 冒泡 短语中处理它。
在 myFunct 中，每当 document 上发生 DOMContentLoaded 事件时调用，我们有一行代码首先声明一个新的名为 options 的对象。这个对象是空的，没有成员。
其次，您将两个参数传递给 PhotoSwipe 对象的 attach 方法。第一种方法是选择器。它在 DOM 中搜索匹配 #Gallery a 的元素的作用是什么，这意味着 ID 为“Gallery”的元素内的任何 anchor 元素。这将意味着以下所有内容:
<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 的内部功能目前尚不清楚，因为此处未提供该代码。
关于javascript - 理解晦涩的 JavaScript 代码，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/10212087/
25
4
0
我是一名优秀的程序员,十分优秀！