理解晦澀的JavaScript代碼

我在HTML頁面的<head>部分找到此代碼（collegue使這個，但他不在這裏工作了）：理解晦澀的JavaScript代碼

(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);

？

來源

2012-04-18 Battery

這是一個代碼自動執行保護位。讓我們來分解它：

(function(window, PhotoSwipe){ 
    ... 
}(window, window.Code.PhotoSwipe));

圓括號導致我們的代碼自行執行，沒有任何其他的調用它。

這創建了window和window.Code.PhotoSwipe的引用，這些引用不能被外部代碼篡改。因此，在我們的父母身份中，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的頂部向內移動。 Bubbling時，它們從DOM的內部向外移動。使用false表示您想要在其bubbling短語中處理此操作。

在myFunct，這就是所謂的隨時DOMContentLoaded事件發生在document，我們有一行代碼它首先聲明瞭一個名爲options新對象。此對象爲空，沒有成員。

其次，您傳遞了PhotoSwipe對象的attach方法的兩個參數。第一種方法是選擇器。它在DOM中搜索與#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內部在此處未知，因爲這裏沒有提供該代碼。

來源

2012-04-18 15:06:15 Sampson

它移動本地範圍中的這些變量以加快查找速度。它也使window.Code.PhotoSwipe可用PhotoSwipe。

然而，通常人們不因爲有保證時在全球範圍內執行是全局對象（其是window）在瀏覽器中使用window作爲第一個參數，但this。

來源

2012-04-18 14:56:31 ThiefMaster

我發現這是您可以使用該庫下載示例的確切副本。 – Battery 2012-04-18 14:59:33

第一行是函數聲明。最後一個是自動調用此函數whith參數。這樣，函數就可以在一個步驟中被聲明，調用和運行。

來源

2012-04-18 14:57:52 fmgp

重新格式化：

(function(window, PhotoSwipe){ 
    document.addEventListener('DOMContentLoaded', function(){ 
     var options = {}, 
      instance = PhotoSwipe.attach(window.document.querySelectorAll('#Gallery a'), 
             options); 
     }, false); 
}(window, window.Code.PhotoSwipe));

這就產生了一個函數取兩個參數（窗口和PhotoSwipe），這增加了一個事件監聽器 - 第二（內）函數 - 然後立即調用與所述值窗口外部函數和window.Code.PhotoSwipe作爲參數。

爲什麼這樣做？除非你把代碼放入函數中，否則Javascript在分離範圍方面並不是很好。因此，在示例的主函數中，PhotoSwipe只能引用傳入的第二個參數。

來源

2012-04-18 14:58:54

這是一個自動執行的匿名函數。通常它被用於提供範圍在Javascript變量保持父命名空間更簡潔（在這種情況下，父親命名空間爲全局命名空間。）

http://markdalgleish.com/2011/03/self-executing-anonymous-functions/

來源

2012-04-18 15:01:40

感謝您的鏈接。 – Zaje 2012-04-18 15:10:03

當我超過15歲時，我必須記得給你投票:-) – Battery 2012-04-18 15:10:59

所以這個東西有一個名字（「自動執行匿名函數」）。 – Battery 2012-04-18 15:12:01

理解晦澀的JavaScript代碼

回答

相關問題