后续在放出一套配套的ui库,方便与程序开发实现无需一行css代码实现模块化美化快速开发!
简单性
easy.js的组件在 ui(界面) 层面尽量保持简单,开发者可以很方便的通过修改 css 样式就可以轻松定制自己想要的样式。
使用一个组件通常情况下只需要寥寥几行 js 代码。
一致性
组件在接口设计、命名规则上都尽可能的保持一致。通常,你只要使用过任意一个组件,那么其他组件也很容易上手。
模块化
每个组件都是一个独立的符合 amd 规范的模块,都依赖 easy.js 的核心库,在使用时都可以通过 e.use 来进行加载。
命名空间
所有组件的命名空间都是 e.ui,在组件加载完后都可以通过 e.ui.xxxx 来访问。
实例化
在使用组件时都需要通过 new 关键字来实例化,组件类的首字母都是 大写。
实例化时,第一个参数 都是必需的,该参数通常都是设置需要实例化某个/组 dom 元素。该参数可以是选择器字符串、dom 元素以及 easyjs object 的对象。
实例化时,第二个参数 都是可选的,该参数是一个多选可配置形式的 object 对象。
事件处理
组件在实例化后都可以通过 on 方法来为组件绑定事件,同样,也可以通过 un 方法来卸载事件。各组件支持的事件类型可以在详细的说明文档中看到。在多选形式的配置参数中,除了可能存在 init 回调函数,不会有任何其他的回调。
销毁实例
组件实例可以通过 destroy 方法进行销毁。
如何使用:
定义一个模块,将以下代码保存成 hello.js 文件:define(function(){
// 该模块返回一个由easyjs封装的div元素
return e( 'hello easy.js !
' );
});使用该模块:var btn = e( '#demohellobtn' );
// 为按钮绑定一个一次性的事件
btn.one( 'click', function( e ){
// 加载hello模块
e.use( 'hello', function( hellodiv ){
var win = e( window );
// 将模块中的div插入到body中
e( 'body' ).append( hellodiv );
// 设置div出现在页面的左下角
hellodiv.css( 'top', win.scrolltop() + win.height() - 150 + 'px' )
// 动画效果展示
.anim({
to : { left : '0px' },
easing : 'doublesqrt'
});
});
e.preventdefault();
});运行
开源
easy.js 遵循 mit 协议,个人和企业都可以免费使用,easy.js on github。
easyjs.components.zip ( 1.73 mb 下载:115 次 )
ad:真正免费,域名+虚机+企业邮箱=0元
