`
jindw
  • 浏览: 508786 次
  • 性别: Icon_minigender_1
  • 来自: 初到北京
社区版块
存档分类
最新评论

海纳百川 有容乃大――采用JSI封装、集成第三方类库

    博客分类：
  • JSI
JSI脚本prototypeCSSjQuery 
阅读更多
Java的成功，离不开它那个庞大的类库，不单是sun的类库，很多细节的实现都取自第三方（如xml解析采用Apache的实现）。

如前言所述，我们暂时不大算编写丰富的公共API，但是我们可以集成其他成熟的类库，同时隔离他们的依赖，隔离各个脚本的执行上下文，消除命名冲突的危险。

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

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

1。集成Scriptaculous类库：

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

2。编写我们的折叠面板函数（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. }  

3。编写包定义脚本（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);  


4。编写我们的HTML代码：
html 代码
 
  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"></script>  
  6.   <script>...  
  7.     $import("org.xidea.display.slidePanel");  
  8.   </script>  
  9.   </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>text1</li>  
  18.         <li>text2</li>  
  19.         <li>text3</li>  
  20.       </ul>  
  21.     </div>  
  22. </body>  
  23. </html>  

onclick="slidePanel('menu_block1')"这个事件函数将在我们点击面板标题时触发，能后会调用Scriptaculous Effect的具体实现去实现我们需要的滑动折叠功能。


 

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


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

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

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

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

xml 代码
 
  1. <html>  
  2.   <head>   
  3.   <title>重用aculo Effect脚本实例</title>  
  4.   <link rel="stylesheet" type="text/css" href="/styles/default.css" />  
  5.   <!- -  
  6.   <script src="/scripts/boot.js"></s cript>  
  7.   <script>  
  8.     $import("org.xidea.display.slidePanel");  
  9.   </script>  
  10.    -- >  
  11. <script src="/scripts/net/conio/prototype/v1_5/prototype.js">  
  12. </script>  
  13. <script src="/scripts/us/aculo/script/v1_7/effects.js">  
  14. </script>  
  15. <script src="/scripts/us/aculo/script/v1_7/builder.js">  
  16. </script>  
  17. <script src="/scripts/org/xidea/display/effect.js">  
  18. </script>  
  19.   </head>  
  20.   <body>  
  21.     <div class="menu_header"  
  22.         onclick="slidePanel('menu_block1')">  
  23.         面板 1  
  24.     </div>  
  25.     <div class="menu_block" id="menu_block1">  
  26.       <ul>  
  27.         <li>text1</li>  
  28.         <li>text2</li>  
  29.         <li>text3</li>  
  30.       </ul>  
  31.     </div>  
  32. </body>  
  33. </html>  


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

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

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

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

使用JSIntegration唯一多出的负担就是编写包定义文件，不过想想这种定义文件可是一劳永逸的（以后就不需要每次导入脚本的时候都小心翼翼的判 断那个脚本先导入那个后导入，有那些间接使用到的类库需要导入，等等），而且有了包结构后对于代码组织、重用，以及文档的编写阅读，都将非常有利。
分享到：
| 百花齐放 日月同辉――采用JSI解决不同类 ...
评论
发表评论

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

相关推荐

    JSI, java脚本开发工具

    JSI 拥有一套完善有效的模块隔离机制，方便重用、组织第三方脚本，避免它们带来的命名污染问题。JSI极力追求简单，不加入特殊语法，被管理的脚本无框架依赖。 开发便捷 * 自动隔离 不用自己编写闭包隔离脚本冲突...

    JSI-full-2.0

    9. **scripts**：JavaScript脚本文件，可能包含项目的核心逻辑、模块或者第三方库。通过分析这些脚本，我们可以深入理解JSI-full-2.0的工作原理。 10. **template**：模板文件，可能用于生成动态内容，例如HTML模板...

    海尔液晶电源 0094001224B JSI-190419-050 JSI-220409-050原理图.pdf

    根据提供的信息，我们可以了解到这份文档是关于海尔液晶电视电源板（型号：0094001224B JSI-190419-050 JSI-220409-050）的原理图。这份原理图详细地展示了电源板的内部电路结构、元件布局及其连接方式等关键信息。...

    JSI-GAN:JSI-GAN的官方存储库（于AAAI 2020接受）

    Soo Ye Kim *，Jihyong Oh *和Munchurl Kim“ JSI-GAN：基于GAN的联合超分辨率和逆色调映射，以及针对UHD HDR视频的像素级特定任务滤波器”，第三十四届AAAI人工会议情报，2020年。（*均等贡献） 要求 我们的代码是...

    海尔液晶电源背光板 0094001274E JSI-320411 原理图.pdf

    ### 海尔液晶电视电源背光板0094001274E JSI-320411原理图解析 #### 概述 本文将详细解析海尔液晶电视电源背光板0094001274E JSI-320411原理图中的关键元件及其功能、电路设计思路与工作原理，帮助读者更好地理解该...

    js插件类库组织与管理(基于asp.net管理)

    在开发大规模的网站时，JavaScript插件类库的组织和管理至关重要，尤其当一个页面中需要引入多个JS库和相关样式时。随着插件数量的增加，若不进行良好的组织，页面将充斥着大量的script和link标签，这不仅会增加页面...

    jsi-modules:用jsi进行模块学习

    JSI通常作为一个库被集成到其他应用程序中，使得这些程序能够理解和执行JavaScript代码。它支持ECMAScript标准，包括ES6的许多特性，比如类、箭头函数和模块。在JSI中，你可以创建和操作对象，执行函数，以及处理...

    using使用JSI为React Native提供快速简便的多线程-C/C++开发

    react-native-multithreading using使用JSI的React Native的快速简便的多线程处理。 安装npm install react-native-multithreading npx pod-i react-native-multithreading using使用JSI进行React Native的快速简便...

    轻量系统JS-UI框架子系统

    - **声明式编程**：借鉴React等现代前端框架的理念，采用声明式语法定义UI，使代码更易读，维护成本更低。 - **跨平台兼容**：支持在不同硬件平台上运行，确保应用能在OpenHarmony的各类设备上保持一致性。 **2. ...

    自定义三种方式进度条

    第三种方式是滑块式进度条。这种进度条常用于音视频播放器中，用户可以通过拖动滑块来调整播放进度。我们可以利用Canvas绘制一条长条，并在其中添加一个小滑块，根据进度位置移动滑块。为了提供反馈，滑块的触摸事件...

    jsi-wikifier-api

    JSI Wikifier OpenAPI规范 JSI Wikifier API文档存储库。链接文档： : SwaggerUI： ：//jsi-eubusinessgraph.github.io/jsi-wikifier-api/swagger-ui/ 看完整规格： JSON YAML 警告：仅当Travis CI完成部署后，以上...

    eccl-jsi.github.io

    eccl-jsi.github.io

    jsish:Jsi是一个小型的C嵌入式javascript解释器，具有紧密编织的Web和DB支持

    Jsi是带有内置websocket-server，sqlite和C -extensibility的javascript -ish解释器。 | | | 快速开始下载适用于 / 的二进制文件： wget ...

    HDT-JSI01

    【HDT-JSI01】项目是一个以JavaScript为核心的开发实践，它可能是一个开源项目或者教程，因为通常在编程领域，这种命名格式常用于版本控制或学习资源。JavaScript是一种广泛使用的编程语言，尤其在网络开发中扮演着...

    i88fm-playlist:独立 88.1 FM 与 Grooveshark 的集成

    我主要是为了 Grooveshark 集成而制作它，但也作为学习一堆东西的借口： Node.js和Express MongoDB和猫鼬 Zurb Foundation ：已经相当了解 Bootstrap，我想尝试一个不同的前端框架，它可以响应移动、平板电脑和...

    java推荐算法源码-jsi:Java空间索引

    JSI空间索引特意限制了特征，在少数事情上做得很好。 它特别快。 该代码是开源的，并在 2.1 或更高版本下发布。 用法 强烈建议首先查看位于 的 jsi-examples 存储库。 简而言之，您需要像这样初始化 RTree： // ...

    javascript sfs

    javascript sfs多个关键字请用空格分隔，最多填写5个。点击右侧Tag快速添加

    react-native-multithreading:using使用JSI为React Native提供快速简便的多线程

    :thread: 使用JSI的React Native的快速简便的多线程处理。 安装 npm install react-native-multithreading npx pod-install 需要包括的react-native-reanimated版本。 您可以自己打补丁，也可以等到它发布后再...

    一个高效的JavaScript压缩工具下载集合

    在安全性方面，推荐使用TBCompressor（YUI Compressor），因为它基于文本的压缩方式相对安全，而且在JSI 1.1 a8及集成的第三方类库测试中未发现异常。另外，知名的jQuery框架也使用了类似的压缩算法，这进一步证明了...

    Java Spatial Index.zip

    Java Spatial Index（JSI）是一种在Java环境中实现的空间索引技术，主要用于管理和高效查询具有空间属性的数据。在地理信息系统（GIS）、数据库系统、地图应用等领域，这种索引机制是不可或缺的，因为它能帮助快速...

Magicbox
Global site tag (gtag.js) - Google Analytics