快捷導(dǎo)航

Javascript前端UI框架Kit使用指南之Kitjs簡(jiǎn)介

更新時(shí)間：2014年11月28日 11:38:00 投稿：hebedich

本文給大家簡(jiǎn)單介紹了一款優(yōu)秀的Javascript前端UI框架--Kitjs，支持PC端以及手機(jī)開(kāi)發(fā)領(lǐng)域，非常的全面，這里推薦給有需要的小伙伴。

Kitjs，（http://xueduany.github.com/KitJs），是我2011年底，離開(kāi)淘寶UED之后，自己搞起的一套HTML5的前端widget庫(kù)，原本的用途主攻手機(jī)端HTML頁(yè)面交互組件使用，正如其字面意思Kit一樣，愿景是做一個(gè)嬌小，實(shí)用，既可以直接拿來(lái)用，也可以很方便做2次開(kāi)發(fā)的一套組件。后來(lái)由于項(xiàng)目的越做越大，組件數(shù)的膨脹，也加入PC端瀏覽器（IE6+，F(xiàn)F，chrome核心系列等等）的支持，不再僅限于原來(lái)手機(jī)開(kāi)發(fā)領(lǐng)域，開(kāi)始正式邁向全平臺(tái)。所以近期也對(duì)原來(lái)的所有模塊按照jsdoc規(guī)范更新了一遍API文檔，逐步開(kāi)源給大家使用。

先放個(gè)Kitjs族譜，讓大家對(duì)于kit有個(gè)基本的認(rèn)識(shí)

怎么樣，是不是密密麻麻看的有點(diǎn)頭暈，其實(shí)我看了也暈^_^，簡(jiǎn)單來(lái)說(shuō)，kitjs和dojo類似的，分為以

1. kit.js為核心的，圍繞kit擴(kuò)展的js工具模塊，類似dojo

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

3. 還有一個(gè)和dojoX一樣的實(shí)驗(yàn)室項(xiàng)目，這里沒(méi)有標(biāo)明。

在KitJs的組件里面，有一些我以前在博客中發(fā)布過(guò)的優(yōu)秀組件，如

音頻播放器

iphone效果的選項(xiàng)卡

comboBox

3D相冊(cè)

日歷

LightBox

等等

還有一些更優(yōu)秀的組件尚在內(nèi)部使用，或者開(kāi)發(fā)中，會(huì)逐步放出來(lái)給大家使用。所有的KitJs的組件都滿足以下愿景

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

2. 更貼近中文開(kāi)發(fā)者的注釋和文檔

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

4. 足夠細(xì)粒度的模塊，方便組裝合并成為一個(gè)更大的widget

在KitJs工具模塊里面，所有代碼都是基于Class Prototype擴(kuò)展開(kāi)的，同時(shí)提供了實(shí)例化后的全局對(duì)象供開(kāi)發(fā)者使用，所有的類命名都是首字母大寫，所有的實(shí)例對(duì)象都是首字母小寫，kit以$字符開(kāi)頭，是為了方便與其他類庫(kù)區(qū)分開(kāi)。同時(shí)，在工具模塊里面，所有的method的寫法都是函數(shù)編程風(fēng)格的，這點(diǎn)和Kissy是一樣的，同時(shí)Kit提供給習(xí)慣用jQuery開(kāi)發(fā)的同學(xué)，加載suger.js，即可像使用jQuery一樣，使用kitjs書(shū)寫代碼，方法名和使用方式都和jQuery一模一樣，這里以一個(gè)dom ready事件舉例

復(fù)制代碼代碼如下:

$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事件，參數(shù)匿名方法的參數(shù)$，是傳遞了$kit.$方法給他內(nèi)部的閉包，這樣在內(nèi)部閉包里面既可以直接使用$代替$kit.$（等同與jQuery的$選擇器），這樣閉包內(nèi)所有的代碼都和jQuery無(wú)異了。也方便JQuery代碼與KitJs代碼的互相移植。

本文是KITJS框架使用指南系列的第一篇，僅僅是簡(jiǎn)單介紹了下kitjs，后續(xù)我們?cè)賮?lái)詳細(xì)了解這款優(yōu)秀的前端UI框架。

您可能感興趣的文章: