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

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

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

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

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

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

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

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

實(shí)際上，ensure沒(méi)有確保CSS完成加載后再執(zhí)行下去。這估計(jì)是因?yàn)闉g覽器都能夠在CSS加載完成后自動(dòng)應(yīng)用到頁(yè)面上，因此Omar AL Zabir就認(rèn)為CSS的加載順序是無(wú)關(guān)緊要的，不過(guò)假如CSS加載速度實(shí)在太慢，其實(shí)還是會(huì)影響顯示效果的。

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

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

最新評(píng)論