Kitjs前端UI框架简介与核心特性解析

Kitjs框架背景与全平台支持

Kitjs（http://xueduany.github.com/KitJs）是作者于2011年底离开淘宝UED后独立开发的一套HTML5前端widget库。最初设计主要面向手机端HTML页面的交互组件，正如其名“Kit”所寓意的，它致力于成为一套小巧、实用且易于二次开发的组件集合。随着项目规模扩大和组件数量增加，Kitjs逐步扩展了对PC端浏览器（包括IE6+、Firefox、Chrome内核系列等）的支持，不再局限于移动端，正式迈向全平台兼容。近期，作者已按照jsdoc规范更新了所有模块的API文档，并逐步开源供社区使用。

首先展示Kitjs的架构族谱，帮助读者建立对Kitjs整体结构的基本认知。

Kitjs架构体系与组件分类

面对复杂的架构图，读者可能会感到眼花缭乱，作者本人也曾有此感受。简单来说，Kitjs的架构设计与Dojo类似，主要划分为几个核心部分。

首先是基于kit.js核心的JS工具模块，这些模块围绕kit进行扩展，功能定位类似于Dojo。

其次是位于kit.ui命名空间下的组件模块，其作用类似于Dojo中的dijit。

此外，还存在类似DojoX的实验室项目，用于探索前沿功能，但在当前架构图中未明确标注。

核心组件库与设计愿景

Kitjs包含部分作者此前在博客中分享过的优秀组件，例如：

音频播放器组件。

具备iPhone风格效果的选项卡组件。

comboBox下拉选择框组件。

3D相册展示组件。

日历组件。

LightBox灯箱效果组件。

以及其他多种实用组件。

此外，还有部分更优秀的组件正在内部使用或开发中，未来将逐步开放给用户。所有Kitjs组件均遵循以下设计愿景：

更贴合中文用户的使用习惯与交互感受。

提供更符合中文开发者阅读习惯的注释和文档说明。

提供市面现有组件所缺乏但实际开发中急需的功能。

保持足够细粒度的模块划分，方便开发者组装和合并成更大的widget。

API规范与jQuery兼容特性

在Kitjs的工具模块中，所有代码均基于Class Prototype扩展实现，并提供实例化后的全局对象供开发者直接使用。类命名遵循首字母大写规范，实例对象则首字母小写。kit以$字符开头，旨在便于与其他类库区分。同时，工具模块中的方法采用函数编程风格，这与Kissy框架类似。对于习惯jQuery开发的开发者，Kitjs提供了sugar.js加载器，使得代码书写方式与jQuery完全一致，包括方法名和使用习惯。以下以DOM ready事件为例进行说明。

$kit.$(function($) {
$('.item', $('#gallery')).each(function() {
$(this).css({
top : $kit.math.rand($('#gallery').innerHeight()) + 'px',
left : $kit.math.rand($('#gallery').innerWidth()) + 'px',
'-webkit-transform' : 'rotate(' + $kit.math.rand(-40, 40) + 'deg)'
});
}).pushStack('a.kitLightBox').each(function() {
new $kit.ui.LightBox({
el : this
}).init();
});
});

$kit.$是Kitjs提供的DOM ready事件接口。其参数为匿名方法，该方法的参数$实际上是将$kit.$方法传递给了内部闭包。这使得在闭包内部可以直接使用$来代替$kit.$，其效果等同于jQuery的$选择器。这种设计使得闭包内的代码逻辑与jQuery完全一致，从而方便jQuery代码与Kitjs代码之间的相互移植。

本文作为KITJS框架使用指南系列的第一篇，仅对Kitjs进行了简要介绍。后续文章将深入探讨这款优秀前端UI框架的其他特性与使用方法。