BlogJava-jindw的blog-随笔分类-JSIhttp://www.blogjava.net/jindw/category/22381.html关注：<a href="http://www.xidea.org/project/jsi/index.html">JSI 无侵入的脚本管理框架</a>zh-cnThu, 12 Jul 2007 06:03:57 GMTThu, 12 Jul 2007 06:03:57 GMT60JSI2 新功能预告：类库导出支持、Ext集成http://www.blogjava.net/jindw/archive/2007/07/12/129802.html金大为金大为Thu, 12 Jul 2007 04:35:00 GMThttp://www.blogjava.net/jindw/archive/2007/07/12/129802.htmlhttp://www.blogjava.net/jindw/comments/129802.htmlhttp://www.blogjava.net/jindw/archive/2007/07/12/129802.html#Feedback0http://www.blogjava.net/jindw/comments/commentRss/129802.htmlhttp://www.blogjava.net/jindw/services/trackbacks/129802.html* 类库导出支持（完全脱离JSI环境）
    从JSI托管类库中，选择文件/对象集，导出为单一脚本文件，完全脱离JSI装载环境。
    也就是说，届时JSI不仅可以作为一个运行时的脚本管理框架，也可以当作一个部署时的脚本定制、打包工具。

    我是看Ext的定制工具后产生这个想法的，JSI的依赖定义API完全可以用作一个通用的脚本定制、打包工具的依赖描述语言。

* Ext集成（欢迎Ext用户加入）
    集成Ext，一方面可以弥补JSI组件的缺乏。另一方面可以优化Ext的装载延迟。
ext目前大小为：462,031字节，JSI2Alpha版的内核为35,140字节，不到Ext的十分之一（文件大小均在文本压缩之前记数）。集成Ext后，用户可以使用JSI导入函数，按需导入那些页面上直接使用到的元素。

一些细节的想法：
    初步决定使用jquery为其基础类库（prototype不必担心，JSI可以隔离脚本冲突，不会影响到prototype用户）。
    装载单元划分的两种想法：
    1.按照 http://extjs.com/download/build 中描述的定制模块划分（可能做些文件合并，避免零碎 件的装载开销）
    2.按照Ext内部包划分（Ext 下载包的packages目录下好像已经做了文件合并）

我个人还没用过Ext，非常希望有Ext用户合作。




金大为 2007-07-12 12:35 发表评论
]]>[导入]云想衣裳花想容－－JSI组件模型介绍（二）http://www.blogjava.net/jindw/archive/2007/06/27/126498.html金大为金大为Wed, 27 Jun 2007 02:35:00 GMThttp://www.blogjava.net/jindw/archive/2007/06/27/126498.htmlhttp://www.blogjava.net/jindw/comments/126498.htmlhttp://www.blogjava.net/jindw/archive/2007/06/27/126498.html#Feedback0http://www.blogjava.net/jindw/comments/commentRss/126498.htmlhttp://www.blogjava.net/jindw/services/trackbacks/126498.html装饰引擎简介： 系统默认的装饰引擎为：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

金大为 2007-06-27 10:35 发表评论
]]> [导入]云想衣裳花想容－－JSI组件模型介绍（一）http://www.blogjava.net/jindw/archive/2007/06/27/126492.html金大为金大为Wed, 27 Jun 2007 02:24:00 GMThttp://www.blogjava.net/jindw/archive/2007/06/27/126492.htmlhttp://www.blogjava.net/jindw/comments/126492.htmlhttp://www.blogjava.net/jindw/archive/2007/06/27/126492.html#Feedback0http://www.blogjava.net/jindw/comments/commentRss/126492.htmlhttp://www.blogjava.net/jindw/services/trackbacks/126492.html JSI启动后将自动检查decorator标记，构建层次结构，自动做相关类的寻找、导入和装饰操作；实现零脚本代码的web富客户端编程。

代码示例：

  1. 日期选择器 (DatePicker):

     <d:datepicker>  
          <input type="text" name="test2" />  
    </d:datepicker>   

  2. 编辑器示例 (Editor):

     <d:editor>  
          <textarea name='editorText'>This is some <strong>sample text</strong>. You are using <a  
            href="http://www.fckeditor.net/">FCKeditor</a>.</textarea>  
    </d:editor>   

  3. Spinner控件（Spinner 类似window时间日期管理中，年份调节的控件）:
     <d:spinner start='0' end='8' step='2'>  
          <input type="text" name="test2" value='0' />  
    </d:spinner>   

  4. 客户端包含(Include):
     <d:include url='menu.xml' xslt="menu.xsl"></d:include>    

  5. 代码语法高亮显示控件(Code):
     <d:code language="js">  
         <textarea>alert(‘Hello World’)</textarea>  
    </d:code>   

  6. 标签页控件(TabBox参照xul tabbox标签):

     <d:tabbox>  
          <d:tabs>  
            <d:tab>tab1</d:tab>  
            <d:tab>tab2</d:tab>  
            <d:tab>tab3</d:tab>  
          </d:tabs>  
          <d:tabpanels>  
            <d:tabpanel>content1</d:tabpanel>  
            <d:tabpanel>content2</d:tabpanel>  
            <d:tabpanel>content3</d:tabpanel>  
          </d:tabpanels>  
    </d:tabbox>   


  7. 综合示例:
来一个复杂一点的完整的例子,以日期选择控件的演示页面为例
页面上有: 标签页装饰器（TabBox….）、源代码高亮显示装饰器（Code）、日期选择装饰器（DatePicker）、包含装饰器（Include）
<?xml version="1.0" encoding="utf-8"?>  
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">  
<html xmlns="http://www.w3.org/1999/xhtml"  
  xmlns:d="http://www.xidea.org/taglib/decorator" xml:lang="zh_CN"  
  lang="zh_CN">  
<head>  
<script src="../scripts/boot.js"></script>  
<title>DatePicker 示例</title>  
</head>  
<body>  
<h2>DatePicker 示例</h2>  
<!-- 开始标签页装饰器 -->  
<d:tabbox>  
  <d:tabs>  
    <d:tab>效果</d:tab>  
    <d:tab>代码</d:tab>  
  </d:tabs>  
  <d:tabpanels>  
    <d:tabpanel>  
      <!-- 开始日期装饰器(内嵌式) -->  
      <d:datepicker type='grid'>  
        <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>  
      &lt;!-- 开始日期装饰器(内嵌式) --&gt;  
      &lt;d:datepicker type='grid'&gt;  
        &lt;input type="text" name="test1" /&gt;  
      &lt;/d:datepicker&gt;  
      &lt;!-- 开始日期装饰器(弹出式) --&gt;  
      &lt;d:datepicker&gt;  
        &lt;input type="text" name="test2" /&gt;  
      &lt;/d:datepicker&gt;</textarea>  
      </d:code>  
    </d:tabpanel>  
  </d:tabpanels>  
</d:tabbox>  
<select style="margin-left:120px"><option>弹出的datepicker 可覆盖IE select</option></select>  
<hr />  
<!-- 开始Include装饰器,包含装饰器菜单 -->  
<d:include url='menu.xml' xslt="menu.xsl"></d:include>  
</body>  
</html> 



装饰结果：






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




金大为 2007-06-27 10:24 发表评论
]]>[导入] 百花齐放 日月同辉――采用JSI解决不同类库间的冲突 http://www.blogjava.net/jindw/archive/2007/06/26/126241.html金大为金大为Mon, 25 Jun 2007 23:46:00 GMThttp://www.blogjava.net/jindw/archive/2007/06/26/126241.htmlhttp://www.blogjava.net/jindw/comments/126241.htmlhttp://www.blogjava.net/jindw/archive/2007/06/26/126241.html#Feedback0http://www.blogjava.net/jindw/comments/commentRss/126241.htmlhttp://www.blogjava.net/jindw/services/trackbacks/126241.html众所周知， Scriptaculous所依赖的Prototype库与jQuery存在冲突。所以同时使用比较困难。

JSI针对每一个装载的脚本都有完全独立的执行上下文。所以这个问题能在JSI上彻底解决。

下面的例子，我们将在同一个页面上同时使用Scriptaculous和 jQuery 类库。证实一下JSI隔离冲突功能。

示例页面（hello-jquery-aculo.html）：

<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(){ 
  //使用jQuery添加一段问候语 
  $("<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将在后面添加一段问候语；并使用Scriptaculous高亮显示（Highlight）；在鼠标点击后在使用jQuery渐出（fadeOut）。</p>  
</body>  
</html>  



金大为 2007-06-26 07:46 发表评论
]]>[导入] 海纳百川 有容乃大――采用JSI封装、集成第三方类库 http://www.blogjava.net/jindw/archive/2007/06/25/126038.html金大为金大为Mon, 25 Jun 2007 02:14:00 GMThttp://www.blogjava.net/jindw/archive/2007/06/25/126038.htmlhttp://www.blogjava.net/jindw/comments/126038.htmlhttp://www.blogjava.net/jindw/archive/2007/06/25/126038.html#Feedback0http://www.blogjava.net/jindw/comments/commentRss/126038.htmlhttp://www.blogjava.net/jindw/services/trackbacks/126038.html
JSI暂时不大算编写丰富的公共API，但是我们可以集成其他成熟的类库，同时隔离他们的依赖，隔离各个脚本的执行上下文，消除命名冲突的危险。

这里我们详细介绍一个复杂一点的实例：类似Windows XP文件浏览器左侧的滑动折叠面板(任务菜单)效果。

我们先集成Scriptaculous Effect类库，并且在这个基础上按我个人的习惯对一个面板折叠效果做一个简单的封装，展示框架的类库封装功能。

1。集成Scriptaculous类库：

这里我们不做过多介绍，详细情况请参考集成实战；我们发布的版本中已经把Scriptaculous放置于us.aculo.script包中，您可以把这些作为系统内置的类库使用。

2。编写我们的折叠面板函数（example/effect.js）：
/** 
 * 滑动面板实现. 
 * 当指定元素可见时，将其第一个子元素向上滑动至完全被遮掩（折叠）。 
 * 当指定元素不可见时，将其第一个子元素向下滑动至完全显示（展开）。 
 */  
function slidePanel(panel){  
  panel = $(panel);  
  if(panel.style.display=='none'){  
    //调用Scriptaculous Effect的具体滑动展开实现  
    new Effect.SlideDown(panel);  
  }else{  
    //调用Scriptaculous Effect的具体滑动闭合实现  
    new Effect.SlideUp(panel);  
  }  
}  

3。编写包定义脚本（example/__$package.js）：
//添加slidePanel（滑动面板控制）函数  
this.addScript("effect.js","slidePanel",null);  
//给effect.js脚本添加对us.aculo.script包中effects.js脚本的装载后依赖this.addScriptDependence("effect.js",  
"us/aculo/script/effects.js",false);

4。在网页上运用上面的类库：
<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')"这个事件函数将在我们点击面板标题时触发，能后会调用Scriptaculous Effect的具体实现去实现我们需要的滑动折叠功能。


 

壁立千仞 无欲则刚――控制依赖


java可以随意的使用第三方类库，可是JavaScript却没那么幸运，随着类库的丰富，烦杂的依赖关系和可能的命名冲突将使得类库的发展越来越困难。程序的易用性也将大打折扣。

命名冲突的危险无形的增加你大脑的负担；随着使用的类库的增加，暴露的依赖也将随之增加，这是复杂度陡增的极大祸根，将使得系统越来越复杂，越来越难以控制。潜在的问题越来越多，防不胜防。

JSI的出现，可以解决上述问题，我们建议类库的开发者将自己类库的依赖终结在自己手中，避免依赖扩散，以提高类库的易用性。

同样使用上面的例子，假如我们想抛开JSI，实现同样的功能，那我们的页面代码将是（类库代码不用改动）：

<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>  

这个例子的html代码明显比上面的复杂了，一堆堆的script标签，而且还是有序的；还出现在页面上，重构起来也极其麻烦。

可以看出，JSI的加入可以让类库更加易用，html代码更为简洁，最终用户已经不必关心所用类库的依赖了。

JSI中每一个脚本有一个单独的执行上下文。各个脚本顶部变量你可以随便使用，不必担心不同脚本中的命名冲突，不会污染全局变量空间，这种方式可以用于解 决某些类库间变量冲突的问题（如jQuery和Prototype的$函数）。我们甚至可以做到同一个页面上间接加载同一种类库的两个不同版本，不相互影 响。

使用JSI后，很多细节我们可以在包中封装掉，不需要告诉类库使用者太多。大大增加类库的易用性。同时，类库封装的支持可以让我们在第三方库的基础上轻松的按自己的喜好编写自己的类库，同时避免依赖扩散造成的复杂度增加。

使用JSIntegration唯一多出的负担就是编写包定义文件，不过想想这种定义文件可是一劳永逸的（以后就不需要每次导入脚本的时候都小心翼翼的判 断那个脚本先导入那个后导入，有那些间接使用到的类库需要导入，等等），而且有了包结构后对于代码组织、重用，以及文档的编写阅读，都将非常有利。

金大为 2007-06-25 10:14 发表评论
]]>[导入]脚本安需导入的三种模式的对比http://www.blogjava.net/jindw/archive/2007/06/25/126020.html金大为金大为Mon, 25 Jun 2007 01:24:00 GMThttp://www.blogjava.net/jindw/archive/2007/06/25/126020.htmlhttp://www.blogjava.net/jindw/comments/126020.htmlhttp://www.blogjava.net/jindw/archive/2007/06/25/126020.html#Feedback0http://www.blogjava.net/jindw/comments/commentRss/126020.htmlhttp://www.blogjava.net/jindw/services/trackbacks/126020.html何谓安需装载？
脚本程序一般都是下载后执行 ，当脚本库非常庞大时，一次性下载起来非常费时，传统的解决方式是，按功能模块把脚本写在不同的文件中，页面上手动加入script标签装载指定内容，但 是这有一些缺点，类库的使用者需要知道没个脚本之间的关系，顺序要求等等，而不可能要求每个类库使用者都对其非常熟悉，出错的可能性很大。于是很多框架开 始支持导入指令，想使用什么一个导入函数就完了，不必一堆堆的script文件，不用小心翼翼的关注着他们的依赖关系。

安需装载可分如下三种模式：

  • 即时同步按需装载（阻塞，JSI、JSVM、dojo）。
    最简单的按需装载实现，通过XMLHttpRequest同步装载脚本文件实现。问题是，浏览器使用这种方式同步获取资源时将导致浏览器阻塞：停止响应用户事件、停止页面重画操作。所以，虽然编程最为简单，但是用户体验最差。
  • 异步按需装载（无阻塞，JSI2.0+）。
    异步导入，不必多做解释，用户体验好，但是因为其异步特征，处理起来比较麻烦。
  • 延迟同步按需装载（无阻塞，JSI2.0+）。
    JSI通过动态预装载功能实现的一种同步获取资源的方法，虽然也是同步，但没有阻塞，可以算时兼顾易用性和用户体验的机决方按。缺点时    有一定延迟，当前脚本标签中不可用。

使用方法（JSI示例）

以一个代码语法着色程序为例：
类库位置：example/codedecorator/code.js
页面位置：example/xxx.html
  • 即时同步按需装载
    $import("example.codedecorator.Code");

    var code1 = new Code();
    code1.id     = "libCode";
    code1.decorate(); 

  • 异步按需装载
    $import("example.codedecorator.Code",function(Code){
         var code1 = new Code();
     code1.id     = "libCode";
     code1.decorate();
    }) 

  • 延迟同步按需装载（无阻塞，JSI2.0+）。
    <script>"../scripts/boot.js"></script>
    <script>
    $import(    "example.codedecorator.Code",true);
    </script>

    <script>
    var code1 = new Code();
    code1.id     = "libCode";
    code1.decorate();
    </script>

示例说明：

在线测试

http://jsintegration.sourceforge.net/example/code.html

http://www.xidea.org/project/jsi/example/code.html

参考：

JSI 导入函数： function $import(path, callbackOrLazyLoad, target )



金大为 2007-06-25 09:24 发表评论
]]>JSI2性能测试报告http://www.blogjava.net/jindw/archive/2007/06/22/125843.html金大为金大为Fri, 22 Jun 2007 07:01:00 GMThttp://www.blogjava.net/jindw/archive/2007/06/22/125843.htmlhttp://www.blogjava.net/jindw/comments/125843.htmlhttp://www.blogjava.net/jindw/archive/2007/06/22/125843.html#Feedback0http://www.blogjava.net/jindw/comments/commentRss/125843.htmlhttp://www.blogjava.net/jindw/services/trackbacks/125843.html装载效率测试
测试页面见：test/load-eff-test.html

为了测试结果更显客观，我选择了第三方类库的装载测试：
'com.yahoo.yui.*',
'net.conio.prototype.*',
'net.fckeditor.*',
'org.jquery.*',
'us.aculo.script.*'
共22个脚本文件（对于JSI来说还有诺干包定义文件）。

FF2:  
标记导入时间（原始方式）: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  



运行时间测试
测试脚本管理后对新能的影响,影响因素有：全局变量和局部变量的查找时间差异，eval的脚本和script标记直接插入的脚本的可能差异。（这 个测试不具有普遍性，这里我主要是测试了一下浏览器对局部变量的访问速度【JSI里面访问变量都是装载单元内的局部变量】，所以故意测试了大量局部变量访 问的操作）
测试页面见：test/runtime-eff-test.html

FF2：  
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和scriptTime

jsiTime:    576,    658,    688,    703,    611,    608,          
scriptTime: 706,    608,    562,    547,    655,    657,    


总结：
JSI的装载性能表现不错，完全不必计较。
托管代码的运行性能也没有太大区别，不过，因为。JSI托管脚本使用的变量基本都是装载单元内的局部变量（本地声明变量，或者外部依赖的引用或值拷贝），所以，对于FF这类局部变量比全局变量访问速度快不少的解释引擎，JSI托管脚本可以达到更好的运行效率。

有个奇怪的问题，JSI在装载类库时，与传统模式相比，肯定增加了些额外的运算，但是，貌似JSI的同步装载模式下，装载脚本的耗时比传统模式还少（IE 表现明显）？为何？
欢迎大家对这奇怪的现象提出自己的猜想，我稍后贴出我对此问题的看法^_^



金大为 2007-06-22 15:01 发表评论
]]>JSI2Alpha及JSA1beta 发布：http://www.blogjava.net/jindw/archive/2007/06/22/125829.html金大为金大为Fri, 22 Jun 2007 06:36:00 GMThttp://www.blogjava.net/jindw/archive/2007/06/22/125829.htmlhttp://www.blogjava.net/jindw/comments/125829.htmlhttp://www.blogjava.net/jindw/archive/2007/06/22/125829.html#Feedback0http://www.blogjava.net/jindw/comments/commentRss/125829.htmlhttp://www.blogjava.net/jindw/services/trackbacks/125829.html 

JSI简介：

JSI 是一个 开放的、无侵入的 脚本库管理框架，内核不提供任何具体功能，有一些功能子项目，如网页装饰引擎。

更多信息请查看：http://www.xidea.org/project/jsi/


JSA简介：
JSA最初是做JSI编译处理的一个小工具，现在也可以用来混淆、压缩脚本。支持swing和ant task两种工作方式。
可以通过webstart启动：启动JSA（允许访问文件系统），沙箱内运行（功能受限）




这次发布的JSI2Alpha相对于以前的预览版本，做了一次全面的重构；同时对API做了些简化。

目前JSI2的公开API有：


/* 导入函数 */  
$import(<string>path,<boolean|Function>callbackOrLazyLoad[可选参数],<Object>target[可选参数])  
  
/* 日志设置相关 */  
$JSI.setDefaultLogLevel(level)  
$JSI.setLogLevel(pathPattern,level)  
  
/* 装饰引擎相关函数 */  
$JSI.addDecoratorProvider(pkg,alias…) //添加装饰包.  
$JSI.decorate ( ) //准备执行装饰器任务,一般在配置文件（config.js）中调用.   
  
/* 用于包定义的Package成员函数，在__package__.js中调用（this指向当前package对象） */  
this.addScript(scriptPath,objectNames)//添加脚本及其声明的对象（函数、方法名）.   
this.add*Dependence(thisPath,targetPath,beforeLoad)//添加脚本依赖.  
this.setImplementation(realPackage)//设置具体实现包(当前包只是其别名，并无任何内容)。 

 


我们会尽量将JSI做成与具体功能无关（专著于脚本管理）。

对于js.*.*这个类库，做了些精简。
只保留下列元素

 

#js.html //保留这个包，因为这些实在太常用了。  
   * BrowserInfo  
   * EventUtil  
   * StyleUtil  
  
#js.util//保留这个包主要因为异步装载用到这些类库  
   * LoadTask  
   * Request  
   * ScriptLoadTask  
   * TaskQueue  

 

发布文件说明：
自该版本启，source目录将不再打包。
但是在scripts目录下新增boot-with-source.js文件，该文件中包含全部源代码的数据。
里面编码的源代码可以通过我们的文档工具查看。让大家习惯一下这个工具的使用：）

JSA1beta：增加了对JSI2的编译支持，同时对于普通脚本的压缩，也增加了一些功能：
1. ant task 增加多文件分组合并。
2. swing ui 修正文件编码的bug。

下载：
javaeye group: http://jsi.group.javaeye.com/shares
sourceforge: <系统最近好像有问题，我的文件一直没能上传成功,要过一段时间再说> 。。。。。



金大为 2007-06-22 14:36 发表评论
]]>JavaScript模板引擎测试，让我空欢喜一场：（http://www.blogjava.net/jindw/archive/2007/06/08/122871.html金大为金大为Fri, 08 Jun 2007 08:15:00 GMThttp://www.blogjava.net/jindw/archive/2007/06/08/122871.htmlhttp://www.blogjava.net/jindw/comments/122871.htmlhttp://www.blogjava.net/jindw/archive/2007/06/08/122871.html#Feedback0http://www.blogjava.net/jindw/comments/commentRss/122871.htmlhttp://www.blogjava.net/jindw/services/trackbacks/122871.html
太让我振奋了。原想，如果效率太低我就放弃这个项目，貌似结果：这个流行的js模板引擎，和我没做优化的xml模板引擎还有这么大的差距？？？

仔细检查一下，晕倒，测试模板数据搞错了：（

纠正过来，测试数据显示，trimpath比xml模板引擎要快好几倍：（

而且，如果模板内使用的循环次数越多，差距越大：（

比较扫兴的结果。
决定吧这个东西从jsi系统api中删除。

不过，感觉，虽然有这点差距，xml模板引擎还是可以作为一个备用选择。
基于js标记库，类el表达式，对于熟悉jsp2.0，jstl的程序员来说，还是比较易懂，扩展也相对简单（trimpath没怎么研究，或许是错的）。

下载测试：
（XML Template是从jsi中拉出来的，部分测试中没有用到的依赖没有包括进去）



金大为 2007-06-08 16:15 发表评论
]]>JSI2 API重构进展http://www.blogjava.net/jindw/archive/2007/06/07/122547.html金大为金大为Thu, 07 Jun 2007 03:48:00 GMThttp://www.blogjava.net/jindw/archive/2007/06/07/122547.htmlhttp://www.blogjava.net/jindw/comments/122547.htmlhttp://www.blogjava.net/jindw/archive/2007/06/07/122547.html#Feedback12http://www.blogjava.net/jindw/comments/commentRss/122547.htmlhttp://www.blogjava.net/jindw/services/trackbacks/122547.html为了jsi2 alpha的尽快发布，我对jsi 的系统api重构了一下，删除了一些不够成熟或者没有必要的api（将他们拖到org.xidea.* 命名空间下）。


更新（2007－6－9）
接上，移除了xml命名空间及其内容，装饰引擎。io包并入util了，移除了一些脚本，如xml 模板引擎、装饰引擎实现等。。。
基本上做到了功能无关了。
只剩下html包和util包。lang包这种语言兼容包不说。

现在的类库只有（数据拷贝自JSI jsdoc）：

#js.html //保留这个包，因为这些实在太常用了，
   * BrowserInfo
   //保留Decorator是因为装饰器初始化，还是受到点特别关照
   * Decorator
   * EventUtil
   * StyleUtil

#js.util//保留这个包主要因为异步装载用到这些类库
    * LoadTask
    * Request
    * ScriptLoadTask
    * TaskQueue


现在的类库只有（数据拷贝自JSI jsdoc）：

#js.html //保留这个包，因为这些实在太常用了，
   * BrowserInfo
   //保留Decorator是因为装饰器初始化，还是受到点特别关照
   * Decorator
   * EventUtil
   * StyleUtil

#js.util//保留这个包主要因为异步装载用到这些类库
   * LoadTask
   * Request
   * ScriptLoadTask
   * TaskQueue 

欢迎大家提出自己的看法：）

金大为 2007-06-07 11:48 发表评论
]]>JSI API之BrowserInfo、EventUtil讨论http://www.blogjava.net/jindw/archive/2007/06/06/122330.html金大为金大为Wed, 06 Jun 2007 04:17:00 GMThttp://www.blogjava.net/jindw/archive/2007/06/06/122330.htmlhttp://www.blogjava.net/jindw/comments/122330.htmlhttp://www.blogjava.net/jindw/archive/2007/06/06/122330.html#Feedback0http://www.blogjava.net/jindw/comments/commentRss/122330.htmlhttp://www.blogjava.net/jindw/services/trackbacks/122330.htmlJSI 自身提供一些常用API，数量极少，尽量以一种正式的风格提供，尽量回避争议。
有些是启动文件用到的，如任务队列支持，还有如装饰引擎直接用到的，如BrowserInfo、EventUtil、StyleUtil等。
对于启动文件中未直接用到的，如果风格的争议太大，都将剔除出去。

BrowserInfo对象：

/**
 * BrowserInfo 对象，用于判断浏览器的相关信息，如浏览器类型、quirks模式、客户端语言（简体中文？英语..未实现）、操作系统（未实现）等等。
 * @public
 */
var BrowserInfo = {
  isIE : falseChecker,
  isOpera : falseChecker,
  isGecko : falseChecker,
  isNetscape : falseChecker,
  isMozilla : falseChecker,
  isFirefox : falseChecker,
  isKhtml : falseChecker,
  isSafari : falseChecker,
  isKonqueror : falseChecker,
  isQuirks : function(){…}
};

其中最常用的要数 is<浏览器类别>（最小版本号码,最大版本号）。
此外，我还将BrowserInfo的函数拷贝到navigator对象上，这个有无必要呢？
//@Deprecated ???
for(var n in BrowserInfo){
  window.navigator[n] = BrowserInfo[n];
}

不同之处：

现在在浏览器判断上面，一般是用常量表示，比如isIE之类的，JSI的BrowserInfo使用函数，以便提供更强大更灵活的功能。

EventUtil
EventType 对象的成员函数有：

addListener(el, type, fn, cap)
removeListener(el, type, fn, cap)

add<Eventtype>Listener(element, listener, captrue)
如addLoadListener，addMousedownListener，addMouseoutListener    
remove<Eventtype>Listener(element, listener, captrue)
createEvent(type, canBubble, cancelable)
dispatchEvent(el, even)

其中: <Eventtype>代表一种事件类型。
W3C事件类型有：
var events = ['click','mousedown','mouseup','mouseover','mousemove','mouseout','load','unload','abort','error','select','change','submit','reset','focus','blur','resize','scroll'].
             concat(['DOMFocusIn','DOMFocusOut','DOMActivate']);


此外，还添加了一种事件类型：DOMLoad。就是mozilla的DOMContentLoaded事件，在Dom树构造完成但图片资源等可能未完成时触发。
对于这种事件类型， element,  captrue参数都将忽略。暂时只有添加函数，没有删除函数（有删除的必要吗？）。

不同之处：

这个事件处理函数集与其他常见方式的却别有：
  1. this支持。IE的attach方法添加的函数，运行时this指向window对象，JSI吧这点给纠正过来，与w3c的addEventListener行为一致。
  2. 事件类型直接体现在函数名中，这样有利于书写上的错误及早发现。
  3. 事件格式化，将事件的访问方式格式化为W3C的方式。
  4. 自动清理，这也不算不同吧，现在大多数JS库都提供这个功能，就是在离开页面时清理全部注册事件。但是这对一些单页程序是无效的（OPOA，本人也比较讨厌这种模式，呵呵），以后是否可以提供一个purgeElement函数，用于清理指定元素及其子元素的事件呢？
非常希望大家积极发表自己的看法，该修改就修改，如果争议太大，那么我将吧这些从系统API中移除。

程序下载

这个API也可以脱离JSI使用，只是，在编写的时候，因为有了JSI的保护，我使用了不少内部变量，为避免可能的冲突，做了如下处理。


var BrowserInfo = function(){
  //#include(browser-info.js).
  return BrowserInfo;
}

var EventUtil = function(){
  //#include(event-util.js).
  return EventUtil;
}

下载地址




金大为 2007-06-06 12:17 发表评论
]]>JavaScript Integration 体验教材http://www.blogjava.net/jindw/archive/2007/06/02/121484.html金大为金大为Sat, 02 Jun 2007 06:16:00 GMThttp://www.blogjava.net/jindw/archive/2007/06/02/121484.htmlhttp://www.blogjava.net/jindw/comments/121484.htmlhttp://www.blogjava.net/jindw/archive/2007/06/02/121484.html#Feedback0http://www.blogjava.net/jindw/comments/commentRss/121484.htmlhttp://www.blogjava.net/jindw/services/trackbacks/121484.html
* 按需装载。
* 管理依赖，避免依赖的保露、扩散，提高类库的易用性。
* 执行环境的隔离，避免名称冲突。

类库装载

    动态装载类库是按需装载的基础，JSI的装载方式有三种：即时同步装载（可能阻塞）、延迟同步装载（需要编译）、异步装载。这里先演示一下最简单的方式，即时同步导入：

示例：重写一下jQuery的hello world。
….
<!-- 加入引导脚本 -->
<script src="../scripts/boot.js"></script>
….
<script>
//导入jQuery的$函数
$import("org.jquery.$");
//使用jQuery的$函数
$(document).ready(function(){
  alert("Hello World");
 });
</script>
….

    这是默认的导入方式，当能，如果网络环境不好，这可能产生阻塞问题。所以JSI2开始增加了仍外两种导入模式。延迟同步导入，异步导入。具体用法请查看文章后面的导入函数参考。

依赖管理

    Java可以随意的使用第三方类库，可是JavaScript却没那么幸运，随着类库的丰富，烦杂的依赖关系和可能的命名冲突将使得类库的发展越来越困难。程序的易用性也将大打折扣。

    命名冲突的危险无形的增加你大脑的负担；随着使用的类库的增加，暴露的依赖也将随之增加，这是复杂度陡增的极大祸根，将使得系统越来越复杂，越来越难以控制。潜在的问题越来越多，防不胜防。

    所以，我们建议类库的开发者将自己类库的依赖终结在自己手中，避免依赖扩散，以提高类库的易用性。

    为了演示一下JSI的依赖管理，我们编写一个复杂一点的类库：类似Windows XP文件浏览器左侧的滑动折叠面板(任务菜单)效果。

1.编写我们的折叠面板函数（org/xidea/example/display/effect.js）：
/**
 * 滑动面板实现.
 * 当指定元素可见时，将其第一个子元素向上滑动至完全被遮掩（折叠）。
 * 当指定元素不可见时，将其第一个子元素向下滑动至完全显示（展开）。
 */
function slidePanel(panel){
  panel = $(panel);
  if(panel.style.display=='none'){
    //调用Scriptaculous Effect的具体滑动展开实现
    new Effect.SlideDown(panel);
  }else{
    //调用Scriptaculous Effect的具体滑动闭合实现
    new Effect.SlideUp(panel);
  }
}

2.编写包定义脚本，申明其内容及依赖（org/xidea/example/display/__$package.js）：
//添加slidePanel（滑动面板控制）函数
this.addScript("effect.js","slidePanel",null);
//给effect.js脚本添加对us.aculo.script包中effects.js脚本的装载后依赖this.addScriptDependence("effect.js",
"us/aculo/script/effects.js",false);
//给effect.js脚本添加对net.conio.prototype包中$函数的装载后依赖this.addScriptObjectDependence("effect.js",
"net.conio.prototype.$",false);

3.HTML代码：
<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')"这个事件函数将在我们点击面板标题时触发，能后会调用Scriptaculous Effect的具体实现去实现我们需要的滑动折叠功能。

    这个效果只是八行代码，比较简单，但是它用到了Scriptaculous Effect类库，Scriptaculous Effect又简接用到了Prototype类库，所以，传统方式使用起来还是比较复杂，有一堆脚本需要导入prototype.js，effects.js，builder.js，更加痛苦的是这些脚本的导入还要遵守一定的顺序。

    但是，如果我们使用JSI 明确申明了这些依赖，那么使用起来就简单多了，只一个import就可以完全搞定。
    此外 这里还有一个额外的好处，我们类库中依赖的那些脚本，并不会对外部保露，在页面上是不可见的，也就是说，这些依赖完全终结在刚才编写的类库中，不必担心使用这些类库带来的名称污染问题。


环境隔离

    众所周知， Scriptaculous所依赖的Prototype库与jQuery存在冲突。所以同时使用比较困难。
    下面的例子，我们将在同一个页面上同时使用Scriptaculous和 jQuery 类库。示范一下JSI隔离冲突功能。
示例页面（hello-jquery-aculo.html）：
<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(){
  //使用jQuery添加一段问候语
  $("<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将在后面添加一段问候语；并使用Scriptaculous高亮显示（Highlight）；在鼠标点击后在使用jQuery渐出（fadeOut）。</p>
</body>
</html>




其他话题

    JSI组件模型：
    页面装饰引擎：用于装饰朴素html元素的框架，实现零脚本代码的web富客户端编程，更多细节请访问jsi官方网站。


参考：

    脚本导入函数
    脚本导入函数是JSI唯一的一个在页面上使用的系统函数。

  function $import(path, callbackOrLazyLoad, target )
      path 类库路径
      callbackOrLazyLoad 可选参数,如果其值为函数，表示异步导入模式；如果其值为真，表示延迟同步导入模式，否则为即时同步导入（默认如此）。
      Target 可选参数(默认为全局变量,所以说,这种情况等价于直接声明的全局变量)，指定导入容器。
名词解释：
    * 自由脚本
通过<script>标记引入或直接编写的脚本，我们不建议在使用JSIntegration之后，仍旧使用script src导入JSI启动脚本(boot.js)之外的脚本。
    * 托管脚本
通过$import函数直接或间接加载的脚本。这些脚本将在一个独立的执行上下文装载，不会污染全局环境。
    * 脚本依赖
若要使用A，需要导入B，则A依赖B。
A、B可以是脚本文件，也可以是脚本文件中的某个脚本元素。
    * 类库使用者
类库的使用者，您只需再页面上书写脚本，导入类库，编写自己的简单脚本，一般情况请不要编写js文件，那是类库开发者做的事.
    * 类库开发者
在此框架下开发出方便实用的脚本库，您需要编写一些通用脚本，同时设置脚本依赖，做到任何类/函数，导入即可运行。




金大为 2007-06-02 14:16 发表评论
]]>