关于FrozenJS
什么是FrozenJS
FrozenJS 是针对移动端开发的 js 组件库,其依赖 zepto.js 和 FrozenUI。FrozenJS 的所有组件均以 zepto 的插件的形式存在。
FrozenJS 包括:
- basic:FrozenJS 的一些基础功能,包括模板引擎、tap 支持等。
- ui:主要是一些触屏常用的 UI 组件,包括 dialog 等。
- effect:非常用的特效库,特殊场景使用到是可以单独调用。
更多文档请查看:http://frozenui.github.io/frozenjs/
FrozenJS 能做什么
FrozenJS 针对移动端而生,可以处理大部分移动端的UI呈现。而且还可以满足某些特殊场景的特效展示。
FrozenJS 的特点
- 调用简单。
- 体积小,js 只依赖 zepto。
- 可移植性强(支持模块化与非模块化调用方式)
FrozenJS 的理念
- 为移动而生
- 轻量,可复用可扩展
FrozenJS 的基本调用方式
非模块化方式
引用js
<script src="http://i.gtimg.cn/vipstyle/frozenjs/lib/zepto.min.js?_bid=304"></script>
<script src="http://i.gtimg.cn/vipstyle/frozenjs/1.0.1/frozen.js?_bid=304"></script>
js调用
var myDialog=$.dialog({
title:"温馨提示",
content:'温馨提示内容',
button:["确认","取消"]
})
myDialog.on("dialog:hide",function(e){
// To do sth when dialog hide
})
模块化方式
引用js
<script src="http://i.gtimg.cn/vipstyle/frozenjs/lib/sea.js?_bid=304"></script>
js调用
seajs.config({
alias:{
"zepto":"http://i.gtimg.cn/vipstyle/frozenjs/lib/zepto.min.js?_bid=304",
"frozen":"http://i.gtimg.cn/vipstyle/frozenjs/1.0.1/frozen.js?_bid=304"
}
});
seajs.use(["zepto","frozen"],function(z,fz){
var $=z;
var myDialog=$.dialog({
title:"温馨提示",
content:'温馨提示内容',
button:["确认","取消"]
})
myDialog.on("dialog:hide",function(e){
// To do sth when dialog hide
})
})
这里对 zepto 进行了模块化操作,建议引用 http://i.gtimg.cn/vipstyle/frozenjs/lib/zepto.min.js?_bid=304
若还是想要引用自己项目的zepto,请通过以下方式对zepto进行模块化:
window.Zepto = Zepto
window.$ === undefined && (window.$ = Zepto)
// exports to module
if($.isFunction(window.define)) {
define(function(require, exports, module) {
module.exports = window.Zepto
})
}
FrozenJS 的维护与开发
FrozenJS 通过 grunt 来管理,首先应确保 grunt 的运行环境,可参照 doproio/team#5
grunt:合并压缩代码
grunt docs:文档生成与调试
使用 grunt
会合并压缩代码,提交当前目录到 master
分支;
使用 grunt docs
会将文档生成到 _site
目录,提交 _site
目录到 gh-pages
分支。
页面会显示在 frozen 的 js 组件菜单项中 http://frozenui.github.io/frozenjs/