采用JSI封装、集成第三方类库

采用JSI封装、集成第三方类库2011-03-06Java的成功，离不开它那个庞大的类库，不单是sun的类库，很多细节的实现都取自第三方（如xml解析采用Apache的实现）。

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去实现我们需要的滑动折叠功能。