云想衣裳花想容－－JSI组件模型介绍（二）

装饰引擎简介：

系统默认的装饰引擎为：org.xidea.decorator.DecoratorEngine。
JSI装载后，将做如下操作：

1. 判断有无装饰器命名空间声明（xmlns:d= "http://www.xidea.org/taglib/decorator"）
2. 若有，将在文档装载结束后，启动装饰引擎，初始化当前可用的装饰提供者表。（装饰提供者是一个JavaScript包，在注册这种装饰包时可同时指定他的别名，别名*表示默认包）
3. 遍历当前文档，凡是该命名空间的节点，都被看作需要装饰的元素。若当前文档存在装饰元素，启用遮罩（关机效果），页面将不可操作（仍可查阅）。
4. 查找装饰元素对应的装饰类（通过tagName判断类名），采用异步方式动态装载这些装饰器类（不会装载到全局空间），并更新当前进度信息，同时设置装饰器之间的关系（parent,children）。
5. 以深度遍历的方式遍历这些节点，注册组件（以后可以通过$JSI.getComponent函数获取装饰器对象），依次执行他们的before操作，和decorate操作。
6. 完成装饰，取消遮罩，页面进入可用状态。

装饰器规范简介：

装饰器指的是所有拥有decorate成员方法的类。一般来说，可将一组装饰器归为同一个包中（太复杂的装饰器，可将具体逻辑放置在其他包中），能后在配置文件中定义装饰包。
scripts/config.js   $JSI.addDecoratorProvider("org.xidea.decorator","xidea","*");

装饰器类包含两个方法before、docorate分别在遍历前（子节点未装饰）和遍历后（子节点装饰完成）调用。

同时，装饰引擎遍历时还将注入如下三个属性：

1. parent：父装饰器
2. children：子装饰器集合
3. attributes：装饰器属性集对象（只有一个成员函数：get(attrName)  ）

JSI现有装饰器集合简介

目前JSI2最高版本2.0预览版 (2007-04-16)包含如下装饰器：

1. DatePicker
   日期选择控件，参照xul datepicker标签，支持弹出方式(默认值 type='pop')，和内嵌式(type='grid')
2. Editor
   编辑器控件，参照xul editor标签
3. Spinner
   Spinner控件（window时间日期管理中，年份调节的控件），参照backbase 的 Spinner标签
4. TabBox、Tabs、Tab、TabPanels、TabPanel
   TabBox(标签页)控件，参照xul tabbox标签
5.  Code
   代码语法高亮显示控件，参照SyntaxHighlighter的显示风格
6. Include
   片断包含标签，支持xpath选取文档片断，支持xslt转换
   

这些装饰器的演示见：
http://www.xidea.org/project/jsi/decorator/index.html

目前JSI自带的装饰器不够丰富，而且都还是初级阶段，不够完善。现在发布的这些装饰器，主要是为了演示JSI的工作方式，编码风格，希望能吸引第三方团队、公司在这个基础上开发出自己的更加实用的装饰器集合。

JSI及其装饰引擎采用LGPL协议。可以商业应用，当能，更希望能开源。

目前就我一人之力，开发一套完整的装饰器，尚需时日，这次将这个半成品拿出来演示，主要是为了展示一下jsd的风格，希望能吸引其他开发者，共同参与这个工程，有兴趣丰富JS自带I装饰器集合的网友，请msn与我联系：jindw◎xidea。org

评论

3 楼 fourfire 2007-05-24  

今天强试了一下，强

2 楼 lxchit 2007-04-26  

很不错的实现方式，记得有个利用class来查找被渲染的组建，这样是不是就可以减少你的标签对html的污染呢？
另外的问题是，感觉这个框架只是渲染前端，有没有考虑如何同Server通信？

1 楼 D-tune 2007-04-18  

你的DEMO老是显示不正常，另外在什么地方下载工程？