學習 easyui 之一:easyloader 分析與使用


使用腳本庫總要加載一大堆的樣式表和腳本文件,在 easyui 中,除了可以使用通常的方式加載之外,還提供了使用 easyloader 加載的方式。

這個組件主要是為了按需加載組件而誕生。什么情況下使用它呢?
  1. 你覺得一次性導入 easyui 的核心 min js 和 css 太大
  2. 你只用到 easyui 的其中幾個組件
  3. 你想使用其中的一個組件,但是你又不知道這個組件依賴了那些組件。
如果你有以上三中情況,那么推薦你使用easyLoader。它可以幫你解決這些問題。

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("加載成功!");
});

 

 相關閱讀:

kalllx 的 easyloader.js源碼閱讀

 資源下載:

點擊下載示例文件

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM