不要再吹水地球人聽不懂的技術,咱來點干貨!--中文前端UI框架Kit(一)大致了解下Kit是啥?


KitJs技術交流QQ高級群(可加500人) ,群號:88093625

 

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

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

 

KitJs

 

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

1. kit.js為核心的,圍繞kit擴展的js工具模塊,類似dojo

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

3. 還有一個和dojoX一樣的實驗室項目,這里沒有標明。

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

image

音頻播放器

image

iphone效果的選項卡

image

comboBox

image

3D相冊

image image

日歷

image

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目前已經公布的Demo地址為http://xueduany.github.com/KitJs/KitJs/index.html

在這里能看到所有已經開源的KitJs組件demo

官方的API Doc地址為http://xueduany.github.com/jsdoc/out/global.html

 

同時我也會開始在博客園為大家講解KitJs的使用,以及實現原理,同時也歡迎對Kit感興趣,願意加入項目的同學聯系我,個人聯系方式見(http://xueduany.github.com/Ciku/aboutme/index.html

以后Kit的走向,會繼續以充實更多美觀的,利於組合的細粒度的中文前端組件/驚艷的效果

在Core方面,下一個版本會繼續增強各基類的API,同時考慮實現CommonJs的AMD等等,敬請期待

 

KitJs,有你更精彩,歡迎加入!


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM