脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript技巧 → Javascript前端UI框架Kit使用指南之Kitjs简介

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

 更新时间：2014年11月28日 11:38:00   投稿：hebedich  
本文给大家简单介绍了一款优秀的Javascript前端UI框架--Kitjs，支持PC端以及手机开发领域，非常的全面，这里推荐给有需要的小伙伴。

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

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

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

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

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

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

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

音频播放器

iphone效果的选项卡

comboBox

3D相册

日历

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检测flash插件是否被禁用的方法

    javascript检测flash插件是否被禁用的方法

    这篇文章主要介绍了javascript检测flash插件是否被禁用的方法,涉及JavaScript调用ActiveXObject组件操作flash插件的相关技巧,需要的朋友可以参考下
    2016-01-01
  • javascript中window.location.href的用法

    javascript中window.location.href的用法

    window.location.href 是一个用于获取当前页面 URL 或让浏览器跳转到新 URL 的重要方法,本文就详细的介绍一下javascript中window.location.href的用法,感兴趣的可以了解一下
    2023-08-08
  • javascript实现3D变换的立体圆圈实例

    javascript实现3D变换的立体圆圈实例

    这篇文章主要介绍了javascript实现3D变换的立体圆圈效果,涉及javascript动态操作页面元素实现滚动与变色的相关技巧,具有一定参考借鉴价值,需要的朋友可以参考下
    2015-08-08
  • 使用javascript做在线算法编程

    使用javascript做在线算法编程

    这篇文章主要介绍了使用javascript做在线算法编程的相关知识,需要的朋友可以参考下
    2018-05-05
  • JS用最简单的方法实现四舍五入

    JS用最简单的方法实现四舍五入

    在本篇文章里小编给大家整理的是关于JS用最简单的方法实现四舍五入的实例内容，需要的朋友们学习下。
    2019-08-08
  • JavaScript对象的特性与实践应用深入详解

    JavaScript对象的特性与实践应用深入详解

    这篇文章主要介绍了JavaScript对象的特性与实践应用,结合实例形式较为深入的分析了javascript对象的相关概念、操作方法及注意事项,需要的朋友可以参考下
    2018-12-12
  • JS基于对象的特性实现去除数组中重复项功能详解

    JS基于对象的特性实现去除数组中重复项功能详解

    这篇文章主要介绍了JS基于对象的特性实现去除数组中重复项功能,结合实例形式较为详细的分析了js基于key值唯一性实现数组去重的具体步骤与相关操作技巧,需要的朋友可以参考下
    2017-11-11
  • 深入学习js瀑布流布局

    深入学习js瀑布流布局

    这篇文章主要帮助大家深入理解js瀑布流布局，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2016-10-10
  • js显示时间 js显示最后修改时间

    js显示时间 js显示最后修改时间

    本文介绍js如何显示最后修改时间，在页面的文本框中显示文件上一次被修改的时间，通过这种方法可以查看网页的更新时间,有需要的朋友可以参考下
    2013-01-01
  • 小程序实现展开/收起的效果示例

    小程序实现展开/收起的效果示例

    这篇文章主要介绍了小程序实现展开/收起的效果示例，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2018-09-09

最新评论