EasyUI基礎入門之Easyloader(加載器)

       在了解完easyui的parser(解析器)之後,接下來就是easyloader(簡單加載器)的學習了。

       正如其名字一樣easyloader的作用是為了動态的加載元件所需的js檔案,這展現了EasyUI作為輕量級架構對性能的合理掌握（可以動态的加載所需元件）,不過一般而言很少使用到easyloader(會給使用者帶來一定的難度)。那麼使用EasyLoader的場景有哪些呢？

出于性能的考慮,不一次性的加載easyui核心js、css檔案,而是先展示基礎文檔結構。

項目隻是簡單的用到easyui的幾個元件,此時可以按需加載該元件的js和css檔案。

你需要使用某個元件,但是不知道該元件是否依賴于其他元件(簡單的js引用無法達到),使用easyloader可以自動加載依賴元件。

你需要把JQuery基礎庫和自己實作的js結合起來，以達到更好的展示性能。

      簡單的了解了什麼是easyloader以及其大概的使用場景,接下來看看easyloader的屬性、事件和方法。

       easyloader有7個屬性，具體如下表格：

屬性名

值類型

描述

        預設值

modules

object

預定義子產品

            無    

locales

預定義的語言環境(國際化支援)

            無

base

string

easyui的基礎目錄,必須以"/"結束,目前目錄可是設定為"./"

根據easyloader.j位置設定

theme

主題名稱，theme目錄下有多個可供選擇的主題，也可自己擴充

          default

css

boolean

定義加載子產品的時候是否加載css樣式檔案

           true

locale

語言環境名稱

            null

timeout

number

逾時時間,機關毫秒

           2000

       加載器包含兩個事件,具體如下:

         方法名

               參數

                  描述資訊

     onProgress

               name

一個子產品加載成功

     onLoad

子產品和依賴他的子產品加載成功

       加載器隻有一個方法:load,其參數為module,callback(回調函數)，載入特定的子產品，當載入的成功的時候調用該回調函數有效的子產品參數可以使一個單一的子產品名稱、存儲子產品名稱的數組、css樣式檔案、js腳本檔案。

      接下來我們着眼于easyloader如何使用，通過上面屬性表中的modules，不難猜到這個屬性就是easyui定義子產品用的。modules本質上來說是一個json格式對象。其形式如下:

         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的基礎上在增加了一個test子產品并且定義了子產品的js和css。這樣我們增加的第一個自定義子產品就添加完成了。使用的方式和easyloader加載其他子產品一樣。

        Tips:我們自己定義的js和css檔案必須是絕對路徑。