了解晦澀的JavaScript代碼
[英]Understanding obscure JavaScript code
問題描述
我在HTML頁面的<head>部分找到了這個代碼（一個同事做了這個，但他不再在這里工作了）：
(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);
？
5 個解決方案
解決方案1
3 已采納 2012-04-18 15:06:15
這是一個自執行的受保護的代碼。 讓我們分解一下：
(function(window, PhotoSwipe){
...
}(window, window.Code.PhotoSwipe));
括號使我們的代碼自己執行，而不調用它。
這將創建對window和window.Code.PhotoSwipe引用，它不能被外部代碼篡改。 因此，在我們的parens中， PhotoSwipe是window.Code.PhotoSwipe的受保護別名。 window雖然名稱沒有區別，但也是對外部全局window對象的受保護引用。
可以重寫下一行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狀態，你想在它的bubbling短語中處理這個。
在myFunct ，任何時候在document上發生DOMContentLoaded事件時調用，我們有一行代碼首先聲明一個名為options的新對象。 此對象為空，沒有成員。
其次，您將兩個參數傳遞給PhotoSwipe對象的attach方法。 第一種方法是選擇器。 它在DOM中搜索與#Gallery a匹配的元素是#Gallery a ，這意味着在具有ID“Gallery”的元素內的任何錨元素。 這意味着以下所有方面：
<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內部的功能尚不清楚，因為此處未顯示該代碼。
解決方案2
2 2012-04-18 14:56:31
它會在本地范圍內移動這些變量，以便更快地進行查找。 它還使window.Code.PhotoSwipe可用作PhotoSwipe 。
然而，通常是一個不會使用window作為第一個參數，但this因為這是保證是全局對象（這是window時，在全球范圍內執行），在瀏覽器中。
解決方案3
2 2012-04-18 15:01:40
這是一個自動執行的匿名函數。 通常它用於為Javascript中的變量提供范圍，以保持父命名空間不那么混亂（在這種情況下，父命名空間是全局命名空間。）
http://markdalgleish.com/2011/03/self-executing-anonymous-functions/
解決方案4
0 2012-04-18 14:57:52
第一行是函數聲明。 最后一個是對該函數的自動調用。 這樣，函數被聲明，調用並在一步中自行運行。
解決方案5
0 2012-04-18 14:58:54
格式化：
(function(window, PhotoSwipe){
document.addEventListener('DOMContentLoaded', function(){
var options = {},
instance = PhotoSwipe.attach( window.document.querySelectorAll('#Gallery a'),
options );
}, false);
}(window, window.Code.PhotoSwipe));
這創建了一個帶有兩個參數的函數（window和PhotoSwipe），它添加了一個事件監聽器 - 第二個（內部）函數 - 然后立即使用值window和window.Code.PhotoSwipe作為參數調用外部函數。
為什么這樣？ 除非將代碼放在函數中，否則Javascript在分隔范圍方面並不是很好。 因此，在示例中的main函數內，PhotoSwipe只能引用傳入的第二個參數。
Windows 8 Apps中的模糊/保護Javascript源代碼
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.