JavaScript 設計模式

DOM 和瀏覽器的模式

　 　

209

[200]

這種實踐方式非常符合漸進式增強和 unobtrusive JavaScript 的精神。在第二個 HTML 分塊

完成之後，你應該就有個已經完整載入、顯示，且可用的頁面，就跟 JavaScript 在瀏覽器

中被停用的情況是一樣的。而在 JavaScript 隨著第三個分塊抵達後，它就強化了頁面、加

入了產品的特色和性能。

用動態 <script> 實現非同步下載

如前面所提過的，JavaScript 會阻擋在它之後的檔案下載。不過有幾個模式讓你可以避免：



用 XHR 請求來下載 script，並用

eval()

執行下載的字串。這種做法受到來自同一網

域的限制，還必須用到

eval()

，而這東西本身就是個反模式。



使用

defer

和

async

屬性，但這些並非在所有瀏覽器都有效。



使用動態的

<script>

元素。

最後一種模式優良又可行，它類似你在 JSONP 看到的做法，你建立一個新的

script

元

素，設定其

src

，接著附加到頁面上。

底下是一個範例，用來載入一個 JavaScript 檔案，且不會阻擋其他的下載：

<!--

第

1

段分塊結束

-->

<!--

第

2

段分塊結束

-->

<!--

第

3

段分塊結束

-->

210

　 　

第八章

此模式的缺點是，如果主要的 .js 檔案正用此模式下載，你就不能下載任何其他需倚賴此

主要 script 的檔案。因為主要的 .js 檔是用非同步下載，所以無法保證何時會完 ...