|
|
ensure({
html: "popup.html",
Javascript: "popup.js",
css: "popup.css"
}, function() {
Popup.show("hello world");
}
);
在這段代碼中，ensure首先會確保popup.html、popup.js、popup.css這3個文件的加載，如果都沒加載過ensure就會動態加載它們；如果已經加載過了，ensure不會再次加載。在確保這3個文件都加載后，ensure會調用后面的匿名函數，也就是執行Popup.show("hello world");。
接下來，就讓我們看看ensure是如何動態加載JavaScript與CSS的。
加載JavaScript
在ensure當中，加載JavaScript分兩種情況來執行，也就是Safari與非Safari這兩種情況。
在IE、Firefox、Opera中加載JavaScript
在這三款瀏覽器中加載JavaScript，其實只需要創建一個script元素，把src指向要加載的URL，最后把script元素追加到head元素上，那就搞掂了。此項工作是在HttpLibrary.createScriptTag()中完成的。不過我們不僅僅要加載JavaScript，同時還需要知道它什么時候完成加載，這可以通過script元素的onload事件或onreadystatechange事件來實現。
在Safari中加載JavaScript
因為Safari 2不支持onload或者onreadystatechange，所以只能手動通過XHR把URL讀去過來，然后再手動eval這段代碼，這就帶來了一個限制──只能加載本域的JavaScript文件。在ensure當中，eval的工作是通過HttpLibrary.globalEval()來完成的。為了讓JavaScript代碼在全局（global）上下文中eval，ensure還是使用了創建script元素的方法，并將要eval的JavaScript置于其內，最后把script元素追加到head元素內。
細心的人肯定要問，為什么HttpLibrary.globalEval()要如此設計，而非直接window.eval或者eval.call。這是因為，window.eval和eval.call都無法在IE6中實現和script標簽加載JavaScript代碼一模一樣的效果，這兩種做法的eval在IE6下仍然不是在全局上下文中執行的。搜索一下你就會發現一些相關的討論，例如jQuery就曾經使用window.execScript()來完成此項任務。不過最終大家都發現添加script元素才是最好的跨瀏覽器解決方案，所以現在的jQuery和ensure都是如此實現的了。
加載CSS
相對于加載JavaScript而言，加載CSS就簡單多了，而且方法也是類似的：在head元素內直接加入link元素就可以了。這也正是loadCSS()所完成的工作。
實際上，ensure沒有確保CSS完成加載后再執行下去。這估計是因為瀏覽器都能夠在CSS加載完成后自動應用到頁面上，因此Omar AL Zabir就認為CSS的加載順序是無關緊要的，不過假如CSS加載速度實在太慢，其實還是會影響顯示效果的。
在IE6中加載CSS
這次需要特別照顧的是IE6，而非Safari。IE6在往head元素添加link元素時，必須在window的上下文中完成，因此添加link的函數通過call調用切換了上下文。
總結
實際上動態加載JavaScript與CSS都并不難，在大多數情況下只需要向head元素追加對應的子元素就可以了，只有Safari2和IE6這兩款古老的瀏覽器是需要特殊照顧的。
官方地址
ensure
JavaScript技術：多瀏覽器兼容的動態加載 JavaScript 與 CSS第1/2頁，轉載需保留來源！
鄭重聲明：本文版權歸原作者所有，轉載文章僅為傳播更多信息之目的，如作者信息標記有誤，請第一時間聯系我們修改或刪除，多謝。
