JSCL 简介

一、设计思想

• 开放性框架，轻松集成常见的第三方 js 和 ajax 代码。（不重复发明轮子，只做别人没做的或做的不好的）
• 无侵入性，不需要修改第三方代码，即可直接使用在 JSCL 里。（向 Spring 学习）
• 充分利用 javascript 语言本身的特点。比如用 js 文件做配置文件，而不是用 xml ；用 URI 来描述组件包路径，而不采用类 java 格式。（轻量级，高性能，简单实现）

二、定义

• 应用开发者：使用 JSCL 进行应用系统开发的人。
• 组件开发者：为 JSCL 添加组件或引入第三方组件的人。
• JSCL 的目标用户：应用开发者和组件开发者。

二、特色

1、轻松管理和使用复杂依赖关系的 js 组件

JSCL 让应用开发者只关心自己要用哪些组件，而不必知道这个组件依赖哪些文件（依赖关系由组件开发者事先定义）。

例如：menu组件需要导入menu.js，并且依赖common.js、poslib.js、scrollbutton.js，还需要根据风格定义引入相应的css文件

一般使用方式和 JSCL 方式比较如下：

缺省风格，一般方式

< script  type ="text/javascript"  src ="common.js" ></ script >
< script  type ="text/javascript"  src ="poslib.js" ></ script >
< script  type ="text/javascript"  src ="scrollbutton.js" ></ script >
< script  type ="text/javascript"  src ="menu.js" ></ script >
< link  rel ="stylesheet"  href ="theme/default/public.css"  type ="text/css"   />
< link  rel ="stylesheet"  href ="theme/default/scrollbutton.css"  type ="text/css"   />
< link  rel ="stylesheet"  href ="theme/default/menu.css"  type ="text/css"   />

JSCL 方式

< script  type ="text/javascript"  src ="jscl/jscl.js" ></ script >
< script  type ="text/javascript" > ...
jscl.loadModule("jscl/gui/menu");
</ script >  

Office风格，一般方式

< script  type ="text/javascript"  src ="common.js" ></ script >
< script  type ="text/javascript"  src ="poslib.js" ></ script >
< script  type ="text/javascript"  src ="scrollbutton.js" ></ script >
< script  type ="text/javascript"  src ="menu.js" ></ script >
< link  rel ="stylesheet"  href ="theme/office/public.css"  type ="text/css"   />
< link  rel ="stylesheet"  href ="theme/office/scrollbutton.css"  type ="text/css"   />
< link  rel ="stylesheet"  href ="theme/office/menu.css"  type ="text/css"   />

JSCL 方式

< script  type ="text/javascript"  src ="jscl/jscl.js" ></ script >
< script  type ="text/javascript" > ...
jscl.theme.set("office");
jscl.loadModule("jscl/gui/menu");
</ script >

 

2、标签化组件使用

在 JSCL 标准组件体系中，学习 dojo 的设计思路，优化 WebFX 方式的组件 Setup 过程。

在html代码中以标签形式声明可视化组件，JSCL可以自动完成组件对象的创建和绑定。

< div  jsclType ="tabpane"  id ="tabpane1" >
  < div  jsclType ="tabpage" >
   < span  jsclType ="tab" > tab1 </ span >
 ......
  </ div >
  < div  jsclType ="tabpage" >
   < span  jsclType ="tab" > tab2 </ span >
 ......
  </ div >
</ div >

或

< jscl:tabpane  id ="tabpane1" >
  < jscl:tabpage >
   < jscl:tab > tab1 </ jscl:tab >
 ......
  </ jscl:tabpage >
   < jscl:tabpage >
  < jscl:tab > tab1 </ jscl:tab >
 ......
  </ jscl:tabpage >
</ jscl:tabpane >

三、组织结构

模块：

JSCL 核心模块：提供模块加载方法支持
JSCL 服务器支持：提供 Ajax 框架连接接口。
JSCL Scope: 提供 application、window 等 JavaScript 生命周期对象容器。
JSCL 事件库：提供跨浏览器事件处理机制和自定义事件处理支持。与服务器支持模块联合，实现服务器端事件注册侦听框架。
JSCL 标准组件体系：jscl内置的面向对象的js组件体系。
JSCL 扩展组件支持：对已有第三方js组件的支持：

• 兼容 cvicse-commons 标签库的 HTML 原型工具
• dojo 组件支持
• JQuery 组件支持
• YUI-Ext 组件支持
• WebFx 系列组件支持