Javascript前端UI框架Kit使用指南之Kitjs簡(jiǎn)介
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書寫代碼,方法名和使用方式都和jQuery一模一樣,這里以一個(gè)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事件,參數(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框架。
相關(guān)文章
javascript檢測(cè)flash插件是否被禁用的方法
這篇文章主要介紹了javascript檢測(cè)flash插件是否被禁用的方法,涉及JavaScript調(diào)用ActiveXObject組件操作flash插件的相關(guān)技巧,需要的朋友可以參考下2016-01-01
javascript中window.location.href的用法
window.location.href?是一個(gè)用于獲取當(dāng)前頁(yè)面?URL?或讓瀏覽器跳轉(zhuǎn)到新?URL?的重要方法,本文就詳細(xì)的介紹一下javascript中window.location.href的用法,感興趣的可以了解一下2023-08-08
javascript實(shí)現(xiàn)3D變換的立體圓圈實(shí)例
這篇文章主要介紹了javascript實(shí)現(xiàn)3D變換的立體圓圈效果,涉及javascript動(dòng)態(tài)操作頁(yè)面元素實(shí)現(xiàn)滾動(dòng)與變色的相關(guān)技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-08-08
JS用最簡(jiǎn)單的方法實(shí)現(xiàn)四舍五入
在本篇文章里小編給大家整理的是關(guān)于JS用最簡(jiǎn)單的方法實(shí)現(xiàn)四舍五入的實(shí)例內(nèi)容,需要的朋友們學(xué)習(xí)下。2019-08-08
JavaScript對(duì)象的特性與實(shí)踐應(yīng)用深入詳解
這篇文章主要介紹了JavaScript對(duì)象的特性與實(shí)踐應(yīng)用,結(jié)合實(shí)例形式較為深入的分析了javascript對(duì)象的相關(guān)概念、操作方法及注意事項(xiàng),需要的朋友可以參考下2018-12-12
JS基于對(duì)象的特性實(shí)現(xiàn)去除數(shù)組中重復(fù)項(xiàng)功能詳解
這篇文章主要介紹了JS基于對(duì)象的特性實(shí)現(xiàn)去除數(shù)組中重復(fù)項(xiàng)功能,結(jié)合實(shí)例形式較為詳細(xì)的分析了js基于key值唯一性實(shí)現(xiàn)數(shù)組去重的具體步驟與相關(guān)操作技巧,需要的朋友可以參考下2017-11-11
小程序?qū)崿F(xiàn)展開(kāi)/收起的效果示例
這篇文章主要介紹了小程序?qū)崿F(xiàn)展開(kāi)/收起的效果示例,小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-09-09

