在介紹ensure內部的實現(xiàn)之前，讓我們先來看看其功能：

ensure({
html: "popup.html",
javascript: "popup.js",
css: "popup.css"
}, function() {
Popup.show("hello world");
}
);
在這段代碼中，ensure首先會確保popup.html、popup.js、popup.css這3個文件的加載，如果都沒加載過ensure就會動態(tài)加載它們；如果已經加載過了，ensure不會再次加載。在確保這3個文件都加載后，ensure會調用后面的匿名函數(shù)，也就是執(zhí)行Popup.show("hello world");。

接下來，就讓我們看看ensure是如何動態(tài)加載JavaScript與CSS的。

加載JavaScript
在ensure當中，加載JavaScript分兩種情況來執(zhí)行，也就是Safari與非Safari這兩種情況。

在IE、Firefox、Opera中加載JavaScript
在這三款瀏覽器中加載JavaScript，其實只需要創(chuàng)建一個script元素，把src指向要加載的URL，最后把script元素追加到head元素上，那就搞掂了。此項工作是在HttpLibrary.createScriptTag()中完成的。不過我們不僅僅要加載JavaScript，同時還需要知道它什么時候完成加載，這可以通過script元素的onload事件或onreadystatechange事件來實現(xiàn)。

在Safari中加載JavaScript
因為Safari 2不支持onload或者onreadystatechange，所以只能手動通過XHR把URL讀去過來，然后再手動eval這段代碼，這就帶來了一個限制──只能加載本域的JavaScript文件。在ensure當中，eval的工作是通過HttpLibrary.globalEval()來完成的。為了讓JavaScript代碼在全局（global）上下文中eval，ensure還是使用了創(chuàng)建script元素的方法，并將要eval的JavaScript置于其內，最后把script元素追加到head元素內。

細心的人肯定要問，為什么HttpLibrary.globalEval()要如此設計，而非直接window.eval或者eval.call。這是因為，window.eval和eval.call都無法在IE6中實現(xiàn)和script標簽加載JavaScript代碼一模一樣的效果，這兩種做法的eval在IE6下仍然不是在全局上下文中執(zhí)行的。搜索一下你就會發(fā)現(xiàn)一些相關的討論，例如jQuery就曾經使用window.execScript()來完成此項任務。不過最終大家都發(fā)現(xiàn)添加script元素才是最好的跨瀏覽器解決方案，所以現(xiàn)在的jQuery和ensure都是如此實現(xiàn)的了。

加載CSS
相對于加載JavaScript而言，加載CSS就簡單多了，而且方法也是類似的：在head元素內直接加入link元素就可以了。這也正是loadCSS()所完成的工作。

實際上，ensure沒有確保CSS完成加載后再執(zhí)行下去。這估計是因為瀏覽器都能夠在CSS加載完成后自動應用到頁面上，因此Omar AL Zabir就認為CSS的加載順序是無關緊要的，不過假如CSS加載速度實在太慢，其實還是會影響顯示效果的。

在IE6中加載CSS
這次需要特別照顧的是IE6，而非Safari。IE6在往head元素添加link元素時，必須在window的上下文中完成，因此添加link的函數(shù)通過call調用切換了上下文。

總結
實際上動態(tài)加載JavaScript與CSS都并不難，在大多數(shù)情況下只需要向head元素追加對應的子元素就可以了，只有Safari2和IE6這兩款古老的瀏覽器是需要特殊照顧的。
官方地址
ensure

最新評論