Javascript前端UI框架Kit使用指南之Kitjs簡介_javascript技巧

Kitjs，（http://xueduany.github.com/KitJs），是我2011年底，離開淘寶UED之後，自己搞起的一套HTML5的前端widget庫，原本的用途主攻手機端HTML頁面交互組件使用，正如其字面意思Kit一樣，願景是做一個嬌小，實用，既可以直接拿來用，也可以很方便做2次開發的一套組件。後來由於專案的越做越大，組件數的膨脹，也加入PC端瀏覽器（IE6 ，FF，chrome核心系列等等）的支持，不再僅限於原來手機開發領域，開始正式邁向全平台。所以近期也對原來的所有模組依照jsdoc規範更新了一遍API文檔，逐步開源給大家使用。

先放個Kitjs族譜，讓大家對於kit有個基本的認識

怎麼樣，是不是密密麻麻看的有點頭暈，其實我看了也暈^_^，簡單來說，kitjs和dojo類似的，分為以

1. kit.js為核心的，圍繞kit擴充的js工具模組，類似dojo

2. 和kit.ui命名空間下元件模組，類似dijit

3. 還有一個和dojoX一樣的實驗室項目，這裡沒有標示。

在KitJs的組件裡面，有一些我以前在博客中發布過的優秀組件，如

音訊播放器

iphone效果的選項卡

comboBox

3D相簿

日曆

LightBox

等等

還有一些更優秀的組件尚在內部使用，或者開發中，會逐步放出來給大家使用。所有的KitJs的組件都滿足以下願景

1. 更貼近中文使用者的使用感受

2. 更貼近中文開發者的註解與文件

3. 一定要提供現有的市面的組件不提供，而大家都需要的功能

4. 足夠細緻的模組，方便組裝合併成為一個更大的widget

在KitJs工具模組裡面，所有程式碼都是基於Class Prototype擴充開的，同時提供了實例化後的全域物件供開發者使用，所有的類別命名都是首字母大寫，所有的實例物件都是首字母小寫，kit以$字元開頭，是為了方便與其他類別庫區分開。同時，在工具模組裡面，所有的method的寫法都是函數程式設計風格的，這點和Kissy是一樣的，同時Kit提供給習慣用jQuery開發的同學，加載suger.js，即可像使用jQuery一樣，使用kitjs書寫程式碼，方法名稱和使用方式都和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框架。