easy

DocsVersion : 1.0.0

use( id, [ callback ] )

静态方法Define in : easy.js

加载一个使用 define 定义的模块,use 方法与 DomReady 没有半毛钱关系。查看模块加载器的详细说明

参数
  • id
    String|
    Array
    必需

    模块标识,可以是相对标识,也可以是绝对标识,加载单个模块可以是字符串形式的参数,多个模块必须是数组形式的参数。

  • callback
    Function
    可选

    模块加载成功后执行的回调函数。如果没有回调函数,可以使用简写的形式来进行加载,只需在加载 easy.js 文件的时候在其 script 标签上使用 data-main 这个自定义属性来传递模块标识即可,使用方法看下面的例子。回调函数接受的参数就是模块向外部暴露的 exports 接口,参数顺序就是模块的排列顺序,同 define 的 factory 函数一样。

例子1

定义名叫 hello 的模块,将下面的代码保存成 hello.js。

hello.js 的代码:
// 定义模块 
define(function(){
    alert( 'hello world :)' );
});

然后使用 use 来进行加载。

// 加载模块 
E.use( 'hello' );
            

运行

use 无回调的情况下可以使用简写的形式来加载。

HTML代码:
<script type="text/javascript" src="easy.js" data-main="hello"></script>
例子2

定义名叫 test1 的模块,并且该模块有外部接口( exports )。

test1.js 的代码:
define(function(){
    return { name : 'easy.js ' };
});

定义名叫 test2 的模块,该模块也有外部接口( exports )。

test2.js 的代码:
define(function(){
    return { value : 'easy to use' };
});

加载 test1 和 test2 模块,并在回调中使用外部接口( exports )。

JavaScript代码:
E.use( [ 'test1', 'test2' ], function( arg1, arg2 ){
    alert( arg1.name + arg2.value );
});

运行

例子3

加载位于远程服务器的jQuery库文件。

JavaScript代码:
E.use( 'http://stylechen.com/wp-content/uploads/lib/jquery-1.7.2.min.js', function(){
    alert( $.fn.jquery );
});

运行

例子4

加载一个 CSS 模块,CSS 模块标识一定要带后缀,JS 模块不需要带后缀( css模块在实际使用过程中请使用依赖的形式去加载,safari下很难监测到css模块是否加载成功,所有尽量不要在css模块的加载完绑定回调函数 )。

box1
<div class="box1">box1</div>

CSS 模块就是一个普通的 CSS 文件,文件名为 test_style.css,文件内的代码如下:

.box1{ font-size:14px; color : red; }

使用 use 方法来进行加载:

E.use( 'test_style.css', function(){
    alert( 'test_style.css is done' );
});

运行