寒风

一、设计思想

• 开放性框架，轻松集成常见的第三方 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 系列组件支持