學習要點：
1.引入必要的文件
2.加載 UI 組件的方式
3.使用 easyload.js 智能加載
4.Parser 解析器
本文重點了解 EasyUI 的兩種使用方法，包含不同的加載已經 easyload 智能按需加載。最后了解一下 Parser 解析器的用法。
注意：所有的代碼將在文章的最后頁統一引入
一． 引入必要的文件
由於剛剛更新了 jQuery EasyUI1.4.4，這個小微版本的更新主要是內部優化和 UI 的一些微調，本身不影響學習。之前我們采用 1.2.4 版本的中文手冊學習 1.3.5 都沒有什么
障礙，所以，不必擔心版本問題。
我們在整個文章中JQuery EasyUI的目錄結構都如下圖所示
easyui文件夾是保存JQuery EasyUI的所有要使用的文件
JS文件夾是保存我們自己的JS文件的
index.html是保存我們自己書寫的html代碼
1 //引入 jQuery 核心庫，這里采用的是 2.0 2 <script type="text/javascript" src="easyui/jquery.min.js"></script> 3 //引入 jQuery EasyUI 核心庫，這里采用的是 1.4.4 4 <script type="text/javascript" src="easyui/jquery.easyui.min.js"></script> 5 //引入 EasyUI 中文提示信息 6 <script type="text/javascript" src="easyui/locale/easyui-lang-zh_CN.js"></script> 7 //引入自己開發的 JS 文件 8 <script type="text/javascript" src="js/index.js"></script> 9 //引入 EasyUI 核心 UI 文件 CSS 10 <link rel="stylesheet" type="text/css" href="easyui/themes/default/easyui.css" /> 11 //引入 EasyUI 圖標文件 12 <link rel="stylesheet" type="text/css" href="easyui/themes/icon.css" />
PS：引入完畢后，我們就可以編寫 jQuery EasyUI 代碼了。
二、加載 UI 組件的方式
加載 UI 組件有兩種方式：1.使用 class 方式加載；2.使用 JS 調用加載。
1 //使用 class 加載，格式為：easyui-組件名 2 <div class="easyui-dialog" id="box" title="標題" style="width:400px;height:200px;"> 3 內容部分 4 </div>
PS：使用了規定的格式就可以生成一個 UI 組件，這是由於 jQuery EasyUI 的一個解析器（Parser）的起到了作用。解析之后，從 Firebug 里面可以看到 UI 組件變化后的 HTML。
//使用 JS 調用加載 $('#box').dialog();
PS：一般推薦使用第二種 JS 調用加載，因為一個 UI 組件有很多屬性和方法，如果使用 class 的用法將極大的不方便。並且根據 JS 和 HTML 分離的原則，第二種提高了代碼的可讀性。
三． 使用 easyload.js 智能加載
//刪除 jQuery EasyUI 的 JS 核心文件及 CSS，引入 easyloader.js 文件 <script type="text/javascript" src="easyui/jquery.min.js"></script> <script type="text/javascript" src="easyui/easyloader.js"></script>
//JS 代碼 easyloader.load('dialog', function () { $('#box').dialog(); });
PS：使用 easyloader 智能加載，是根據你使用的 UI 組件按需加載。我們可以通過Firebug 查看 HTML， 發現加載了非常多的 js 文件， 這些 js 都是 dialog 組件的必須條件。所以，使用 easyloader 加載會減少不必要的內容加載。但問題是，使用智能加載，你編碼的難度和成本都提高了，效率降低，並且智能加載的 js 文件數量還是非常多的，並不會提高太大的速度，反而因為 js 文件較多，被搜索引擎要求合並優化。
四、Parser 解析器
Parser 解析器是專門解析渲染各種 UI 組件了，一般來說，我們並不需要使用它即可自動完成 UI 組件的解析工作。當然，有時可能在某些環境下需要手動解析的情況。
手動解析一般是使用 class 的情況下有效，比如設置 class="easyui-dialog"。
Parser 屬性
屬性名 默認值 說明
$.parser.auto true 定義是否自動解析 EasyUI 組件
//關閉自動解析功能，放在$(function() {})外 $.parser.auto = false;
Parser 方法
屬性名 傳參 說明
$.parser.parse 空或 JQ 選擇器 解析指定的 UI 組件
$.parser.onComplete 回調函數 解析完畢后執行
//解析所有 UI $.parser.parse(); //解析指定的 UI $.parser.parse('#box');
PS：使用指定 UI 解析，必須要設置父類容器才可以解析到。比如：
<div id="box"> <div class="easyui-dialog" title="標題" style="width:400px;height:200px;"> <span>內容部分</span> </div> </div>
//UI 組件解析完畢后執行，放在$(function () {})外 $.parser.onComplete = function () { alert('UI 組件解析完畢！'); };