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

標籤：style   class   http   tar   ext   color   

       在瞭解完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});