首頁  >  文章  >  php教程  >  一个简洁的 JavaScript 库

一个简洁的 JavaScript 库

WBOY
WBOY原創
2016-06-07 11:44:351122瀏覽

easy.js 是一个简洁易用的 JavaScript 库,包含了核心库和组件库。核心库有符合 W3C 标准的 CSS3 选择器,常用的 DOM 操作方法,增强的动画模块,支持 promise 模式的 ajax 模块以及优雅便捷的事件处理模块。easy.js 还集成了模块加载器,遵循 AMD 的模块化规范。组件库是基于核心库开发的,目前为止有一些最常见的组件诸如 Drag(对话框)、Switchable(轮播)、Lazyload(延迟加载)、Dialog(对话框)等等,后续还会继续开发更多的常用组件。

后续在放出一套配套的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(){<br>     // 该模块返回一个由easyJS封装的div元素   <br>     return E( '<div>hello easy.js !</div>' );<br> });使用该模块:var btn = E( '#demoHelloBtn' );<br> // 为按钮绑定一个一次性的事件<br> btn.one( 'click', function( e ){<br>     // 加载hello模块<br>     E.use( 'hello', function( helloDiv ){<br>         var win = E( window );<br>         // 将模块中的div插入到body中<br>         E( 'body' ).append( helloDiv );       <br>         // 设置div出现在页面的左下角<br>         helloDiv.css( 'top', win.scrollTop() + win.height() - 150 + 'px' )<br>             // 动画效果展示<br>             .anim({<br>                 to : { left : '0px' },<br>                 easing : 'doubleSqrt'<br>             });           <br>     });       <br>     e.preventDefault();        <br> });运行

开源
easy.js 遵循 MIT 协议,个人和企业都可以免费使用,easy.js on github。

一个简洁的 JavaScript 库一个简洁的 JavaScript 库一个简洁的 JavaScript 库

附件 easyjs.components.zip ( 1.73 MB 下载:115 次 )

AD:真正免费,域名+虚机+企业邮箱=0元

陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn