JSI是一個(gè)簡(jiǎn)單、無(wú)侵入（被管理的腳本無(wú)需考慮JSI的存在）的腳本管理框架， JSI的出現(xiàn)，可以做到如下幾點(diǎn):
* 按需裝載。
* 管理依賴(lài)，避免依賴(lài)的保露、擴(kuò)散，提高類(lèi)庫(kù)的易用性。
* 執(zhí)行環(huán)境的隔離，避免名稱(chēng)沖突。
類(lèi)庫(kù)裝載
動(dòng)態(tài)裝載類(lèi)庫(kù)是按需裝載的基礎(chǔ)，JSI的裝載方式有三種：即時(shí)同步裝載（可能阻塞）、延遲同步裝載（需要編譯）、異步裝載。這里先演示一下最簡(jiǎn)單的方式，即時(shí)同步導(dǎo)入：
示例：重寫(xiě)一下jQuery的hello world。
….
<!-- 加入引導(dǎo)腳本 -->
<script src="../scripts/boot.js"></script>
….
<script>
//導(dǎo)入jQuery的$函數(shù)
$import("org.jquery.$");
//使用jQuery的$函數(shù)
$(document).ready(function(){
alert("Hello World");
});
</script>
….
這是默認(rèn)的導(dǎo)入方式，當(dāng)能，如果網(wǎng)絡(luò)環(huán)境不好，這可能產(chǎn)生阻塞問(wèn)題。所以JSI2開(kāi)始增加了仍外兩種導(dǎo)入模式。延遲同步導(dǎo)入，異步導(dǎo)入。具體用法請(qǐng)查看文章后面的導(dǎo)入函數(shù)參考。
依賴(lài)管理
Java可以隨意的使用第三方類(lèi)庫(kù)，可是JavaScript卻沒(méi)那么幸運(yùn)，隨著類(lèi)庫(kù)的豐富，煩雜的依賴(lài)關(guān)系和可能的命名沖突將使得類(lèi)庫(kù)的發(fā)展越來(lái)越困難。程序的易用性也將大打折扣。
命名沖突的危險(xiǎn)無(wú)形的增加你大腦的負(fù)擔(dān)；隨著使用的類(lèi)庫(kù)的增加，暴露的依賴(lài)也將隨之增加，這是復(fù)雜度陡增的極大禍根，將使得系統(tǒng)越來(lái)越復(fù)雜，越來(lái)越難以控制。潛在的問(wèn)題越來(lái)越多，防不勝防。
所以，我們建議類(lèi)庫(kù)的開(kāi)發(fā)者將自己類(lèi)庫(kù)的依賴(lài)終結(jié)在自己手中，避免依賴(lài)擴(kuò)散，以提高類(lèi)庫(kù)的易用性。
為了演示一下JSI的依賴(lài)管理，我們編寫(xiě)一個(gè)復(fù)雜一點(diǎn)的類(lèi)庫(kù)：類(lèi)似Windows XP文件瀏覽器左側(cè)的滑動(dòng)折疊面板(任務(wù)菜單)效果。
1.編寫(xiě)我們的折疊面板函數(shù)（org/xidea/example/display/effect.js）：
/**
* 滑動(dòng)面板實(shí)現(xiàn).
* 當(dāng)指定元素可見(jiàn)時(shí)，將其第一個(gè)子元素向上滑動(dòng)至完全被遮掩（折疊）。
* 當(dāng)指定元素不可見(jiàn)時(shí)，將其第一個(gè)子元素向下滑動(dòng)至完全顯示（展開(kāi)）。
*/
function slidePanel(panel){
panel = $(panel);
if(panel.style.display=='none'){
//調(diào)用Scriptaculous Effect的具體滑動(dòng)展開(kāi)實(shí)現(xiàn)
new Effect.SlideDown(panel);
}else{
//調(diào)用Scriptaculous Effect的具體滑動(dòng)閉合實(shí)現(xiàn)
new Effect.SlideUp(panel);
}
}
2.編寫(xiě)包定義腳本，申明其內(nèi)容及依賴(lài)（org/xidea/example/display/__$package.js）：
//添加slidePanel（滑動(dòng)面板控制）函數(shù)
this.addScript("effect.js","slidePanel",null);
//給effect.js腳本添加對(duì)us.aculo.script包中effects.js腳本的裝載后依賴(lài)this.addScriptDependence("effect.js",
"us/aculo/script/effects.js",false);
//給effect.js腳本添加對(duì)net.conio.prototype包中$函數(shù)的裝載后依賴(lài)this.addScriptObjectDependence("effect.js",
"net.conio.prototype.$",false);
3.HTML代碼：
<html>
<head>
<title>重用aculo Effect腳本實(shí)例</title>
<link rel="stylesheet" type="text/css" href="/styles/default.css" />
<script src="/scripts/boot.js"></script>
<script>
$import("org.xidea.display.slidePanel");
</script>
</head>
<body>
<div class="menu_header"
onclick="slidePanel('menu_block1')">
面板 1
</div>
<div class="menu_block" id="menu_block1">
<ul>
<li>text1</li>
<li>text2</li>
<li>text3</li>
</ul>
</div>
</body>
</html>
onclick="slidePanel('menu_block1')"這個(gè)事件函數(shù)將在我們點(diǎn)擊面板標(biāo)題時(shí)觸發(fā)，能后會(huì)調(diào)用Scriptaculous Effect的具體實(shí)現(xiàn)去實(shí)現(xiàn)我們需要的滑動(dòng)折疊功能。
這個(gè)效果只是八行代碼，比較簡(jiǎn)單，但是它用到了Scriptaculous Effect類(lèi)庫(kù)，Scriptaculous Effect又簡(jiǎn)接用到了Prototype類(lèi)庫(kù)，所以，傳統(tǒng)方式使用起來(lái)還是比較復(fù)雜，有一堆腳本需要導(dǎo)入prototype.js，effects.js，builder.js，更加痛苦的是這些腳本的導(dǎo)入還要遵守一定的順序。
但是，如果我們使用JSI 明確申明了這些依賴(lài)，那么使用起來(lái)就簡(jiǎn)單多了，只一個(gè)import就可以完全搞定。
此外 這里還有一個(gè)額外的好處，我們類(lèi)庫(kù)中依賴(lài)的那些腳本，并不會(huì)對(duì)外部保露，在頁(yè)面上是不可見(jiàn)的，也就是說(shuō)，這些依賴(lài)完全終結(jié)在剛才編寫(xiě)的類(lèi)庫(kù)中，不必?fù)?dān)心使用這些類(lèi)庫(kù)帶來(lái)的名稱(chēng)污染問(wèn)題。
環(huán)境隔離
眾所周知， Scriptaculous所依賴(lài)的Prototype庫(kù)與jQuery存在沖突。所以同時(shí)使用比較困難。
下面的例子，我們將在同一個(gè)頁(yè)面上同時(shí)使用Scriptaculous和 jQuery 類(lèi)庫(kù)。示范一下JSI隔離沖突功能。
示例頁(yè)面（hello-jquery-aculo.html）：
<html>
<head>
<title>Hello jQuery And Scriptaculous</title>
<!-- 加入引導(dǎo)腳本 -->
<script src="../scripts/boot.js"></script>
<script>
//導(dǎo)入jQuery
$import("org.jquery.$");
//導(dǎo)入Scriptaculous
$import("us.aculo.script.Effect");
$(document).ready(function(){
//使用jQuery添加一段問(wèn)候語(yǔ)
$("<p id='helloBox' style='background:#0F0;text-align:center;font-size:40px;cursor:pointer;'>\
Hello jQuery And Scriptaculous</p>")
.appendTo('body');
$('#helloBox').ready(function(){
//使用Scriptaculous高亮顯示一下剛才添加的內(nèi)容
new Effect.Highlight('helloBox');
}).click(function(){
//當(dāng)用戶(hù)單擊該內(nèi)容后使用jQuery實(shí)現(xiàn)漸出
$('#helloBox').fadeOut();
});
});
</script>
</head>
<body>
<p>文檔裝載后，jQuery將在后面添加一段問(wèn)候語(yǔ)；并使用Scriptaculous高亮顯示（Highlight）；在鼠標(biāo)點(diǎn)擊后在使用jQuery漸出（fadeOut）。</p>
</body>
</html>
其他話題
JSI組件模型：
頁(yè)面裝飾引擎：用于裝飾樸素html元素的框架，實(shí)現(xiàn)零腳本代碼的web富客戶(hù)端編程，更多細(xì)節(jié)請(qǐng)?jiān)L問(wèn)jsi官方網(wǎng)站。
參考：
腳本導(dǎo)入函數(shù)
腳本導(dǎo)入函數(shù)是JSI唯一的一個(gè)在頁(yè)面上使用的系統(tǒng)函數(shù)。
function $import(path, callbackOrLazyLoad, target )
path 類(lèi)庫(kù)路徑
callbackOrLazyLoad 可選參數(shù),如果其值為函數(shù)，表示異步導(dǎo)入模式；如果其值為真，表示延遲同步導(dǎo)入模式，否則為即時(shí)同步導(dǎo)入（默認(rèn)如此）。
Target 可選參數(shù)(默認(rèn)為全局變量,所以說(shuō),這種情況等價(jià)于直接聲明的全局變量)，指定導(dǎo)入容器。
名詞解釋?zhuān)?br> * 自由腳本
通過(guò)<script>標(biāo)記引入或直接編寫(xiě)的腳本，我們不建議在使用JSIntegration之后，仍舊使用script src導(dǎo)入JSI啟動(dòng)腳本(boot.js)之外的腳本。
* 托管腳本
通過(guò)$import函數(shù)直接或間接加載的腳本。這些腳本將在一個(gè)獨(dú)立的執(zhí)行上下文裝載，不會(huì)污染全局環(huán)境。
* 腳本依賴(lài)
若要使用A，需要導(dǎo)入B，則A依賴(lài)B。
A、B可以是腳本文件，也可以是腳本文件中的某個(gè)腳本元素。
* 類(lèi)庫(kù)使用者
類(lèi)庫(kù)的使用者，您只需再頁(yè)面上書(shū)寫(xiě)腳本，導(dǎo)入類(lèi)庫(kù)，編寫(xiě)自己的簡(jiǎn)單腳本，一般情況請(qǐng)不要編寫(xiě)js文件，那是類(lèi)庫(kù)開(kāi)發(fā)者做的事.
* 類(lèi)庫(kù)開(kāi)發(fā)者
在此框架下開(kāi)發(fā)出方便實(shí)用的腳本庫(kù)，您需要編寫(xiě)一些通用腳本，同時(shí)設(shè)置腳本依賴(lài)，做到任何類(lèi)/函數(shù)，導(dǎo)入即可運(yùn)行。
posted on 2007-06-02 14:16
金大為 閱讀(1629)
評(píng)論(0) 編輯 收藏 所屬分類(lèi):
JSI