不要再吹水地球人听不懂的技术,咱来点干货!中文前端UI框架Kit(一)大致了解下Kit是啥?

摘要:
所以近期也对原来的所有模块按照jsdoc规范更新了一遍API文档,逐步开源给大家使用。先放个Kitjs族谱,让大家对于kit有个基本的认识怎么样,是不是密密麻麻看的有点头晕,其实我看了也晕^_^,简单来说,kitjs和dojo类似的,分为以1.kit.js为核心的,围绕kit扩展的js工具模块,类似dojo2.和kit.ui命名空间下组件模块,类似dijit3.还有一个和dojoX一样的实验室项目,这里没有标明。也方便JQuery代码与KitJs代码的互相移植。

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相册

imageimage

日历

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,有你更精彩,欢迎加入!

免责声明:文章转载自《不要再吹水地球人听不懂的技术,咱来点干货!中文前端UI框架Kit(一)大致了解下Kit是啥?》仅用于学习参考。如对内容有疑问,请及时联系本站处理。

上篇【第九节】PyQt 拖拽ArcGIS统计栅格像元值并转换为矢量图层下篇

宿迁高防,2C2G15M,22元/月;香港BGP,2C5G5M,25元/月 雨云优惠码:MjYwNzM=

相关文章

百度地图在前端开发中的运用

一、安装及引入 1、在vue中安装依赖 $ npm install vue-baidu-map --save 在vue脚手架main.js中引入 import BaiduMap from 'vue-baidu-map' Vue.use(BaiduMap, { ak: 'Yo8oGhNGslHc4B8Qs8EWI4BvU3Qt4Zla' }); ...

webpack入门(转载)

     阅读本文之前,先看下面这个webpack的配置文件,如果每一项你都懂,那本文能带给你的收获也许就比较有限,你可以快速浏览或直接跳过;如果你和十天前的我一样,对很多选项存在着疑惑,那花一段时间慢慢阅读本文,你的疑惑一定一个一个都会消失;如果你以前没怎么接触过Webpack,如果你对webpack感兴趣,本文中有一个贯穿始终的例子,如果你能把这个例子...

网页重构面试笔试题

1.什么是网站重构?div+css的布局较table布局有什么优点?2.如何理解css盒模型?3.平时做网页经常使用哪些hack?4.如何理解表现与内容相分离?5.如何解决ie6的双边距问题?6.如何定义高度为1px的容器?{heigh:1px; 10px; background:#000; overflow:hidden}ie6下这个问题是默认行高造成的,...

Swift 内存管理详解

Swift内存管理: Swift 和 OC 用的都是ARC的内存管理机制,它们通过 ARC 可以很好的管理对象的回收,大部分的时候,程序猿无需关心 Swift 对象的回收。 注意: 只有引用类型变量所引用的对象才需要使用引用计数器进行管理,对于枚举、结构体等,他们都是值类型的。因此不需要使用引用计数进行管理。 一:理解ARC 1: ARC 自动统计改对象被...

.NET Core前后端分离快速开发框架(Core.3.1+AntdVue)

.NET Core前后端分离快速开发框架(Core.3.1+AntdVue) 引言 简介 环境搭建 开发环境要求: 基础数据库构建: 数据库设计规范 运行 使用教程 系统配置 快速开发 管理员登录 系统用户管理 系统角色管理 权限管理 接口秘钥管理 系统日志 操作日志 事务使用 读写分离分库分表 常见疑问 如何进行联表查询 如何切换数据库...

vue实用技巧

路由缓存 keepalive keep-alive 是 Vue 提供的一个抽象组件,用来对组件进行缓存,从而节省性能,由于是一个抽象组件,所以在 v 页面渲染完毕后不会被渲染成一个 DOM 元素。 <keep-alive> <router-view></router-view> </keep-alive>...