gpt4 book ai didi

javascript - 理解晦涩的 JavaScript 代码

转载 作者:塔克拉玛干 更新时间:2023-11-02 22:36:28 25 4
gpt4 key购买 nike

我在 <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));

括号使我们的代码自行执行,而无需其他任何东西调用它。

这会创建对 windowwindow.Code.PhotoSwipe 的引用,这些引用不能被外部代码篡改。所以在我们的括号内,PhotoSwipewindow.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
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com