快捷導(dǎo)航

腳本安需導(dǎo)入(裝載)的三種模式的對(duì)比

更新時(shí)間：2007年06月24日 00:00:00 作者：

何謂安需裝載？
    腳本程序一般都是下載后執(zhí)行，當(dāng)腳本庫(kù)非常龐大時(shí)，一次性下載起來(lái)非常費(fèi)時(shí)，傳統(tǒng)的解決方式是，按功能模塊把腳本寫(xiě)在不同的文件中，頁(yè)面上手動(dòng)加入 script標(biāo)簽裝載指定內(nèi)容，但是這有一些缺點(diǎn)，類(lèi)庫(kù)的使用者需要知道沒(méi)個(gè)腳本之間的關(guān)系，順序要求等等，而不可能要求每個(gè)類(lèi)庫(kù)使用者都對(duì)其非常熟悉，出錯(cuò)的可能性很大。于是很多框架開(kāi)始支持導(dǎo)入指令，想使用什么一個(gè)導(dǎo)入函數(shù)就完了，不必一堆堆的script文件，不用小心翼翼的關(guān)注著他們的依賴(lài)關(guān)系。

安需裝載的困境：
      早期安需裝載（即時(shí)同步按需裝載）有一個(gè)致命的弱點(diǎn)，瀏覽器阻塞問(wèn)題。當(dāng)按需裝載某些類(lèi)庫(kù)時(shí)，通常通過(guò)XMLHttpRequest同步裝載腳本文件實(shí)現(xiàn)，這種情況下，在資源下載完成之前，瀏覽器將停止響應(yīng)用戶(hù)事件、停止頁(yè)面重畫(huà)操作。如果網(wǎng)速很慢，這段時(shí)間將非常讓人討厭，就像是死機(jī)似的。

      以前的解決辦法是，將常用類(lèi)庫(kù)資源直接打包到框架文件中，而按需導(dǎo)入就成了一個(gè)宣傳的幌子，沒(méi)有太多實(shí)際的價(jià)值。

安需裝載可分如下三種模式：

l 即時(shí)同步按需裝載（阻塞，JSI、JSVM、dojo）。

最簡(jiǎn)單的按需裝載實(shí)現(xiàn)，通過(guò)XMLHttpRequest同步裝載腳本文件實(shí)現(xiàn)。問(wèn)題是，瀏覽器使用這種方式同步獲取資源時(shí)將導(dǎo)致瀏覽器阻塞：停止響應(yīng)用戶(hù)事件、停止頁(yè)面重畫(huà)操作。所以，雖然編程最為簡(jiǎn)單，但是用戶(hù)體驗(yàn)最差。

2 異步按需裝載（無(wú)阻塞，JSI2.0+）。

異步導(dǎo)入，不必多做解釋?zhuān)脩?hù)體驗(yàn)好，但是因?yàn)槠洚惒教卣?，處理起?lái)比較麻煩。

3 延遲同步按需裝載（無(wú)阻塞，JSI2.0+）。

JSI通過(guò)動(dòng)態(tài)預(yù)裝載功能實(shí)現(xiàn)的一種同步獲取資源的方法，雖然也是同步，但沒(méi)有阻塞，可以算時(shí)兼顧易用性和用戶(hù)體驗(yàn)的解決方按。缺點(diǎn)時(shí)有一定延遲，當(dāng)前腳本標(biāo)簽中不可用。



使用方法（JSI示例）
    以一個(gè)代碼語(yǔ)法著色程序?yàn)槔?

類(lèi)庫(kù)位置：org/xidea/example/code/code.js

頁(yè)面位置：example/xxx.html

即時(shí)同步按需裝載

import("org.xidea.example.code.Code");

var code1 = new Code();

code1.id = "libCode";

code1.decorate();

異步按需裝載

$import("org.xidea.example.code.Code",function(Code){

var code1 = new Code();

code1.id = "libCode";

code1.decorate();

})

延遲同步按需裝載（無(wú)阻塞，JSI2.0+）。

<script>"../scripts/boot.js"></script>

<script>

$import("org.xidea.example.code.Code",true);

</script>



<script>

var code1 = new Code();

code1.id = "pageCode";

code1.decorate();

</script>

測(cè)試示例：
地址：

http://jsintegration.sourceforge.net/example/code.html

http://www.xidea.org/project/jsi/example/code.html

    示例都是jsi的默認(rèn)示例，可以下載到本地運(yùn)行，下載后最好能放到一個(gè)能受到網(wǎng)速限制的服務(wù)器上，只有這樣才能看到阻塞的問(wèn)題。

參考：
JSI 導(dǎo)入函數(shù)： function $import(path, callbackOrLazyLoad, target )

JSI2 預(yù)覽版下載：http://groups.google.com/group/jsier/files