群组首页 → Web前端 → JSI专栏 → 知识库 → JavaScript Integration 入门教材
原创作者: jindw   阅读:3332次   评论:0条   更新时间:2011-05-26    

JSI是一个简单、无侵入（被管理的脚本无需考虑JSI的存在）的脚本管理框架， JSI的出现，可以做到如下几点。

  • 按需装载。
  • 管理依赖，避免依赖的保露、扩散，提高类库的易用性。
  • 执行环境的隔离，避免名称冲突。

类库装载

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

示例：重写一下jQuery的hello world。

xml 代码
 
  1. ….  
  2. <script src="../scripts/boot.js">>  
  3. ….  
  4. <script>  
  5. //导入jQuery的$函数  
  6. $import("org.jquery.$");  
  7. //使用jQuery的$函数  
  8. $(document).ready(function(){  
  9.   alert("Hello World");  
  10.  });  
  11. <script>  
  12. ….  

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

依赖管理

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

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

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

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

  编写我们的折叠面板函数（org/xidea/example/display/effect.js）：

js 代码
 
  1. /** 
  2.  * 滑动面板实现. 
  3.  * 当指定元素可见时，将其第一个子元素向上滑动至完全被遮掩（折叠）。 
  4.  * 当指定元素不可见时，将其第一个子元素向下滑动至完全显示（展开）。 
  5.  */  
  6. function slidePanel(panel){  
  7.   panel = $(panel); 
  8.   if(panel.style.display=='none'){ 
  9.     //调用Scriptaculous Effect的具体滑动展开实现 
  10.     new Effect.SlideDown(panel); 
  11.   }else{ 
  12.     //调用Scriptaculous Effect的具体滑动闭合实现 
  13.     new Effect.SlideUp(panel); 
  14.   } 
  15. }  
   

编写包定义脚本，申明其内容及依赖（org/xidea/example/display/__$package.js）：

js 代码
 
  1. //添加slidePanel（滑动面板控制）函数  
  2. this.addScript("effect.js","slidePanel",null);  
  3. //给effect.js脚本添加对us.aculo.script包中effects.js脚本的装载后依赖this.addScriptDependence("effect.js",  
  4. "us/aculo/script/effects.js",false);  
  5. //给effect.js脚本添加对net.conio.prototype包中$函数的装载后依赖this.addScriptObjectDependence("effect.js",  
  6. "net.conio.prototype.$",false)  

 HTML代码：

xml 代码
 
  1. <html>  
  2.   <head>   
  3.   <title>重用aculo Effect脚本实例title>  
  4.   <link rel="stylesheet" type="text/css" href="/styles/default.css" />  
  5.   <script src="/scripts/boot.js"><!--</span-->script>  
  6.   <script>  
  7.     $import("org.xidea.display.slidePanel");  
  8.   <!--</span-->script>  
  9.   <!--</span-->head>  
  10.   <body>  
  11.     <div class="menu_header"  
  12.         onclick="slidePanel('menu_block1')">  
  13.         面板 1  
  14.     <div>  
  15.     <div class="menu_block" id="menu_block1">  
  16.       <ul>  
  17.         <li>text1li>  
  18.         <li>text2li>  
  19.         <li>text3li>  
  20.       <ul>  
  21.     <div>  
  22. <body>  
  23. <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）：

xml 代码
 
  1. <html>  
  2. <head>  
  3. <title>Hello jQuery And Scriptaculous<!--</span-->title>  
  4. <!-- 加入引导脚本 -->  
  5. <script src="../scripts/boot.js"><!--</span-->script>  
  6. <script>  
  7. //导入jQuery  
  8. $import("org.jquery.$");  
  9. //导入Scriptaculous  
  10. $import("us.aculo.script.Effect");  
  11.   
  12. $(document).ready(function(){  
  13.   //使用jQuery添加一段问候语  
  14.   $("<p id='helloBox' style='background:#0F0;text-align:center;font-size:40px;cursor:pointer;'>Hello jQuery And Scriptaculous<!--</span-->p>")  
  15.     .appendTo('body');  
  16.   $('#helloBox').ready(function(){  
  17.     //使用Scriptaculous高亮显示一下刚才添加的内容  
  18.     new Effect.Highlight('helloBox');  
  19.   }).click(function(){  
  20.     //当用户单击该内容后使用jQuery实现渐出  
  21.     $('#helloBox').fadeOut();  
  22.   });  
  23.  });  
  24. <!--</span-->script>  
  25. <!--</span-->head>  
  26. <body>  
  27. <p>文档装载后，jQuery将在后面添加一段问候语；并使用Scriptaculous高亮显示（Highlight）；在鼠标点击后在使用jQuery渐出（fadeOut）。<!--</span-->p>  
  28. <!--</span-->body>  
  29. <!--</span-->html>  

其他话题

JSI组件模型：

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

 

 

参考：

脚本导入函数

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

  function $import(path, callbackOrLazyLoad, target )

      path 类库路径

      callbackOrLazyLoad 可选参数,如果其值为函数，表示异步导入模式；如果其值为真，表示延迟同步导入模式，否则为即时同步导入（默认如此）。

      Target 可选参数(默认为全局变量,所以说,这种情况等价于直接声明的全局变量)，指定导入容器。
评论 共 0 条 请登录后发表评论

发表评论

您还没有登录,请您登录后再发表评论

文章信息

知识库: JSI专栏
  • 由jindw在2007-04-15创建
  • 由jindw在2011-05-26更新
Global site tag (gtag.js) - Google Analytics