一个简洁的 JavaScript 库

程序员文章站 2024-02-17 16:05:52

...

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(){

    // 该模块返回一个由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();        

});