EasyUI學習總結(二)——easyloader分析與使用
使用腳本庫總要加載一大堆的樣式表和腳本文件，在easyui 中，除了可以使用通常的方式加載之外，還提供了使用 easyloader 加載的方式。這個組件主要是為了按需加載組件而誕生。什么情況下使用它呢？
- 你覺得一次性導入 easyui 的核心 min js 和 css 太大
- 你只用到 easyui 的其中幾個組件
- 你想使用其中的一個組件，但是你又不知道這個組件依賴了那些組件。
easyloader 用來幫助我們自動加載所需的腳本文件和樣式文件，這樣，我們只需要在頁面中引用 jquery 腳本 和 easyloader 腳本，easyloader 就可以幫助我們分析模塊的依賴關系，先加載依賴項。模塊加載好了會調用parse模塊來解析頁面。把class是easyui開頭的標簽都轉化成 easyui的控件。
下面我們，以使用messager和dialog模塊為例，使用easyloader加載所需的模塊。
我們的頁面可以簡單的僅僅寫入下面的內容。注意，並不需要通常的樣式表和一大堆的腳本引用。
1 <%@ page language="java" pageEncoding="UTF-8"%>
2 <!DOCTYPE HTML>
3 <html>
4 <head>
5 <title>EasyUI入門——EasyUI的easyloader的使用</title>
6 <!-- 引入JQuery -->
7 <script type="text/javascript" src="${pageContext.request.contextPath}/jquery-easyui-1.4.1/jquery.min.js"></script>
8 <!-- 引入easyloader.js -->
9 <script type="text/javascript" src="${pageContext.request.contextPath}/jquery-easyui-1.4.1/easyloader.js"></script>
10
11 <script type="text/javascript">
12 $(function(){
13 //使用easyloader加載dialog模塊使用到的相關js和css樣式
14 easyloader.load('dialog',function(){
15 /*使用JavaScript動態創建EasyUI的Dialog的步驟：
16 1、定義一個div，並給div指定一個id
17 2、使用Jquery選擇器選中該div，然后調用dialog()方法就可以創建EasyUI的Dialog
18 */
19 //使用自定義參數創建EasyUI的Dialog
20 $('#dd2').dialog({
21 title: '使用JavaScript創建的Dialog',
22 width: 400,
23 height: 200,
24 closed: false,
25 cache: false,
26 modal: true
27 });
28 });
29
30 easyloader.locale = "zh_CN";
31 //easyloader.load 還有一個別名 using 定義在 window 對象上
32 //使用easyloader加載messager模塊使用到的相關js和css樣式
33 using("messager", function () {
34 alert("加載成功！");
35 $("#btnAlert").click(function () {
36 $.messager.alert('Warning', 'The warning message');
37 });
38 });
39 });
40 </script>
41
42 </head>
43
44 <body>
45 <%--使用純html的方式創建創建EasyUI的Dialog的步驟：
46 1、定義一個div
47 2、將div的class樣式屬性設置成easyui-dialog，這樣就可以將普通的div變成EasyUI的Dialog了
48 --%>
49 <div class="easyui-dialog" id="dd1" title="EasyUI Dialog" style="width: 500px;height: 300px;">
50 Hello World!
51 </div>
52 <div id="dd2">Dialog Content</div>
53 <a id="btnAlert" class="easyui-linkbutton">彈出提示框</a>
54 </body>
55 </html>
注意看！只有 jquery 的腳本和 easyloader 的腳本，完全沒有一大堆的樣式和其他腳本文件。
頁面運行效果如下：
load 用來使用代碼來說明需要加載的模塊，這是在 easyloader 中定義的一個函數，函數的第一個參數為准備加載的模塊名稱，第二個參數為加載成功之后的回調函數。這里用來提示已經加載成功。
load 加載的模塊有兩種格式，即可以是一個字符串表示的單個模塊，也可以是一個字符串的數組，同時加載多個模塊。
1 //name有兩種，一種是string ,一種是string array,這樣一次可以加載多個plugin,都是調用add方法進行添加
2 if (typeof name == 'string') {
3 add(name);
4 } else {
5 for (var i = 0; i < name.length; i++) {
6 add(name[i]);
7 }
8 }
easyloader.load 還有一個別名 using 定義在 window對象上，如下所示：
window.using = easyloader.load;
所以，加載的代碼也可以這樣寫。
1 using("messager", function () {
2 alert("加載成功！");
3 });
加載成功之后，我們就可以在代碼中使用已經加載的模塊了。
頁面中還使用 class 說明了一個按鈕，這里使用了 class="easyui-linkbutton"，easyloader 還可以幫助我們解析元素中的特殊類名，直接就在頁面中使用過的模塊。
easyloader 會在它所在文件夾中，尋找 plugins 子文件夾中的腳本，和 themes 文件夾中的樣式表。所以需要保證文件保存在正確的位置。不過，easyloader 還提供了一個 base 屬性，用來指定尋找插件和腳本的起點。
1 // jquery-easyui的根目錄，在加載easyloader時，會自動根據你放置的位置而改變 2 base:'.',
除了 base , 還有幾個重要的屬性
1 base:'.',//該屬性是為了加載js,記錄文件夾路徑的 2 theme:'default', //默認主題 3 css:true, 4 locale:null,
比如，希望使用中文語言包，則可以如下使用。你會看到提示框的按鈕中的文字已經從 Ok 轉換為了 "確定"。
1 easyloader.locale = "zh_CN";
2 using("messager", function () {
3 alert("加載成功！");
4 });
以上就是關於easyloader分析與使用。