JSI是一个简单、无侵入(被管理的脚本无需考虑JSI的存在)的脚本管理框架, JSI的出现,可以做到如下几点。
- 按需装载。
- 管理依赖,避免依赖的保露、扩散,提高类库的易用性。
- 执行环境的隔离,避免名称冲突。
类库装载<o:p></o:p>
动态装载类库是按需装载的基础,JSI的装载方式有三种:即时同步装载(可能阻塞)、延迟同步装载(需要编译)、异步装载。这里先演示一下最简单的方式,即时同步导入:
示例:重写一下jQuery的hello world。
xml 代码
- ….
- <script src="../scripts/boot.js">>
- ….
- <script>
- //导入jQuery的$函数
- $import("org.jquery.$");
- //使用jQuery的$函数
- $(document).ready(function(){
- alert("Hello World");
- });
- <script>
- ….
这是默认的导入方式,当能,如果网络环境不好,这可能产生阻塞问题。所以JSI2开始增加了仍外两种导入模式。延迟同步导入,异步导入。具体用法请查看文章后面的导入函数参考。
<o:p></o:p>
依赖管理<o:p></o:p>
Java可以随意的使用第三方类库,可是JavaScript却没那么幸运,随着类库的丰富,烦杂的依赖关系和可能的命名冲突将使得类库的发展越来越困难。程序的易用性也将大打折扣。<o:p></o:p>
命名冲突的危险无形的增加你大脑的负担;随着使用的类库的增加,暴露的依赖也将随之增加,这是复杂度陡增的极大祸根,将使得系统越来越复杂,越来越难以控制。潜在的问题越来越多,防不胜防。<o:p></o:p>
所以,我们建议类库的开发者将自己类库的依赖终结在自己手中,避免依赖扩散,以提高类库的易用性。
为了演示一下JSI的依赖管理,我们编写一个复杂一点的类库:类似Windows XP文件浏览器左侧的滑动折叠面板(任务菜单)效果。
编写我们的折叠面板函数(org/xidea/example/display/effect.js):
js 代码
-
-
-
-
-
- function slidePanel(panel){
- panel = $(panel);
- if(panel.style.display=='none'){
-
- new Effect.SlideDown(panel);
- }else{
-
- new Effect.SlideUp(panel);
- }
- }
编写包定义脚本,申明其内容及依赖(org/xidea/example/display/__$package.js):
js 代码
-
- this.addScript("effect.js","slidePanel",null);
-
- "us/aculo/script/effects.js",false);
-
- "net.conio.prototype.$",false)
HTML代码:
xml 代码
- <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>text1li>
- <li>text2li>
- <li>text3li>
- <ul>
- <div>
- <body>
- <html>
onclick="slidePanel('menu_block1')"这个事件函数将在我们点击面板标题时触发,能后会调用Scriptaculous Effect的具体实现去实现我们需要的滑动折叠功能。
<o:p> </o:p>
这个效果只是八行代码,比较简单,但是它用到了Scriptaculous Effect类库,Scriptaculous Effect又简接用到了Prototype类库,所以,传统方式使用起来还是比较复杂,有一堆脚本需要导入prototype.js,effects.js,builder.js,更加痛苦的是这些脚本的导入还要遵守一定的顺序。
但是,如果我们使用JSI 明确申明了这些依赖,那么使用起来就简单多了,只一个import就可以完全搞定。<o:p></o:p>
此外 这里还有一个额外的好处,我们类库中依赖的那些脚本,并不会对外部保露,在页面上是不可见的,也就是说,这些依赖完全终结在刚才编写的类库中,不必担心使用这些类库带来的名称污染问题。<o:p></o:p>
环境隔离<o:p></o:p>
众所周知, Scriptaculous所依赖的Prototype库与jQuery存在冲突。所以同时使用比较困难。
下面的例子,我们将在同一个页面上同时使用Scriptaculous和 jQuery 类库。示范一下JSI隔离冲突功能。
示例页面(hello-jquery-aculo.html):
xml 代码
- <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>
其他话题<o:p></o:p>
JSI组件模型:
页面装饰引擎:用于装饰朴素html元素的框架,实现零脚本代码的web富客户端编程,更多细节请访问jsi官方网站。
<o:p> </o:p>
<o:p> </o:p>
参考:<o:p></o:p>
脚本导入函数<o:p></o:p>
脚本导入函数是JSI唯一的一个在页面上使用的系统函数。
function $import(path, callbackOrLazyLoad, target )
path 类库路径
callbackOrLazyLoad 可选参数,如果其值为函数,表示异步导入模式;如果其值为真,表示延迟同步导入模式,否则为即时同步导入(默认如此)。
Target 可选参数(默认为全局变量,所以说,这种情况等价于直接声明的全局变量),指定导入容器。
分享到:
相关推荐
【WebSphere入门教程】 WebSphere是IBM开发的一款企业级应用服务器,它提供了全面的软件服务,用于构建、部署和管理基于互联网的业务应用程序。作为全球广泛使用的中间件平台,WebSphere在电子商务领域扮演着至关...
2. **SMIL动画**:SVG支持Synchronized Multimedia Integration Language (SMIL)进行基本的动画效果,如`<animate>`和`<animateTransform>`元素。 3. **JavaScript库**:如Snap.svg、d3.js等库提供了更高级的SVG动画...
6. **动画和交互性**:SVG支持SMIL(Synchronized Multimedia Integration Language)和其他JavaScript库,可以创建出具有动态效果和用户交互的图形,增强用户体验。 7. **动态创建图形**:开发者可以通过...
《NET+Web服务入门经典+C#:C#编程篇》是一本专为初学者设计的IT教程,旨在帮助读者快速掌握.NET框架下的Web服务开发以及C#编程技术。本资源包含一系列深入浅出的章节,涵盖了从基础概念到实际应用的广泛内容。 ...
[Packt Publishing] Laravel 应用开发技巧教程 (英文版) [Packt Publishing] Laravel Application Development Cookbook (E-Book) ☆ 图书概要:☆ Over 90 recipes to learn all the key aspects of Laravel, ...
本套视频教程“IDEA快速使用入门视频1-5”旨在帮助初学者掌握IDEA的基础操作,通过五个部分的讲解,使用户能够迅速上手并提高开发效率。 1. **简介**: 在这一部分,视频会介绍IDEA的特点和优势,包括其智能代码...
【Kettle 8.2 数据仓库零基础快速入门】是一个针对初学者的全面教程,旨在帮助没有相关背景的学员快速掌握Pentaho Data Integration(Kettle)工具在数据仓库领域的应用。Kettle是一款强大的ETL(提取、转换、加载)...
本教程将带你了解Web服务的基本概念、工作原理,以及如何通过简单的例子进行开发和调用,帮助你快速入门并避开常见问题。 一、Web服务基本概念 1. **SOAP(Simple Object Access Protocol)**:Web服务主要采用...
2. "kettle入门指南.rar":包含了一系列的入门教程和实例,适合初学者快速上手。 3. "Kettle.rar":可能包含了更多Kettle的相关资料和示例,可供深入研究。 4. "kettle转换数据的步骤,还算全面.rar":此文件提供...
https://bitbucket.org/chromiumembedded/cef教程-https://bitbucket.org/chromiumembedded/cef/wiki/教程常规用法-https://bitbucket.org/chromiumembedded/cef/wiki/ GeneralUsage Master Build快速入门-...
入门 首先,运行开发服务器: npm run dev # or yarn dev 用浏览器打开以查看结果。 您可以通过修改pages/index.js来开始编辑页面。 页面在您编辑文件时自动更新。 学到更多 要了解有关Next.js的更多信息,请查看...
教程可能涵盖诸如服务发布、客户端连接、数据序列化等主题,是初学者的入门佳选。 2. **微服务架构入门**:随着微服务架构的普及,了解如何在微服务环境中使用 Zeroc ICE 至关重要。这部分可能会介绍如何利用 ICE ...
3. **Getting Started教程**: 这通常是Cesium入门的重要部分,涵盖了基本的设置、加载地形、添加标记、控制视图、加载3D模型等内容。案例数据AGI_HQ.kmz可能包含这些示例的实现。 4. **3D地形和建筑物**: Cesium...
1. **在线教程**:W3School、MDN Web Docs等网站提供了丰富的SVG教程,适合初学者入门。 2. **书籍**:《SVG Mastery》、《SVG Essentials》等专业书籍深入讲解SVG技术。 3. **课程**:Coursera、Udemy等平台有专门...
4. **JavaScript学习资源**: 如果项目是一个教学资源,那么可能包含一系列教程或者示例代码,帮助初学者理解JavaScript的基本语法和常用函数。 5. **个人作品集**: 另一种可能是,这是一位开发者展示其JavaScript...
【标题】"hello-cypress-with-beto:柏树上的一个小Hello World和一个好朋友" 提示我们这是一个关于Cypress测试框架的教程项目,其中可能包含了基本的Cypress使用示例,用友好的方式来引导初学者入门。Cypress是一款...
- **入门教程**:提供一个简单的入门示例来帮助新手快速上手。 - **JasperReports** - **报表生成**:介绍如何使用JasperReports在Pentaho中生成报表。 - **JavaScript** - **脚本应用**:教授如何在Pentaho中...