Javascript前端UI框架Kit使用指南之Kitjs简介


Posted in Javascript onNovember 28, 2014

Kitjs,(http://xueduany.github.com/KitJs),是我2011年底,离开淘宝UED之后,自己搞起的一套HTML5的前端widget库,原本的用途主攻手机端HTML页面交互组件使用,正如其字面意思Kit一样,愿景是做一个娇小,实用,既可以直接拿来用,也可以很方便做2次开发的一套组件。后来由于项目的越做越大,组件数的膨胀,也加入PC端浏览器(IE6+,FF,chrome核心系列等等)的支持,不再仅限于原来手机开发领域,开始正式迈向全平台。所以近期也对原来的所有模块按照jsdoc规范更新了一遍API文档,逐步开源给大家使用。

先放个Kitjs族谱,让大家对于kit有个基本的认识

Javascript前端UI框架Kit使用指南之Kitjs简介

怎么样,是不是密密麻麻看的有点头晕,其实我看了也晕^_^,简单来说,kitjs和dojo类似的,分为以

1. kit.js为核心的,围绕kit扩展的js工具模块,类似dojo

2. 和kit.ui命名空间下组件模块,类似dijit

3. 还有一个和dojoX一样的实验室项目,这里没有标明。

在KitJs的组件里面,有一些我以前在博客中发布过的优秀组件,如

Javascript前端UI框架Kit使用指南之Kitjs简介

音频播放器

Javascript前端UI框架Kit使用指南之Kitjs简介

iphone效果的选项卡

Javascript前端UI框架Kit使用指南之Kitjs简介

comboBox

Javascript前端UI框架Kit使用指南之Kitjs简介

3D相册

Javascript前端UI框架Kit使用指南之Kitjs简介Javascript前端UI框架Kit使用指南之Kitjs简介

日历

Javascript前端UI框架Kit使用指南之Kitjs简介

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框架。

Javascript 相关文章推荐
jquery 全局AJAX事件使用代码
Nov 05 Javascript
js拆分字符串并将分割的数据放到数组中的方法
May 06 Javascript
把Node.js程序加入服务实现随机启动
Jun 25 Javascript
基于JavaScript怎么实现让歌词滚动播放
Nov 03 Javascript
js使用cookie记录用户名的方法
Nov 26 Javascript
浅析JS中的 map, filter, some, every, forEach, for in, for of 用法总结
Mar 29 Javascript
react.js组件实现拖拽复制和可排序的示例代码
Aug 20 Javascript
深入浅析vue中cross-env的使用
Sep 12 Javascript
如何HttpServletRequest文件对象并储存
Aug 14 Javascript
Vue-Ant Design Vue-普通及自定义校验实例
Oct 24 Javascript
详解Vue的异步更新实现原理
Dec 22 Vue.js
javascript实现固定侧边栏
Feb 09 Javascript
非jQuery实现照片散落桌子上,单击放大的LightBox效果
Nov 28 #Javascript
开源的javascript项目Kissy介绍
Nov 28 #Javascript
对比分析json及XML
Nov 28 #Javascript
jquery 操作css样式、位置、尺寸方法汇总
Nov 28 #Javascript
javascript基本类型详解
Nov 28 #Javascript
javascript中数组array及string的方法总结
Nov 28 #Javascript
20条学习javascript的编程规范的建议
Nov 28 #Javascript
You might like
js实现文字跟随鼠标移动而移动的方法
2015/02/28 Javascript
JavaScript将XML转成JSON的方法
2015/03/12 Javascript
通过实例理解javascript中没有函数重载的概念
2015/06/03 Javascript
javascript文本模板用法实例
2015/07/31 Javascript
学习使用AngularJS文件上传控件
2016/02/16 Javascript
利用Javascript实现简单的转盘抽奖
2017/02/13 Javascript
Vue.js 2.0中select级联下拉框实例
2017/03/06 Javascript
微信小程序 参数传递实例代码
2017/03/20 Javascript
Node.js+Express+MySql实现用户登录注册功能
2017/07/10 Javascript
微信小程序-滚动消息通知的实例代码
2017/08/03 Javascript
解决layui 复选框等内置控件不显示的问题
2018/08/14 Javascript
Cookbook组件形式:优化 Vue 组件的运行时性能
2018/11/25 Javascript
JavaScript实现的联动菜单特效示例
2019/07/08 Javascript
Javascript如何实现双指控制图片功能
2020/02/25 Javascript
vue中使用vue-pdf的方法详解
2020/09/05 Javascript
跟老齐学Python之有点简约的元组
2014/09/24 Python
python如何实现远程控制电脑(结合微信)
2015/12/21 Python
python学习教程之Numpy和Pandas的使用
2017/09/11 Python
对python GUI实现完美进度条的示例详解
2018/12/13 Python
python地震数据可视化详解
2019/06/18 Python
简单了解python关系(比较)运算符
2019/07/08 Python
pytorch索引查找 index_select的例子
2019/08/18 Python
基于Numba提高python运行效率过程解析
2020/03/02 Python
python 实现图像快速替换某种颜色
2020/06/04 Python
python3通过subprocess模块调用脚本并和脚本交互的操作
2020/12/05 Python
深入浅析css3 border-image边框图像详解
2015/11/24 HTML / CSS
台湾菁英交友:结识黄金单身的台湾人
2018/01/22 全球购物
医学专业应届生的自我评价
2014/02/28 职场文书
体检通知范文
2015/04/21 职场文书
全国法制宣传日活动总结
2015/05/05 职场文书
毕业论文致谢怎么写
2015/05/14 职场文书
小学数学教学随笔
2015/08/14 职场文书
Python爬虫基础之爬虫的分类知识总结
2021/05/13 Python
MySQL中日期型单行函数代码详解
2021/06/21 MySQL
python数据可视化JupyterLab实用扩展程序Mito
2021/11/20 Python
HTML静态页面获取url参数和UserAgent的实现
2022/08/05 HTML / CSS