JSI组件模型是一种用来装饰简单html元素的框架，使用简单的xml标记，标识其装饰行为，比如将一个普通的input装饰成一个日期输入控件，将一 个html ul标记装饰成菜单或树，将一个textarea装饰成一个代码语法高亮显示区域，或一个wysiwyg html编辑器。
JSI启动后将自动检查decorator标记，构建层次结构，自动做相关类的寻找、导入和装饰操作；实现零脚本代码的web富客户端编程。

代码示例：

1. 日期选择器 (DatePicker):
   
   
   1. <d:datepicker>  
   2.   <input type="text" name="test2" />  
   3. </d:datepicker>  
   
   
2. 编辑器示例 (Editor):
   
   
   1. <d:editor>  
   2.   <textarea name='editorText'>This is some <strong>sample text</strong>. You are using <a  
   3.     href="http://www.fckeditor.net/">FCKeditor</a>.</textarea>  
   4. </d:editor>  
   
   
3. Spinner控件（Spinner 类似window时间日期管理中，年份调节的控件）:
   
   
   
   1. <d:spinner start='0' end='8' step='2'>  
   2.   <input type="text" name="test2" value='0' />  
   3. </d:spinner>  
   
   
4. 客户端包含(Include):
   
   
   
   1. <d:include url='menu.xml' xslt="menu.xsl"></d:include>  
   
   
5. 代码语法高亮显示控件(Code):
   
   
   
   1. <d:code language="js">  
   2.  <textarea>alert(‘Hello World’)</textarea>  
   3. </d:code>  
   
   
6. 标签页控件(TabBox参照xul tabbox标签):
   
   
   1. <d:tabbox>  
   2.   <d:tabs>  
   3.     <d:tab>tab1</d:tab>  
   4.     <d:tab>tab2</d:tab>  
   5.     <d:tab>tab3</d:tab>  
   6.   </d:tabs>  
   7.   <d:tabpanels>  
   8.     <d:tabpanel>content1</d:tabpanel>  
   9.     <d:tabpanel>content2</d:tabpanel>  
   10.     <d:tabpanel>content3</d:tabpanel>  
   11.   </d:tabpanels>  
   12. </d:tabbox>  
   
   
   
7. 综合示例:

来一个复杂一点的完整的例子,以日期选择控件的演示页面为例
页面上有: 标签页装饰器（TabBox….）、源代码高亮显示装饰器（Code）、日期选择装饰器（DatePicker）、包含装饰器（Include）：

装饰结果：

云想衣裳花想容－－JSI组件模型介绍（二）已经发布，那里有装饰过程及其原理的介绍：
http://www.iteye.com/topic/71425

非常酷的想法，只是采用xml做标记，性能上如何？我认为json是否是更好的选择？不过这个点子真的很不错，楼主的JS功力令人佩服。

xml标记随html一起被解析，唯一多出的开销就是查找页面的装饰元素，曾经试过一个数M的html文件，也就是几百毫秒，所以，这些一般不会成为瓶颈。

我采用xml标记而非脚本语言，主要是考虑标记语言代码更简单，编写文档也比较方便

此外标记语言解析比较简单，比较适合可视化工具的开发。

楼主牛人啊

说句心里话,佩服jindw的语言表述啊, 每个标题都不一样. jsi 我最看好的就是装饰模式了

和我们公司的js前台框架有点类似，不过感觉比你的稍直观些
拿那个TabBox为例，只要在页面加入

<div tt.impl=TabBanana 还有其它一些属性></div>
就实现了你例子中TabBox效果，和jsptaglib有些类似，呵呵

几百毫秒也是不小的开销了....

几百毫秒是说一个测试用的上兆的大文件，一般网页不会有这么大，自然也就不会怎么耗时。

建议写一个 Dom Query 引擎加快查找装饰元素的速度，可以参考一下 Ext 中的 DomQuery

谢谢你的建议，以后抽空看看。
框架的性能优化是一定会做的，无赖分身无术。还是先把欠缺的东西完善起来。

刚才做了一下装饰引擎的性能测试(通过new Date方式计算脚本运行时间)。

以新版javaeye主页为例（64,160字节，也算是大文件了），查找装饰元素需要的时间为：
IE: 0     毫秒。
FF: 50-70 毫秒。