的Javascript：在函數調用

Question

我經歷了幾次這種現象在JavaScript中，當整個腳本包在一個函數調用來包裝紙完整的腳本，像這樣：

(function() { 
    // statements... 
})(); 

現實世界的例子，from glow.mozilla.com客戶端代碼： https://github.com/potch/glow/blob/master/media/glow.js

這是什麼編碼風格用於？有和沒有包裝函數樣式之間的區別是什麼以及它應該在什麼時候使用？

Answer 1

這樣做可以確保您定義的變量/函數都不會進入全局範圍。您在頁面中包含的所有腳本共享相同的全局範圍，因此如果您使用兩個具有相同名稱的獨立腳本定義兩個變量，則它們實際上是指相同的變量。

例如，假設你有a.js和b.js，像這樣定義的：

// a.js 
var node = document.getElementById("something"); 

function frob() { 
    node.style.display = "none"; 
} 

// b.js 
var node = document.getElementById("something-else"); 

如果你在你的頁面a.js後包括b.js，那麼當你調用frob這是怎麼回事隱藏「something-else」節點而不是像你期望的那樣「something」節點。

相反，你可以這樣做：

// a.js 
(function() { 
    var node = document.getElementById("something"); 

    window.frob = function() { 
     node.style.display = "none"; 
    } 
})(); 

// b.js 
(function() { 
    var node = document.getElementById("something-else"); 
})(); 

而且裏面b.js的東西，是不會有什麼在a.js.干涉

請注意，實際上我不會將函數直接添加到window，而是我會做類似於您鏈接到的glow.js腳本的內容：表示我的腳本「名稱空間」的單個全局變量。例如，在jQuery中，該單個全局變量是$（或jQuery）。