jsi项目分两部分∶框架内核(编辑修改稿)

jsi项目分两部分∶框架内核(编辑修改稿)内容摘要：

$import()。 /script /head body div class=menu_header onclick=slidePanel(39。 block139。 ) 面板 1 /div div class=menu_block id=block1 ul litext1/li litext2/li litext3/li /ul /div /body /html onclick=slidePanel(39。 block139。 )这个事件 函数将 在我们点击面板标题时触发，能后会调用 Scriptaculous Effect 的具体实现 去 实现我们需要的滑动折叠功能。 壁立千仞 无欲则刚 ――控 制依赖 Java 可以随意的使用第三方类库，可是 JavaScript 却 没那么幸运， 随着类库的丰富，烦杂的依赖关系 和 可能的命名 冲突 将使得类库的发展越来越困难。 程序的易用性也将大打折扣。 命名冲突的危险无形的增加你大脑的负担 ； 随着使用的类库的增加，暴露 的依赖也将随之增加， 这是复杂度 陡 增的极大祸根， 将 使得 系统越来越复杂，越来越难以控制。 潜在的问题越来越多，防不胜防。 JSI 的出现，可以解决上述问题， 我们建议类库的开发者 将自己类库的依赖终结在自己 手中 ，避免依赖扩散 ， 以 提高类库的易用性。 同样使用上面的例子，假如 我们想 抛开 JSI， 实现同样的功能，那我们的页面代码将是 （类库代码不用改动） ： html head title重用 aculo Effect脚本实例 /title link rel=stylesheet type=text/css href=/styles/ / ! Alpha 用户指南 Email:jindw Website: script $import()。 /script script src=/scripts//conio/prototype/v1_5/ /script script src=/scripts/us/aculo/script/v1_7/ /script script src=/scripts/us/aculo/script/v1_7/ /script script src=/scripts/example/ /script /head body div class=menu_header onclick=slidePanel(39。 menu_block139。 ) 面板 1 /div div class=menu_block id=menu_block1 ul litext1/li litext2/li litext3/li /ul /div /body /html 这个例子的 html 代码明显比上面的复杂了， 一堆堆 的 script 标签， 而且还是 有序的 ； 还出现在页面上 ， 重构起来也极其麻烦。 可以看出， JSI 的加入可以 让类库更加易用， html 代码更为简洁，最终用户已经 不必 关心所用类库的依赖了。 JSI 中每一个脚本有一个单独的执行上下文。 各个脚本顶部变量你可以随便使用，不必担心不同脚本中的命名冲突， 不会污染全局变量空间 ，这种方式可以用于解决某些类库间变量冲突的问题 （如 jQuery 和 Prototype 的 $函数）。 我们甚至可以做到 同一个页面上间接 加载同一种类库的两个不同版本，不相互影响。 使用 JSI 后， 很多细节我们可以在包中封装掉，不需要告诉类库使用者太多。 大大增加类库的易用性。 同时，类库封装的支持可以让我们在第三方库的基础上 轻松的按自己的喜好编写自己的类库，同时避免依赖扩散造成的复杂度增加。 使用 JSI 唯一多出的负担就是编写包定义文件，不过想想这种定义文件可是一劳永逸的（以后就不需要每次导入脚本的时候都小心翼翼的判断那个脚本先导入那个后导入，有那些 间接使用到的类库 需要导入，等等），而且有了包结构后对于代码组织、重用，以及文档的编写阅读，都将非常有利。 柳暗花明又一村―― 解决阻塞问题 何为阻塞。 浏览器使用 XMLHttpRequest 同步获取资源时将导致浏览器 停止响应用 Alpha 用户指南 Email:jindw Website: 户事件 、停止页面重画操作。 感觉就像死机似的 ，用户体验 极 差。 目前为止，所有宣称可以按需装载的框架都有这个毛病。 所以，大家都不敢使用真正的安需装载，大都采用一起打包的方式，把所 有 可能使用到的脚本都打包在一个文件中。 而所谓的按需装载只是一个口号罢了。 JSI2 开始着手解决这个问题，有两种解决方案： 异步导入 、 延迟同步导入。 i. 异步导入 这种方式 用户体验最好，但是因为其异步特征，处理起来比较麻烦。 用法： 将导入函数 的第二个参数设置为某个函数（回调函数），那么这个函数将使用异步方式执行，并且当导入完成之后，回调该函数。 参数为同步时的返回值（导入对象或对象表） 以第一个例子中 hello world 为例，若使用异步方式， html 代码应改为： html head titleTest Hello Word/title script $import(, function(sayHello){ sayHello()。 })。 /script /head body /body /html ii. 延迟同步导入 JSI 通过动态预装载功能实现的一种同步获取资源的方法，虽然也是同步，但没有阻塞，可以算时兼顾易用性和用户体验的机决 方案。 缺点 是 有一定延迟，当前脚本标签中不可用。 依然 以第一个例子中 hello world 为例，若使用 延迟同步 方式， html 代码应改为： html head titleTest Hello Word/title script $import(， true)。 /script /head body /body /html Alpha 用户指南 Email:jindw Website: 云想衣裳花想容－－ JSI的 组件 模型 用于装饰朴素 html 元素的框架，使用简单的 xml 标记，标识 其 装饰行为，比如将一个普通的 input 装饰成一个日期输入控件 ，将一个 html ul 标记 装饰 成 菜单或树， 将一个 textarea 装饰成一个代码语法高亮显示区域，或一个 wysiwyg html 编辑器。 JSI 启动后将自动检查 decorator 标记， 构建层次结构， 自 动做相关类的寻找、导入和 装饰 操作 ； 实现零脚本代码的 web 富客户端编程。 示例 : 1. 日期选择器 (DatePicker): d:datepicker input type=text name=test2 / /d:datepicker 2. 编辑器示例 (Editor): d:editor textarea name=39。 editorText39。 This is some strongsample text/strong. You are using a href= /d:editor 3. Spinner 控件（ Spinner 类似 window 时间日期管理中，年份调节的控件） : d:spinner start=39。 039。 end=39。 839。 step=39。 239。 input type=text name=test2 value=39。 039。 / /d:spinner 4. 客户端包含 (Include): d:include url=39。 39。 xslt=/d:include 5. 代码语法高亮显示控件 (Code): d:code language=js textareaalert(„Hello World‟)/textarea /d:code 6. 标签页控件 (TabBox 参照 xul tabbox 标签 ): d:tabbox d:tabs d:tabtab1/d:tab d:tabtab2/d:tab d:tabtab3/d:tab /d:tabs d:tabpanels Alpha 用户指南 Email:jindw Website: d:tabpanelcontent1/d:tabpanel d:tabpanelcontent2/d:tabpanel d:tabpanelcontent3/d:tabpanel /d:tabpanels /d:tabbox 7. 综合示例 : 来一个复杂一点的完整的例子 ,以日期选择控件 的演示页面为例 页面上有 : 标签页装饰器 （ TabBox… .） 、源代码高亮显示装饰器 （ Code） 、日期选择装饰器 （ DatePicker） 、包 含装饰器 （ Include） ： ?xml version= encoding=utf8? !DOCTYPE html PUBLIC //W3C//DTD XHTML Strict//EN html xmlns= xmlns:d= xml:lang=zh_CN lang=zh_CN head titleDatePicker 示例 /title /head body h2DatePicker 示例 /h2 ! 开始标签页装饰器 d:tabbox d:tabs d:tab效果 /d:tab d:tab代码 /d:tab /d:tabs d:tabpanels d:tabpanel ! 开始日期装饰器 (内嵌式 ) d:datepicker type=39。 grid39。 input type=text name=test1 / /d:datepicker ! 开始日期装饰器 (弹出式 ) d:datepicker input type=text name=test2 / /d:datepicker /d:tabpanel d:tabpanel ! 开始代码高亮显示 d:code language=xml textarea ! 开始日期装饰器 (内嵌式 ) Alpha 用户指南 Email:jindw Website: d:datepicker type=39。 grid39。 input type=text name=test1 / /d:datepicker ! 开始日期装饰器 (弹出式 ) d:datepicker input type=text name=test2 / /d:datepicker/textarea /d:code /d:tabpanel /d:tabpanels /d:tabbox select style=marginleft:120pxoption弹出的 datepicker 可覆盖 IE select/option/select hr / ! 开始 Include装饰器 ,包含装饰器菜单 d:include url=39。 39。 xslt=/d:include /body /html 该 装饰器演示见： 3 集成实战 集成 jQuery 实例 jQuery 是一个快速 ， 简 练 的 JavaScript 工具箱它能够让你以简单的方式来操作HTML 元素 ， 处理事件 ， 实现特效并为 Web 页面添加 Ajax 交互。 jQuery 设计用于改变你编写 JavaScript 的方式。 本实例介绍一下这个类库如何与本框架集成。 i. 设置 jQuery 包： 我们将 jQuery 脚本放置在如下位置 /scripts//jquery/v1_1_2/，声明 jQuery的包定义文件 ： (,[39。 $39。 ,39。 jQuery39。 ])。 这样 jQuery 所在的包为 ，但是让用户死死记住一个类库的版本号码，不是一个好的做法，为此，。