Giter Club home page Giter Club logo

frozenjs's Introduction

关于FrozenJS

什么是FrozenJS

FrozenJS 是针对移动端开发的 js 组件库,其依赖 zepto.jsFrozenUI。FrozenJS 的所有组件均以 zepto 的插件的形式存在。

FrozenJS 包括:

  1. basic:FrozenJS 的一些基础功能,包括模板引擎、tap 支持等。
  2. ui:主要是一些触屏常用的 UI 组件,包括 dialog 等。
  3. effect:非常用的特效库,特殊场景使用到是可以单独调用。

更多文档请查看:http://frozenui.github.io/frozenjs/

FrozenJS 能做什么

FrozenJS 针对移动端而生,可以处理大部分移动端的UI呈现。而且还可以满足某些特殊场景的特效展示。

FrozenJS 的特点

  1. 调用简单。
  2. 体积小,js 只依赖 zepto。
  3. 可移植性强(支持模块化与非模块化调用方式)

FrozenJS 的理念

  1. 为移动而生
  2. 轻量,可复用可扩展

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/

frozenjs's People

Contributors

hankzhu91 avatar jeakey avatar fayching avatar

Watchers

James Cloos avatar weiweiwoxin avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.