在瞭解完easyui的parser(解析器)之後,接下來就是easyloader(簡單加載器)的學習了。
什麼是EasyLoader
正如其名字一樣easyloader的作用是爲了動態的加載組件所需的js文件,這體現了EasyUI作爲輕量級框架對性能的合理掌握（可以動態的加載所需組件）,不過一般而言很少使用到easyloader(會給使用者帶來一定的難度)。那麼使用EasyLoader的場景有哪些呢？
EasyLoader使用場景
- 出於性能的考慮,不一次性的加載easyui核心js、css文件,而是先展示基礎文檔結構。
- 項目只是簡單的用到easyui的幾個組件,此時可以按需加載該組件的js和css文件。
- 你需要使用某個組件,但是不知道該組件是否依賴於其他組件(簡單的js引用無法達到),使用easyloader可以自動加載依賴組件。
- 你需要把JQuery基礎庫和自己實現的js結合起來，以達到更好的展示性能。
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
});