使用腳本庫總要加載一大堆的樣式表和腳本文件,在 easyui 中,除了可以使用通常的方式加載之外,還提供了使用 easyloader 加載的方式。
- 你覺得一次性導入 easyui 的核心 min js 和 css 太大
- 你只用到 easyui 的其中幾個組件
- 你想使用其中的一個組件,但是你又不知道這個組件依賴了那些組件。
easyloader 用來幫助我們自動加載所需的腳本文件和樣式文件,這樣,我們只需要在頁面中引用 jquery 腳本 和 easyloader 腳本,easyloader 就可以幫助我們分析模塊的依賴關系,先加載依賴項。模塊加載好了會調用parse模塊來解析頁面。把class是easyui開頭的標簽都轉化成easyui的控件。
下面我們,以使用 messager 模塊為例,使用 easyloader 加載所需的模塊。
我們的頁面可以簡單的僅僅寫入下面的內容。注意,並不需要通常的樣式表和一大堆的腳本引用。
<!DOCTYPE html> <html lang="en" xmlns="http://www.w3.org/1999/xhtml"> <head> <meta charset="utf-8" /> <title></title> </head> <body> <a id="btnAlert" class="easyui-linkbutton">彈出提示框</a> <script src="scripts/jquery-1.8.0.min.js" type="text/javascript"></script> <script src="scripts/easyloader.js" type="text/javascript"></script> <script type="text/javascript"> easyloader.locale = "zh_CN"; using("messager", function () { alert("加載成功!"); $("#btnAlert").click(function () { $.messager.alert('Warning', 'The warning message'); }); }); </script> </body> </html>
注意看!只有 jquery 的腳本和 easyloader 的腳本,完全沒有一大堆的樣式和其他腳本文件。
load 用來使用代碼來說明需要加載的模塊,這是在 easyloader 中定義的一個函數,函數的第一個參數為准備加載的模塊名稱,第二個參數為加載成功之后的回調函數。這里用來提示已經加載成功。
load 加載的模塊有兩種格式,即可以是一個字符串表示的單個模塊,也可以是一個字符串的數組,同時加載多個模塊。
//name有兩種,一種是string ,一種是string array,這樣一次可以加載多個plugin,都是調用add方法進行添加 if (typeof name == 'string') { add(name); } else { for (var i = 0; i < name.length; i++) { add(name[i]); } }
easyloader.load 還有一個別名 using 定義在 window 對象上,如下所示:
window.using = easyloader.load;
所以,加載的代碼也可以這樣寫。
using("messager", function () {
alert("加載成功!");
});
加載成功之后,我們就可以在代碼中使用已經加載的模塊了。
頁面中還使用 class 說明了一個按鈕,這里使用了 class="easyui-linkbutton",easyloader 還可以幫助我們解析元素中的特殊類名,直接就在頁面中使用過的模塊。
easyloader 會在它所在文件夾中,尋找 plugins 子文件夾中的腳本,和 themes 文件夾中的樣式表。所以需要保證文件保存在正確的位置。
不過,easyloader 還提供了一個 base 屬性,用來指定尋找插件和腳本的起點。
// jquery-easyui的根目錄,在加載easyloader時,會自動根據你放置的位置而改變
base:'.',
除了 base , 還有幾個重要的屬性
base:'.',//該屬性是為了加載js,記錄文件夾路徑的 theme:'default', //默認主題 css:true, locale:null,
比如,希望使用中文語言包,則可以如下使用。你會看到提示框的按鈕中的文字已經從 Ok 轉換為了 "確定"。
easyloader.locale = "zh_CN"; using("messager", function () { alert("加載成功!"); });
相關閱讀:
資源下載:
