Kitjs，(http://xueduany.github.com/KitJs)，是我2011年底离开淘宝UED后开始的一套HTML5前端小部件库。最初的目的主要是在手机上使用HTML页面的交互组件。就像它的字面意思一样，Kit的愿景是成为一套小巧实用的组件，可以直接使用，也可以轻松开发两次。后来由于项目的扩展和组件数量的扩大，也加入了对PC浏览器(IE6、FF、chrome core系列等)的支持。)，不再局限于原来的手机开发领域，开始正式走向全平台。所以最近按照jsdoc规范对所有的原始模块都更新了API文档，逐渐开源给大家使用。

先放一个Kitjs家谱，让大家对kit有一个基本的了解

怎么样？看的时候是不是有点晕？其实看着就头晕。简单来说，kitjs类似于dojo，它分为

1.以kit.js为核心，围绕kit扩展的js工具模块，类似于dojo

2.命名空间kit.ui下的组件模块，类似于dijit

3.还有一个类似dojoX的实验室项目，这里没有标注。

在KitJs的组件中，有一些我之前在博客中发布过的优秀组件，比如

音频播放器

iphone效果选项卡

组合框

3D相册

日历

LightBox

等等

还有一些比较好的组件还在内部使用或者在开发中，会逐步发布给大家使用。所有KitJs组件都符合以下愿景

1.更贴近中国用户的使用体验

2.更接近中国开发者的评论和文档

3.一定要提供市场上现有组件没有提供的、大家都需要的功能。

4.细粒度的模块很容易组装和合并成一个更大的小部件

在KitJs工具模块中，所有代码都是基于Class Prototype进行扩展的，实例化的全局对象提供给开发人员使用。所有类名大写，所有实例对象小写，kit以$字符开头，方便与其他类库分开。同时在工具模块中，所有的方法都是用函数编程的风格编写的，和Kissy一样。同时，还为习惯用jQuery开发的学生提供了Kit。加载suger.js后，可以像jQuery一样使用kitjs编写代码。方法名称和用法与jQuery完全相同。下面是dom ready事件的一个例子。

副本代码如下：美元套件。$(函数($) {$(')。项目'，$('#gallery '))。每个(函数(){$(this))。CSS({ top : $ kit . math . rand($(' # gallery ')。innerHeight()) 'px '，左： $ kit . math . rand($(' # gallery ')。innerWidth())“px”，“-web kit-transform”:“rotate($ kit . math . rand(-40，40)' deg)' })；}).pushStack('a.kitLightBox ')。每个(函数(){ new $ kit . ui . LightBox({ El : this })。init()；});});

基特。$是kitjs的dom ready事件，匿名方法的参数$传递$kit。$方法来实现他的内部闭包，这样就可以直接使用$来代替$kit。$(相当于jQuery的$ selector)放在内部闭包中，这样闭包中的所有代码都和jQuery没有区别。它还促进了JQuery代码和KitJs代码的相互移植。

本文是KITJS框架使用指南系列的第一篇。它只简单介绍了kitjs，接下来我们将详细了解这个优秀的前端UI框架。