何謂安需裝載?
腳本程序一般都是下載后執行
,當腳本庫非常龐大時,一次性下載起來非常費時,傳統的解決方式是,按功能模塊把腳本寫在不同的文件中,頁面上手動加入script標簽裝載指定內容,但
是這有一些缺點,類庫的使用者需要知道沒個腳本之間的關系,順序要求等等,而不可能要求每個類庫使用者都對其非常熟悉,出錯的可能性很大。于是很多框架開
始支持導入指令,想使用什么一個導入函數就完了,不必一堆堆的script文件,不用小心翼翼的關注著他們的依賴關系。
安需裝載可分如下三種模式:
- 即時同步按需裝載(阻塞,JSI、JSVM、dojo)。
最簡單的按需裝載實現,通過XMLHttpRequest同步裝載腳本文件實現。問題是,瀏覽器使用這種方式同步獲取資源時將導致瀏覽器阻塞:停止響應用戶事件、停止頁面重畫操作。所以,雖然編程最為簡單,但是用戶體驗最差。
- 異步按需裝載(無阻塞,JSI2.0+)。
異步導入,不必多做解釋,用戶體驗好,但是因為其異步特征,處理起來比較麻煩。
- 延遲同步按需裝載(無阻塞,JSI2.0+)。
JSI通過動態預裝載功能實現的一種同步獲取資源的方法,雖然也是同步,但沒有阻塞,可以算時兼顧易用性和用戶體驗的機決方按。缺點時有一定延遲,當前腳本標簽中不可用。
使用方法(JSI示例)
以一個代碼語法著色程序為例:
類庫位置:example/
codedecorator/code.js
頁面位置:example/xxx.html
- 即時同步按需裝載
$import("example.codedecorator.Code");
var code1 = new Code();
code1.id = "libCode";
code1.decorate();
- 異步按需裝載
$import("example.codedecorator.Code",function(Code){
var code1 = new Code();
code1.id = "libCode";
code1.decorate();
})
- 延遲同步按需裝載(無阻塞,JSI2.0+)。
<script>"../scripts/boot.js"></script>
<script>
$import("example.codedecorator.Code",true);
</script>
<script>
var code1 = new Code();
code1.id = "libCode";
code1.decorate();
</script>
示例說明:
在線測試
http://jsintegration.sourceforge.net/example/code.html
http://www.xidea.org/project/jsi/example/code.html
參考:
JSI 導入函數: function $import(path, callbackOrLazyLoad, target )
posted on 2007-06-25 09:24
金大為 閱讀(625)
評論(0) 編輯 收藏 所屬分類:
JSI 、
JavaScript