一、设计思想

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

• 搜狐网站诚聘Java、PHP和C++工程师
• 快来参加7月17日在成都举行的SOA中国技术论坛
• JavaEye问答大赛开始了！ 从6月23日 至 7月6日，奖品丰厚 ！
• Oracle专区上线，有Oracle最新文章，重要下载及知识库等精彩内容，欢迎访问。
• 北京: 千橡集团暨校内网诚聘软件研发工程师

很早就接触 javascript 了，2003年时才开始在项目中真正进行 js 代码开发。当时手中攒了大量技巧性代码，又有公司积累的代码。通过使用发现，js 代码非常零散，也没有统一的代码风格和编写规范，许多代码在一起使用时容易发生冲突，从而萌生了开发一个 js 代码管理工具的想法。

2004年一个项目的需求分析阶段，需要编写界面原型，于是利用这次机会编写了 JSL （java scripr library）。当时正好在51js上看到了 jsvm，并被其思想所吸引。但由于时间原因，当时来不及把项目需要的 js 代码和 css 风格都移到 jsvm 上使用，而且 jsvm 比较难学习，不能用来让需求分析人员编写界面原型。但 jsvm 启发了我，并很快写出了 JSL 的核心 _import  函数。但后来因为项目开发比较紧张，JSL 也就止于原型工具阶段，没有什么大的发展。

随着公司内部技术升级，构件库越来越完善。Ajax技术浪潮的来临，我忽然觉得 JSL 应该可以做的更好，所以我开始了 JSCL （JavaScript Component Library） 的构思。

• 搜狐网站诚聘Java、PHP和C++工程师
• Oracle专区上线，有Oracle最新文章，重要下载及知识库等精彩内容，欢迎访问。
• 北京: 千橡集团暨校内网诚聘软件研发工程师
• 快来参加7月17日在成都举行的SOA中国技术论坛
• JavaEye问答大赛开始了！ 从6月23日 至 7月6日，奖品丰厚 ！