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 页面 Mask实现代码
Jan 09 Javascript
获取服务器传来的数据 用JS去空格的正则表达式
Mar 26 Javascript
js 编码转换 gb2312 和 utf8 互转的2种方法
Aug 07 Javascript
全国省市二级联动下拉菜单 js版
May 10 Javascript
jquery操作ul的一些操作笔记整理(干货)
Aug 31 jQuery
ES6中字符串string常用的新增方法小结
Nov 07 Javascript
vue router嵌套路由在history模式下刷新无法渲染页面问题的解决方法
Jan 25 Javascript
vue移动端实现红包雨效果
Jun 23 Javascript
react项目实践之webpack-dev-serve
Sep 14 Javascript
Vue刷新修改页面中数据的方法
Sep 16 Javascript
javascript实现图片轮换动作方法
Aug 07 Javascript
vue集成openlayers加载geojson并实现点击弹窗教程
Sep 24 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
PHP 执行系统外部命令 system() exec() passthru()
2009/08/11 PHP
php数组函数序列之array_combine() - 数组合并函数使用说明
2011/10/29 PHP
thinkphp5 + ajax 使用formdata提交数据(包括文件上传) 后台返回json完整实例
2020/03/02 PHP
js跨域和ajax 跨域问题的实现思路
2009/09/05 Javascript
javascript控制frame,iframe的src属性代码
2009/12/31 Javascript
js获取单元格自定义属性值的代码(IE/Firefox)
2010/04/05 Javascript
JavaScript Title、alt提示(Tips)实现源码解读
2010/12/12 Javascript
一些javascript一些题目的解析
2010/12/25 Javascript
那些年,我还在学习jquery 学习笔记
2012/03/05 Javascript
js使用循环清空某个div中的input标签值
2014/09/29 Javascript
每天一篇javascript学习小结(Array数组)
2015/11/11 Javascript
Bootstrap每天必学之弹出框(Popover)插件
2016/04/25 Javascript
Javascript+CSS3实现进度条效果
2016/10/28 Javascript
深入理解Javascript中的valueOf与toString
2017/01/04 Javascript
详解js的异步编程技术的方法
2017/02/09 Javascript
通过js修改input、select默认字体颜色
2017/04/19 Javascript
Vue中的混入的使用(vue mixins)
2018/06/01 Javascript
jquery获取input输入框中的值
2019/11/13 jQuery
python中urllib.unquote乱码的原因与解决方法
2017/04/24 Python
老生常谈python之鸭子类和多态
2017/06/13 Python
Python数据分析中Groupby用法之通过字典或Series进行分组的实例
2017/12/08 Python
selenium在执行phantomjs的API并获取执行结果的方法
2018/12/17 Python
Python基本类型的连接组合和互相转换方式(13种)
2019/12/16 Python
python中p-value的实现方式
2019/12/16 Python
python应用Axes3D绘图(批量梯度下降算法)
2020/03/25 Python
python中 _、__、__xx__()区别及使用场景
2020/06/30 Python
深入剖析webstorage[html5的本地数据处理]
2016/07/11 HTML / CSS
求∏的近似值,直到最后一项的绝对值小于指定的数
2016/02/12 面试题
创建文明学校实施方案
2014/03/11 职场文书
2015年学校党支部工作总结
2015/04/01 职场文书
市场督导岗位职责
2015/04/10 职场文书
创业计划书之珠宝饰品
2019/08/26 职场文书
创业计划书之青年旅馆
2019/09/23 职场文书
带你彻底理解JavaScript中的原型对象
2021/04/14 Javascript
MySQL 数据类型选择原则
2021/05/27 MySQL
Redis集群新增、删除节点以及动态增加内存的方法
2021/09/04 Redis