从JSI托管cd中，选择文g/对象集，导出为单一脚本文gQ完全脱JSI装蝲环境?
也就是说Q届时JSI不仅可以作ؓ一个运行时的脚本管理框Ӟ也可以当作一个部|时的脚本定制、打包工兗?/p>
我是看Ext的定制工具后产生q个x的，JSI的依赖定义API完全可以用作一个通用的脚本定制、打包工L依赖描述语言?/p>
* Ext集成Q欢qExt用户加入Q?
集成ExtQ一斚w可以弥补JSIlg的缺乏。另一斚w可以优化Ext的装载gq?
ext目前大小为：462,031字节QJSI2Alpha版的内核?5,140字节Q不到Ext的十分之一Q文件大均在文本压~之前记敎ͼ。集成Ext后，用户可以使用JSI导入函数Q按需导入那些面?strong>直接
一些细节的xQ?
初步军_使用jquery为其基础cdQprototype不必担心QJSI可以隔离脚本冲突Q不会媄响到prototype用户Q?
装蝲单元划分的两U想法：
1.按照 http://extjs.com/download/build 中描q的定制模块划分Q可能做些文件合qӞ避免零碎 件的装蝲开销Q?
2.按照Ext内部包划分（Ext 下蝲包的packages目录下好像已l做了文件合qӞ
我个没用qExtQ非常希望有Ext用户合作?/strong>
]]>
JSI针对每一个装载的脚本都有完全独立的执行上下文。所以这个问题能?/span>JSI上彻底解冟?/span>
下面的例子，我们在同一个页面上同时使用Scriptaculous?/span> jQuery cd。证实一?/span>JSI隔离冲突功能?/span>
CZ面Q?/span>hello-jquery-aculo.htmlQ：
<html>
<head>
<title>Hello jQuery And Scriptaculous</title>
<!-- 加入引导脚本 -->
<script src="../scripts/boot.js"></script>
<script>
//导入jQuery
$import("org.jquery.$");
//导入Scriptaculous
$import("us.aculo.script.Effect");
$(document).ready(function(){
//使用jQueryd一D问候语
$("<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高亮昄一下刚才添加的内容
new Effect.Highlight('helloBox');
}).click(function(){
//当用户单击该内容后用jQuery实现渐出
$('#helloBox').fadeOut();
});
});
</script>
</head>
<body>
<p>文装蝲后，jQuery在后面d一D问候语Qƈ使用Scriptaculous高亮昄QHighlightQ；在鼠标点d在用jQuery渐出QfadeOutQ?/span></p>
</body>
</html>
<head>
<title>Hello jQuery And Scriptaculous</title>
<!-- 加入引导脚本 -->
<script src="../scripts/boot.js"></script>
<script>
//导入jQuery
$import("org.jquery.$");
//导入Scriptaculous
$import("us.aculo.script.Effect");
$(document).ready(function(){
//使用jQueryd一D问候语
$("<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高亮昄一下刚才添加的内容
new Effect.Highlight('helloBox');
}).click(function(){
//当用户单击该内容后用jQuery实现渐出
$('#helloBox').fadeOut();
});
});
</script>
</head>
<body>
<p>文装蝲后，jQuery在后面d一D问候语Qƈ使用Scriptaculous高亮昄QHighlightQ；在鼠标点d在用jQuery渐出QfadeOutQ?/span></p>
</body>
</html>
]]>
JSI暂时不大编写丰富的公共APIQ但是我们可以集成其他成熟的cdQ同旉M们的依赖Q隔d个脚本的执行上下文，消除命名冲突的危险?br>
q里我们详细介绍一个复杂一点的实例Q类似Windows XP文g览器左侧的滑动折叠面板(d菜单)效果?br>
我们先集成Scriptaculous EffectcdQƈ且在q个基础上按我个人的习惯对一个面板折叠效果做一个简单的装Q展C框架的cd装功能?br>
1。集成ScriptaculouscdQ?br>
q里我们不做q多介绍Q详l情况请参考集成实战；我们发布的版本中已经把Scriptaculous攄于us.aculo.script包中Q您可以把这些作为系l内|的cd使用?br>
2。编写我们的折叠面板函数Qexample/effect.jsQ：
/**
* 滑动面板实现.
* 当指定元素可见时Q将其第一个子元素向上滑动臛_全被遮掩Q折叠）?nbsp;
* 当指定元素不可见Ӟ其W一个子元素向下滑动臛_全显C（展开Q?nbsp;
*/
function slidePanel(panel){
panel = $(panel);
if(panel.style.display=='none'){
//调用Scriptaculous Effect的具体滑动展开实现
new Effect.SlideDown(panel);
}else{
//调用Scriptaculous Effect的具体滑动闭合实?nbsp;
new Effect.SlideUp(panel);
}
}
* 滑动面板实现.
* 当指定元素可见时Q将其第一个子元素向上滑动臛_全被遮掩Q折叠）?nbsp;
* 当指定元素不可见Ӟ其W一个子元素向下滑动臛_全显C（展开Q?nbsp;
*/
function slidePanel(panel){
panel = $(panel);
if(panel.style.display=='none'){
//调用Scriptaculous Effect的具体滑动展开实现
new Effect.SlideDown(panel);
}else{
//调用Scriptaculous Effect的具体滑动闭合实?nbsp;
new Effect.SlideUp(panel);
}
}
3。编写包定义脚本Qexample/__$package.jsQ：
//dslidePanelQ滑动面板控Ӟ函数
this.addScript("effect.js","slidePanel",null);
//leffect.js脚本d对us.aculo.script包中effects.js脚本的装载后依赖this.addScriptDependence("effect.js",
"us/aculo/script/effects.js",false);
this.addScript("effect.js","slidePanel",null);
//leffect.js脚本d对us.aculo.script包中effects.js脚本的装载后依赖this.addScriptDependence("effect.js",
"us/aculo/script/effects.js",false);
4。在|页上运用上面的cdQ?br>
<html>
<head>
<title>重用aculo Effect脚本实例</title>
<link rel="stylesheet" type="text/css" href="/styles/default.css" />
<script src="/scripts/boot.js"></script>
<script>
$import("example.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>
<head>
<title>重用aculo Effect脚本实例</title>
<link rel="stylesheet" type="text/css" href="/styles/default.css" />
<script src="/scripts/boot.js"></script>
<script>
$import("example.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')"q个事g函数在我们点击面板标题时触发，能后会调用Scriptaculous Effect的具体实现去实现我们需要的滑动折叠功能?br>
壁立千仞 无欲则刚――控制依?/h1>
java可以随意的用第三方cdQ可是JavaScript却没那么q运Q随着cd的丰富，烦杂的依赖关pd可能的命名冲H将使得cd的发展越来越困难。程序的易用性也大打折扣?br>
命名冲突的危险无形的增加你大脑的负担Q随着使用的类库的增加Q暴露的依赖也将随之增加Q这是复杂度陡增的极大祸根，得系l越来越复杂Q越来越难以控制。潜在的问题来多Q防不胜阌Ӏ?br>
JSI的出玎ͼ可以解决上述问题Q我们徏议类库的开发者将自己cd的依赖终l在自己手中Q避免依赖扩散，以提高类库的易用性?br>
同样使用上面的例子，假如我们x开JSIQ实现同L功能Q那我们的页面代码将是（cd代码不用改动Q：
<html>
<head>
<title>重用aculo Effect脚本实例</title>
<link rel="stylesheet" type="text/css" href="/styles/default.css" />
<!--
<script src="/scripts/boot.js"></s cript>
<script>
$import("example.slidePanel");
</sc ript>
-->
<script src="/scripts/net/conio/prototype/v1_5/prototype.js">
</script>
<script src="/scripts/us/aculo/script/v1_7/effects.js">
</script>
<script src="/scripts/us/aculo/script/v1_7/builder.js">
</script>
<script src="/scripts/example/effect.js">
</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>
q个例子的html代码明显比上面的复杂了，一堆堆的script标签Q而且q是有序的；q出现在面上，重构h也极光烦?br>
可以看出QJSI的加入可以让cd更加易用Qhtml代码更ؓz，最l用户已l不必关心所用类库的依赖了?br>
JSI中每一个脚本有一个单独的执行上下文。各个脚本顶部变量你可以随便使用Q不必担心不同脚本中的命名冲H，不会污染全局变量I间Q这U方式可以用于解
x些类库间变量冲突的问题（如jQuery和Prototype?函数Q。我们甚臛_以做到同一个页面上间接加蝲同一U类库的两个不同版本Q不怺?
响?br>
使用JSI后，很多l节我们可以在包中封装掉Q不需要告诉类库用者太多。大大增加类库的易用性。同Ӟcd装的支持可以让我们在第三方库的基础上轻杄按自q喜好~写自己的类库，同时避免依赖扩散造成的复杂度增加?br>
使用JSIntegration唯一多出的负担就是编写包定义文gQ不q想惌U定义文件可是一x逸的Q以后就不需要每ơ导入脚本的时候都心翼的判
断那个脚本先导入那个后导入，有那些间接用到的类库需要导入，{等Q，而且有了包结构后对于代码l织、重用，以及文档的编写阅读，都将非常有利?img src ="http://www.tkk7.com/jindw/aggbug/126038.html" width = "1" height = "1" />
]]>
<head>
<title>重用aculo Effect脚本实例</title>
<link rel="stylesheet" type="text/css" href="/styles/default.css" />
<!--
<script src="/scripts/boot.js"></s cript>
<script>
$import("example.slidePanel");
</sc ript>
-->
<script src="/scripts/net/conio/prototype/v1_5/prototype.js">
</script>
<script src="/scripts/us/aculo/script/v1_7/effects.js">
</script>
<script src="/scripts/us/aculo/script/v1_7/builder.js">
</script>
<script src="/scripts/example/effect.js">
</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>
脚本E序一般都是下载后执行
Q当脚本库非常庞大时Q一ơ性下载v来非常费Ӟ传统的解x式是Q按功能模块把脚本写在不同的文g中，面上手动加入script标签装蝲指定内容Q但
是这有一些缺点，cd的用者需要知道没个脚本之间的关系Q顺序要求等{，而不可能要求每个cd使用者都对其非常熟悉Q出错的可能性很大。于是很多框架开
始支持导入指令，想用什么一个导入函数就完了Q不必一堆堆的script文gQ不用小心翼的x着他们的依赖关pR?/font>
安需装蝲可分如下三种模式Q?/strong>
- x同步按需装蝲Q?/strong>dQ?/strong>JSI、JSVM、dojoQ?/strong>?/strong>
最单的按需装蝲实现Q通过XMLHttpRequest同步装蝲脚本文g实现。问题是Q浏览器使用q种方式同步获取资源时将D览器阻塞：停止响应用户事g、停止页面重L作。所以，虽然~程最为简单，但是用户体验最差?
- 异步?/strong>需装蝲Q?/strong>无阻塞，JSI2.0+Q?br> 异步导入Q不必多做解释，用户体验好，但是因ؓ其异步特征，处理h比较ȝ?/font>
- 延迟同步按需装蝲Q?/strong>无阻塞，JSI2.0+Q?/strong>?/strong>
JSI通过动态预装蝲功能实现的一U同步获取资源的ҎQ虽然也是同步，但没有阻塞，可以时兼顾易用性和用户体验的机x按。缺Ҏ有一定gq，当前脚本标签中不可用?
使用ҎQJSICZQ?/strong>
以一个代码语法着色程序ؓ例：cd位置Qexample/codedecorator/code.js
面位置Qexample/xxx.html
- x同步按需装蝲
$import("example.codedecorator.Code");
var code1 = new Code();
code1.id = "libCode";
code1.decorate(); - 异步?/strong>需装蝲
$import("example.codedecorator.Code",function(Code){
var code1 = new Code();
code1.id = "libCode";
code1.decorate();
})
- 延迟同步按需装蝲Q?/strong>无阻塞，JSI2.0+Q?/strong>?/strong>
<script>"../scripts/boot.js"></script>
<script>
$import("example.codedecorator.Code",true);
</script>
<script>
var code1 = new Code();
code1.id = "libCode";
code1.decorate();
</script>
CZ说明Q?/font>
在线试http://jsintegration.sourceforge.net/example/code.html
http://www.xidea.org/project/jsi/example/code.html
参考：
JSI 导入函数Q?function $import(path, callbackOrLazyLoad, target )
]]>
试面见：test/load-eff-test.html
Z试l果更显客观Q我选择了第三方cd的装载测试：
'com.yahoo.yui.*',
'net.conio.prototype.*',
'net.fckeditor.*',
'org.jquery.*',
'us.aculo.script.*'
?2个脚本文Ӟ对于JSI来说q有诺干包定义文Ӟ?/p>
FF2:
标记导入旉Q原始方式）:469,469,1047,484,484,437,469,484
同步导入旉:469,453,484,437,469,453
延迟导入旉:921,765,891,906,953,906,922
异步导入旉:859,1093,1141,1031,1641,1125,1078,1093,1157,1141
IE7:
标记导入旉:343,297,297,344,328,328
同步导入旉:281,250,235,235,234,234,250,265
延迟导入旉:922,422,406,391,391,391,407,391
异步导入旉:625,672,672,703,703,672,703,704,688
标记导入旉Q原始方式）:469,469,1047,484,484,437,469,484
同步导入旉:469,453,484,437,469,453
延迟导入旉:921,765,891,906,953,906,922
异步导入旉:859,1093,1141,1031,1641,1125,1078,1093,1157,1141
IE7:
标记导入旉:343,297,297,344,328,328
同步导入旉:281,250,235,235,234,234,250,265
延迟导入旉:922,422,406,391,391,391,407,391
异步导入旉:625,672,672,703,703,672,703,704,688
q行旉试
试脚本理后对新能的媄?影响因素有：全局变量和局部变量的查找旉差异Qeval的脚本和script标记直接插入的脚本的可能差异。（q?
个测试不h普遍性，q里我主要是试了一下浏览器对局部变量的讉K速度【JSI里面讉K变量都是装蝲单元内的局部变量】，所以故意测试了大量局部变量访
问的操作Q?
试面见：test/runtime-eff-test.html
FF2Q?nbsp;
jsiTime: 845, 927, 598, 687, 764,
scriptTime: 1432, 950, 1305, 1278, 1219,
evalTime: 1644, 1373, 1322, 1186, 1360,
execTime: 0
dscriptTime: 1432, 950, 1305, 1278, 1219,
IE7:
jsiTime: 295, 205, 157, 315, 156, 142, 375, 328, 172, 172,
scriptTime: 172, 172, 189, 140, 251, 187, 217, 203, 172, 234,
evalTime: 236, 249, 139, 172, 281, 171, 172, 108, 436, 359,
execTime: 219, 234, 314, 157, 220, 266, 204, 234, 187, 95,
dscriptTime: 187, 265, 294, 326, 187, 328, 141, 221, 127, 249,
jsiTime: 845, 927, 598, 687, 764,
scriptTime: 1432, 950, 1305, 1278, 1219,
evalTime: 1644, 1373, 1322, 1186, 1360,
execTime: 0
dscriptTime: 1432, 950, 1305, 1278, 1219,
IE7:
jsiTime: 295, 205, 157, 315, 156, 142, 375, 328, 172, 172,
scriptTime: 172, 172, 189, 140, 251, 187, 217, 203, 172, 234,
evalTime: 236, 249, 139, 172, 281, 171, 172, 108, 436, 359,
execTime: 219, 234, 314, 157, 220, 266, 204, 234, 187, 95,
dscriptTime: 187, 265, 294, 326, 187, 328, 141, 221, 127, 249,
上面的基数太，随机误差太大Q调整原始数据从新测试一遍jsiTime和scriptTime
jsiTime: 576, 658, 688, 703, 611, 608,
scriptTime: 706, 608, 562, 547, 655, 657,
scriptTime: 706, 608, 562, 547, 655, 657,
有个奇怪的问题QJSI在装载类库时Q与传统模式相比Q肯定增加了些额外的q算Q但是，貌似JSI的同步装载模式下Q装载脚本的耗时比传l模式还（IE 表现明显Q？ZQ?/span>
ȝQ?/strong>
JSI的装载性能表现不错Q完全不必计较?
托管代码的运行性能也没有太大区别，不过Q因为。JSI托管脚本使用的变量基本都是装载单元内的局部变量（本地声明变量Q或者外部依赖的引用或值拷贝）Q所以，对于FFq类局部变量比全局变量讉K速度快不的解释引擎QJSI托管脚本可以辑ֈ更好的运行效率?/p>
Ƣ迎大家对这奇怪的现象提出自己的猜惻I我稍后脓出我Ҏ问题的看法^_^
]]>
更新Q?007Q?Q?Q?br>接上Q移除了xml命名I间及其内容Q装饰引擎。io包ƈ入util了，U除了一些脚本，如xml 模板引擎、装饰引擎实现等。。?br>基本上做C功能无关?/span>?br>只剩下html包和util包。lang包这U语a兼容包不说?br>
现在的类库只有（数据拯自JSI jsdocQ：
#js.html //保留q个包，因ؓq些实在太常用了Q?br> * BrowserInfo
//保留Decorator是因饰器初始化，q是受到点特别关?br> * Decorator
* EventUtil
* StyleUtil
#js.util//保留q个包主要因为异步装载用到这些类?br> * LoadTask
* Request
* ScriptLoadTask
* TaskQueue
现在的类库只有（数据拯自JSI jsdocQ：
#js.html //保留q个包，因ؓq些实在太常用了Q?/span>
* BrowserInfo
//保留Decorator是因饰器初始化，q是受到点特别关?/span>
* Decorator
* EventUtil
* StyleUtil
#js.util//保留q个包主要因为异步装载用到这些类?/span>
* LoadTask
* Request
* ScriptLoadTask
* TaskQueue
* BrowserInfo
//保留Decorator是因饰器初始化，q是受到点特别关?/span>
* Decorator
* EventUtil
* StyleUtil
#js.util//保留q个包主要因为异步装载用到这些类?/span>
* LoadTask
* Request
* ScriptLoadTask
* TaskQueue
Ƣ迎大家提出自己的看法：Q?br>
]]>
BrowserInfo对象Q?/h2>
/**
* BrowserInfo 对象Q用于判断浏览器的相关信息，如浏览器cd、quirks模式、客L语言Q简体中文？p..未实玎ͼ、操作系l（未实玎ͼ{等?br> * @public
*/
var BrowserInfo = {
isIE : falseChecker,
isOpera : falseChecker,
isGecko : falseChecker,
isNetscape : falseChecker,
isMozilla : falseChecker,
isFirefox : falseChecker,
isKhtml : falseChecker,
isSafari : falseChecker,
isKonqueror : falseChecker,
isQuirks : function(){…}
};
其中最常用的要?is<览器类?gt;Q最版本号?最大版本号Q?br>此外Q我q将BrowserInfo的函数拷贝到navigator对象上，q个有无必要呢？
//@Deprecated ???
for(var n in BrowserInfo){
window.navigator[n] = BrowserInfo[n];
}
不同之处Q?/h4>
现在在浏览器判断上面Q一般是用常量表C，比如isIE之类的，JSI的BrowserInfo使用函数Q以便提供更强大更灵zȝ功能?br>
EventUtil
EventType 对象的成员函数有Q?br>
addListener(el, type, fn, cap)
removeListener(el, type, fn, cap)
add<Eventtype>Listener(element, listener, captrue)
如addLoadListenerQaddMousedownListenerQaddMouseoutListener
remove<Eventtype>Listener(element, listener, captrue)
createEvent(type, canBubble, cancelable)
dispatchEvent(el, even)
其中: <Eventtype>代表一U事件类型?br>W3C事gcd有：
var events = ['click','mousedown','mouseup','mouseover','mousemove','mouseout','load','unload','abort','error','select','change','submit','reset','focus','blur','resize','scroll'].
concat(['DOMFocusIn','DOMFocusOut','DOMActivate']);
此外Q还d了一U事件类型：DOMLoad。就是mozilla的DOMContentLoaded事gQ在Dom树构造完成但囄资源{可能未完成时触发?br>对于q种事gcdQ?element, captrue参数都将忽略。暂时只有添加函敎ͼ没有删除函数Q有删除的必要吗Q）?br>
不同之处Q?/h3>
q个事g处理函数集与其他常见方式的却别有Q?br>
- this支持。IE的attachҎd的函敎ͼq行时this指向window对象QJSI吧这点给U正q来Q与w3c的addEventListener行ؓ一致?/li>
- 事gcd直接体现在函数名中，q样有利于书写上的错误及早发现?/li>
- 事g格式化，事件的讉K方式格式化ؓW3C的方式?/li>
- 自动清理Q这也不不同吧Q现在大多数JS库都提供q个功能Q就是在d面时清理全部注册事件。但是这对一些单늨序是无效的（OPOAQ本Z比较讨厌q种模式Q呵呵）Q以后是否可以提供一个purgeElement函数Q用于清理指定元素及其子元素的事件呢Q?/li>
非常希望大家U极发表自己的看法，该修改就修改Q如果争议太大，那么我将吧这些从pȝAPI中移除?br>
E序下蝲
* BrowserInfo 对象Q用于判断浏览器的相关信息，如浏览器cd、quirks模式、客L语言Q简体中文？p..未实玎ͼ、操作系l（未实玎ͼ{等?br> * @public
*/
var BrowserInfo = {
isIE : falseChecker,
isOpera : falseChecker,
isGecko : falseChecker,
isNetscape : falseChecker,
isMozilla : falseChecker,
isFirefox : falseChecker,
isKhtml : falseChecker,
isSafari : falseChecker,
isKonqueror : falseChecker,
isQuirks : function(){…}
};
for(var n in BrowserInfo){
window.navigator[n] = BrowserInfo[n];
}
EventUtil
EventType 对象的成员函数有Q?br>
addListener(el, type, fn, cap)
removeListener(el, type, fn, cap)
add<Eventtype>Listener(element, listener, captrue)
如addLoadListenerQaddMousedownListenerQaddMouseoutListener
remove<Eventtype>Listener(element, listener, captrue)
createEvent(type, canBubble, cancelable)
dispatchEvent(el, even)
其中: <Eventtype>代表一U事件类型?br>W3C事gcd有：
var events = ['click','mousedown','mouseup','mouseover','mousemove','mouseout','load','unload','abort','error','select','change','submit','reset','focus','blur','resize','scroll'].
concat(['DOMFocusIn','DOMFocusOut','DOMActivate']);
concat(['DOMFocusIn','DOMFocusOut','DOMActivate']);
此外Q还d了一U事件类型：DOMLoad。就是mozilla的DOMContentLoaded事gQ在Dom树构造完成但囄资源{可能未完成时触发?br>对于q种事gcdQ?element, captrue参数都将忽略。暂时只有添加函敎ͼ没有删除函数Q有删除的必要吗Q）?br>
不同之处Q?/h3>
q个事g处理函数集与其他常见方式的却别有Q?br>
- this支持。IE的attachҎd的函敎ͼq行时this指向window对象QJSI吧这点给U正q来Q与w3c的addEventListener行ؓ一致?/li>
- 事gcd直接体现在函数名中，q样有利于书写上的错误及早发现?/li>
- 事g格式化，事件的讉K方式格式化ؓW3C的方式?/li>
- 自动清理Q这也不不同吧Q现在大多数JS库都提供q个功能Q就是在d面时清理全部注册事件。但是这对一些单늨序是无效的（OPOAQ本Z比较讨厌q种模式Q呵呵）Q以后是否可以提供一个purgeElement函数Q用于清理指定元素及其子元素的事件呢Q?/li>
非常希望大家U极发表自己的看法，该修改就修改Q如果争议太大，那么我将吧这些从pȝAPI中移除?br>
E序下蝲
q个API也可以脱JSI使用Q只是，在编写的时候，因ؓ有了JSI的保护，我用了不少内部变量Qؓ避免可能的冲H，做了如下处理?
var BrowserInfo = function(){
//#include(browser-info.js).
return BrowserInfo;
}
var EventUtil = function(){
//#include(event-util.js).
return EventUtil;
}
//#include(browser-info.js)
.return BrowserInfo;
}
var EventUtil = function(){
//#include(event-util.js)
.return EventUtil;
}
下蝲地址
]]>
* 按需装蝲?br>* 理依赖Q避免依赖的保露、扩散，提高cd的易用性?br>* 执行环境的隔，避免名称冲突?br>
cd装蝲
动态装载类库是按需装蝲的基QJSI的装载方式有三种Q即时同步装载（可能dQ、gq同步装载（需要编译）、异步装载。这里先演示一下最单的方式Q即时同步导入：CZQ重写一下jQuery的hello world?br>
….
<!-- 加入引导脚本 -->
<script src="../scripts/boot.js"></script>
….
<script>
//导入jQuery?函数
$import("org.jquery.$");
//使用jQuery?函数
$(document).ready(function(){
alert("Hello World");
});
</script>
….
<!-- 加入引导脚本 -->
<script src="../scripts/boot.js"></script>
….
<script>
//导入jQuery?函数
$import("org.jquery.$");
//使用jQuery?函数
$(document).ready(function(){
alert("Hello World");
});
</script>
….
q是默认的导入方式，当能Q如果网l环境不好，q可能生阻塞问题。所以JSI2开始增加了仍外两种导入模式。gq同步导入，异步导入。具体用法请查看文章后面的导入函数参考?br>
依赖理
Java可以随意的用第三方cdQ可是JavaScript却没那么q运Q随着cd的丰富，烦杂的依赖关pd可能的命名冲H将使得cd的发展越来越困难。程序的易用性也大打折扣?br>命名冲突的危险无形的增加你大脑的负担Q随着使用的类库的增加Q暴露的依赖也将随之增加Q这是复杂度陡增的极大祸根，得系l越来越复杂Q越来越难以控制。潜在的问题来多Q防不胜阌Ӏ?br>
所以，我们cd的开发者将自己cd的依赖终l在自己手中Q避免依赖扩散，以提高类库的易用性?br>
Z演示一下JSI的依赖管理，我们~写一个复杂一点的cdQ类似Windows XP文g览器左侧的滑动折叠面板(d菜单)效果?br>
1.~写我们的折叠面板函敎ͼorg/xidea/example/display/effect.jsQ：
/**
* 滑动面板实现.
* 当指定元素可见时Q将其第一个子元素向上滑动臛_全被遮掩Q折叠）?br> * 当指定元素不可见Ӟ其W一个子元素向下滑动臛_全显C（展开Q?br> */
function slidePanel(panel){
panel = $(panel);
if(panel.style.display=='none'){
//调用Scriptaculous Effect的具体滑动展开实现
new Effect.SlideDown(panel);
}else{
//调用Scriptaculous Effect的具体滑动闭合实?/span>
new Effect.SlideUp(panel);
}
}
* 滑动面板实现.
* 当指定元素可见时Q将其第一个子元素向上滑动臛_全被遮掩Q折叠）?br> * 当指定元素不可见Ӟ其W一个子元素向下滑动臛_全显C（展开Q?br> */
function slidePanel(panel){
panel = $(panel);
if(panel.style.display=='none'){
//调用Scriptaculous Effect的具体滑动展开实现
new Effect.SlideDown(panel);
}else{
//调用Scriptaculous Effect的具体滑动闭合实?/span>
new Effect.SlideUp(panel);
}
}
2.~写包定义脚本，x其内容及依赖Qorg/xidea/example/display/__$package.jsQ：
//dslidePanelQ滑动面板控Ӟ函数
this.addScript("effect.js","slidePanel",null);
//leffect.js脚本d对us.aculo.script包中effects.js脚本的装载后依赖this.addScriptDependence("effect.js",
"us/aculo/script/effects.js",false);
//leffect.js脚本d对net.conio.prototype包中$函数的装载后依赖this.addScriptObjectDependence("effect.js",
"net.conio.prototype.$",false);
this.addScript("effect.js","slidePanel",null);
//leffect.js脚本d对us.aculo.script包中effects.js脚本的装载后依赖this.addScriptDependence("effect.js",
"us/aculo/script/effects.js",false);
//leffect.js脚本d对net.conio.prototype包中$函数的装载后依赖this.addScriptObjectDependence("effect.js",
"net.conio.prototype.$",false);
3.HTML代码Q?
<html>
<head>
<title>重用aculo Effect脚本实例</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>
<head>
<title>重用aculo Effect脚本实例</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')"q个事g函数在我们点击面板标题时触发，能后会调用Scriptaculous Effect的具体实现去实现我们需要的滑动折叠功能?br>
q个效果只是八行代码Q比较简单，但是它用CScriptaculous EffectcdQScriptaculous Effect又简接用CPrototypecdQ所以，传统方式使用hq是比较复杂Q有一堆脚本需要导入prototype.jsQeffects.jsQbuilder.jsQ更加痛苦的是这些脚本的导入q要遵守一定的序?br>
但是Q如果我们用JSI 明确x了这些依赖，那么使用hq单多了，只一个import可以完全搞定?br> 此外 q里q有一个额外的好处Q我们类库中依赖的那些脚本，q不会对外部保露Q在面上是不可见的Q也是_q些依赖完全l结在刚才编写的cd中，不必担心使用q些cd带来的名U污染问题?br>
环境隔离
众所周知Q?Scriptaculous所依赖的Prototype库与jQuery存在冲突。所以同时用比较困难?br> 下面的例子，我们在同一个页面上同时使用Scriptaculous?jQuery cd。示范一下JSI隔离冲突功能?br>CZ面Qhello-jquery-aculo.htmlQ：<html>
<head>
<title>Hello jQuery And Scriptaculous</title>
<!-- 加入引导脚本 -->
<script src="../scripts/boot.js"></script>
<script>
//导入jQuery
$import("org.jquery.$");
//导入Scriptaculous
$import("us.aculo.script.Effect");
$(document).ready(function(){
//使用jQueryd一D问候语
$("<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高亮昄一下刚才添加的内容
new Effect.Highlight('helloBox');
}).click(function(){
//当用户单击该内容后用jQuery实现渐出
$('#helloBox').fadeOut();
});
});
</script>
</head>
<body>
<p>文装蝲后，jQuery在后面d一D问候语Qƈ使用Scriptaculous高亮昄QHighlightQ；在鼠标点d在用jQuery渐出QfadeOutQ?/span></p>
</body>
</html>
<head>
<title>Hello jQuery And Scriptaculous</title>
<!-- 加入引导脚本 -->
<script src="../scripts/boot.js"></script>
<script>
//导入jQuery
$import("org.jquery.$");
//导入Scriptaculous
$import("us.aculo.script.Effect");
$(document).ready(function(){
//使用jQueryd一D问候语
$("<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高亮昄一下刚才添加的内容
new Effect.Highlight('helloBox');
}).click(function(){
//当用户单击该内容后用jQuery实现渐出
$('#helloBox').fadeOut();
});
});
</script>
</head>
<body>
<p>文装蝲后，jQuery在后面d一D问候语Qƈ使用Scriptaculous高亮昄QHighlightQ；在鼠标点d在用jQuery渐出QfadeOutQ?/span></p>
</body>
</html>
其他话题
JSIlg模型Q?br> 面装饰引擎Q用于装饰朴素html元素的框Ӟ实现零脚本代码的web富客L~程Q更多细节请讉Kjsi官方|站?br>参考：
脚本导入函数脚本导入函数是JSI唯一的一个在面上用的pȝ函数?br>
function $import(path, callbackOrLazyLoad, target )
path cd路径
callbackOrLazyLoad 可选参?如果其gؓ函数Q表C异步导入模式；如果其gؓ真，表示延迟同步导入模式Q否则ؓx同步导入Q默认如此）?br> Target 可选参?默认为全局变量,所以说,q种情况{h于直接声明的全局变量)Q指定导入容器?br>名词解释Q?br> * 自由脚本
通过<script>标记引入或直接编写的脚本Q我们不在用JSIntegration之后Q仍旧用script src导入JSI启动脚本(boot.js)之外的脚本?br> * 托管脚本
通过$import函数直接或间接加载的脚本。这些脚本将在一个独立的执行上下文装载，不会污染全局环境?br> * 脚本依赖
若要使用AQ需要导入BQ则A依赖B?br>A、B可以是脚本文Ӟ也可以是脚本文g中的某个脚本元素?br> * cd使用?br>cd的用者，您只需再页面上书写脚本Q导入类库，~写自己的简单脚本，一般情况请不要~写js文gQ那是类库开发者做的事.
* cd开发?br>在此框架下开发出方便实用的脚本库Q您需要编写一些通用脚本Q同时设|脚本依赖，做到Mc?函数Q导入即可运行?br>
]]>