Skip to content

longjiarun/kubjs

Repository files navigation

轻量级移动端组件库 Kub

设计

  1. Kub 由多个组件构成,组件之间依赖较低;

  2. 组件尽量做到轻量且扩展性良好;

  3. 组件对外提供稳定的API,在使用时可通过参数配置或者继承实现定制化的组件;

  4. 组件采用commonjs规范,采用webpack编译,对外提供源文件与编译后的文件;

  5. 提供模板源文件与预编译后的文件;

  6. Kub对外提供暴露全局的Kub变量,所有组件绑定在该变量中;

  7. 样式采用less编写,对外提供源文件与编译后的文件;

  8. 样式可统一在variables.less文件中配置;

  9. 对外提供不包含样式的kub.js以及包含样式的kub.style.js;

兼容性

  1. ios7及以上版本;

  2. Android4.0及以上版本;

版本

  1. 遵循语义化版本规范

  2. master分支为最新的稳定的发布版本;

  3. tags中的分支对应每一个发布版本;

  4. 其余分支为开发分支,为不稳定版本;

  5. 1.* 版本将不再升级与维护,除非有重大bug;

安装

CDN

<link rel="stylesheet" type="text/css" href="//assets.geilicdn.com/v-components/kubjs/2.4.0/index.css">

<script type="text/javascript" src="//assets.geilicdn.com/v-components/kubjs/2.4.0/index.js"></script>

<script type="text/javascript" src="//assets.geilicdn.com/v-components/kubjs/2.4.0/index.style.js"></script>

git

git clone https://github.com/longjiarun/kubjs.git kub

npm

npm install kub --save

//指定版本
npm install kub@version --save

bower

bower install kub --save

//指定版本
bower install kub#version --save

使用

使用编译后的文件kub.jskub.style.js

1、如果组件名称首字母大小,则暴露的是类,需实例化;

//组件为类
var dialog = new Kub.Dialog({
    //配置参数
});

2、如果组件名称首字母小写,则暴露的是对象或函数,无需实例化;

//组件为实例化后的对象
Kub.dateHelper.format(new Date(),'yyyy-MM-dd')

//组件为函数
Kub.cookie('name','kub');

//组件为对象
Kub.os.ios

使用源文件。

1、bower

//引用kub.js
var Kub = require('../../bower_components/kub/src/js/kub')

new Kub.Dialog()

//引用单个组件
var Dialog = require('../../bower_components/kub/src/js/dialog')

new Dialog()

//使用less
require('../../bower_components/kub/src/less/dialog.less')

2、npm

//引用kub.js
var Kub = require('kub')

new Kub.Dialog()

//引用单个组件
var Dialog = require('kub/src/js/dialog')

new Dialog()

//使用less
require('kub/src/less/dialog.less')

与V1版本的区别

描述与版本V1的区别,方便迁移到版本V2。

  1. 模块规范由umd修改为commonjs;

  2. 去除zeptounderscorehammerjs依赖;

  3. 去除js/extend目录中的组件;

  4. 去除calculator组件;

  5. os模块迁移到detect中,绑定由Kub.core.os迁移到Kub.os;

  6. 增加kub.jskub.style.js文件;

  7. 将模板从组件中抽离,提供模板预编译文件;

  8. 去除多余API,详见API文档;

  9. css文件夹名称修改为less

  10. 将样式可配置项统一配置在variables.less中;

  11. variables.less中提供单位可配置变量@unit: 1px;;

问题

  1. 通过Github issues反馈;

  2. 通过Email反馈;

API文档

查看文档