JavaScript Module Pattern（function（）{}）（）; vs block語句

我之前看到一個問題的答案，它使用了我的"Weird"示例，並且我在想是否對任一方法都有好處。JavaScript Module Pattern（function（）{}）（）; vs block語句

一些HTML：

<span id="them">Hey</span> 
<span id="me">Hey</span>

之間有什麼區別：

(function()//doing this 
{ 
    them.innerHTML = "Weird<br>"; 
})(); 

me.innerHTML = "Not so weird<br>";//and doing this

甚至，爲什麼人們使用window.onload時，他們可以在身體的底部放的腳本？還是僅僅是個人喜好的問題？

來源

2013-05-31 Isaac

你的第一個代碼片段：是Module Pattern或者Immediately Invoked Function Expression(IIFE)
```
(function()//doing this 
{ 
    them.innerHTML = "Weird<br>"; 
})(); 
```
這當由JavaScript編譯器遇到會立即調用函數時遇到();並保持其範圍內的變量和函數。

您必須閱讀Java-script Design Patterns以更好地瞭解其用途和優點。
第二個代碼片段：只是一個JavaScript語句。
```
me.innerHTML = "Not so weird<br>";//and doing this 
```
這個被JavaScript編譯器遇到時會立即執行它。

記住這兩個片段的執行取決於它的放置位置。

所以，要回答你的其他問題。 window.onload是當HTML DOM完全加載並且瀏覽器可以讀取其所有元素時觸發的事件。

來源

2013-05-31 03:52:43 ManKum

由於引用而被接受。更新標題 – Isaac

在你的簡單例子中，兩種情況的結果沒有區別。兩者都完成同樣的事情。

之所以採用這樣的結構：

(function()//doing this 
{ 
    them.innerHTML = "Weird<br>"; 
})();

是創建一個功能範圍，可用於舉辦私人或臨時變量或不暴露內部與外部世界的變量來創建一個封閉。

關於你的第二個問題，window.onload火災在不同的時間比放置在機身的結束，因爲當由頁面所需的所有資源同步完成加載（如腳本和圖像）window.onload火災腳本。可以使用它來在所有這些資源加載完成時得到通知，或者可以在頁面準備就緒時作爲安全時間在身體末端不容易定位的代碼使用它，儘管通常不需要等待那麼長時間只是爲了保證DOM安全。

來源

2013-05-31 03:46:30 jfriend00

在上述情況下，使用第一種方法沒有優勢。

但是，你需要創建一些變量/方法，但不希望影響全局命名空間

來源

2013-05-31 03:47:16

還有就是你的兩個例子之間沒有區別的第一種方法是在方案中優選的。你的第一個例子創建一個立即執行的匿名函數（稱爲立即調用函數表達式）。你的第二個例子只是執行相同的代碼。
您必須等到瀏覽器讀取所有HTML元素後才能使用JavaScript進行更改。當頁面完全加載並且當時瀏覽器知道所有HTML元素時，onload事件觸發。但是，瀏覽器在頁面完全加載之前不會觸發onload事件，這意味着瀏覽器將等待大圖完全加載後 - 即使瀏覽器已經解析了其餘的HTML - 製作您的JavaScript不必要等到圖像加載完成。由於瀏覽器在圖像加載完成之前就知道了所有的HTML，所以沒有理由阻止JavaScript執行。

一旦人們發現，onload等待時間過長讓JavaScript的執行之前，人們開始把自己的JavaScript收盤<body> tag之前（不使用onload），這樣的JavaScript將立即執行所有HTML已被解析（除了關閉<body>標籤），並且這樣他們的JavaScript可以比使用window.onload更早開始執行。

現在，像jQuery這樣的JavaScript庫有一個事件，當瀏覽器知道所有的HTML時都會觸發 - 即使頁面沒有完全加載（例如，由於圖像未完全加載）。

來源

2013-05-31 03:47:51 7stud

'window.onload'事件等待圖像被加載嗎？我認爲圖像加載是由單獨的onload事件處理程序處理的 – Isaac

是的。僅僅因爲圖像有onload事件並不意味着window.onload不會等待所有圖像在發射前加載。 – 7stud

經過一番思考，那邊如圖編寫額外的(function(){})();受益（想象中的代碼是巨大的）：

(function() 
{ 
    var text = "Span 'them' text!"; 
    them.innerHTML = text; 
    //Many lines of code 
})(); 

(function() 
{ 
    me.innerHTML = text;//will throw 'text is undefined' 
    //Many lines of code 
})();

這將是調試多行代碼很方便，調試器會直接意識到錯誤和「點」。

雖然這個例子：

var text = "Span 'them' text!"; 
them.innerHTML = text; 
//Many lines of code 
//... 
me.innerHTML = text;

你的「錯誤」（該調試器是非常高興）會更難追查。

來源

2013-05-31 04:03:56 Isaac

JavaScript Module Pattern（function（）{}）（）; vs block語句

回答

相關問題