easyUI基础-easyloader加载器
什么是EasyLoader
正如其名字一样easyloader的作用是为了动态的加载组件所需的js文件,这体现了EasyUI作为轻量级框架对性能的合理掌握（可以动态的加载所需组件）,不过一般而言很少使用到easyloader(会给使用者带来一定的难度)。那么使用EasyLoader的场景有哪些呢？
EasyLoader使用场景
出于性能的考虑,不一次性的加载easyui核心js、css文件,而是先展示基础文档结构。
项目只是简单的用到easyui的几个组件,此时可以按需加载该组件的js和css文件。
你需要使用某个组件,但是不知道该组件是否依赖于其他组件(简单的js引用无法达到),使用easyloader可以自动加载依赖组件。
你需要把JQuery基础库和自己实现的js结合起来，以达到更好的展示性能。
使用方法
加载 EasyUI 模块
easyloader.base = '../'; // 设置 easyui 基础目录
easyloader.load('messager', function(){ // 加载指定模块
$.messager.alert('Title', 'load ok');
});加载来自绝对路径的脚本
using('http://code.jquery.com/jquery-1.4.4.min.js', function(){
// ...
});加载来自相对路径的脚本
// 脚本路径相对于 easyui 目录
using('./myscript.js', function(){
// ...
});
EasyLoader加载器
简单的了解了什么是easyloader以及其大概的使用场景,接下来看看easyloader的属性、事件和方法。
properties
easyloader有7个属性，具体如下表格：
| 属性名 | 值类型 | 描述 | 默认值 |
| modules | object | 预定义模块 | 无 |
| locales | object | 预定义的语言环境(国际化支持) | 无 |
| base | string | easyui的基础目录,必须以"/"结束,当前目录可是设置为"./" | 根据easyloader.j位置设置 |
| theme | string | 主题名称，theme目录下有多个可供选择的主题，也可自己扩展 | default |
| css | boolean | 定义加载模块的时候是否加载css样式文件 | true |
| locale | string | 语言环境名称 | null |
| timeout | number | 超时时间,单位毫秒 | 2000 |
Event
加载器包含两个事件,具体如下:
| 方法名 | 参数 | 描述信息 |
| onProgress | name | 一个模块加载成功 |
| onLoad | name | 模块和依赖他的模块加载成功 |
Method
加载器只有一个方法:load,其参数为module,callback(回调函数)，载入特定的模块，当载入的成功的时候调用该回调函数有效的模块参数可以使一个单一的模块名称、存储模块名称的数组、css样式文件、js脚本文件。
EasyLoader使用
接下来我们着眼于easyloader如何使用，通过上面属性表中的modules，不难猜到这个属性就是easyui定义模块用的。modules本质上来说是一个json格式对象。其形式如下:
modules = {
draggable:{
js : "jquery.draggable.js",
css : "pagination.css",
dependencies : ["linkbutton"]
}
};
key值即是定义的模块名称,值又是一个json对象,包含三个属性js、css、dependencies。js就是模块需要导入的js名称,css是该模块的样式,dependencies定义该模块的依赖模块。
上面定义了一个模块,接下来谈谈该如何添加我们自定义的模块,并且通过easyloader进行加载。
第一步:我们先要打开easyloader.js文件
阅读代码(压缩过)我们可以简单的看出来easyui加载的时候到底加载了哪些模块,“_1”是easyui已经定义好的模块.以及各个模块之间的依赖关系。这样,我们通过修改easyloader.js的代码就可以有选择性的加载所需的模块,提高easyui的性能(一般情况下不建议)。
那么我们如何简单的定义下自己的模块呢? 我们需要改造一下easyload.js，我们将easyloader.js代码中的所有_1变量替换为easyloader.modules，不过最后一个"modules:_1"的引用不要修改。
第二步,在easyui原有的模块基础上,我们扩展它,加入自己的模块。
easyloader.modules = $.extend({},{
"test":{
js:'test.js' css:'test.css' }
},easyloader.modules);
上面的代码在原有easyloader.modules的基础上在增加了一个test模块并且定义了模块的js和css。这样我们增加的第一个自定义模块就添加完成了。使用的方式和easyloader加载其他模块一样。
Tips:我们自己定义的js和css文件必须是绝对路径。
easyloader.load('mymodule', function(){
//do something
});