学习 easyui 之一：easyloader 分析与使用

使用脚本库总要加载一大堆的样式表和脚本文件，在 easyui 中，除了可以使用通常的方式加载之外，还提供了使用 easyloader 加载的方式。

这个组件主要是为了按需加载组件而诞生。什么情况下使用它呢？

你觉得一次性导入 easyui 的核心 min js 和 css 太大你只用到 easyui 的其中几个组件你想使用其中的一个组件，但是你又不知道这个组件依赖了那些组件。

如果你有以上三中情况，那么推荐你使用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"  >  
        $(  function   () {

              //   easyloader 提供了一个函数 load, 使用下面的方法加载模块 
             easyloader.load(  "  messager  "  ,
                 function   () {
                   alert(  "  加载成功！  "  );
               });

            $(  "  #btnAlert  "  ).click(  function   () {
                $.messager.alert(  '  Warning  '  ,   '  The warning message  '  );
            });
        });
      </  script  > 
 </  body  > 
 </  html  >

注意看！只有 jquery 的脚本和 easyloader 的脚本，完全没有一大堆的样式和其他脚本文件。

load 用来使用代码来说明需要加载的模块，这是在 easyloader 中定义的一个函数，函数的第一个参数为准备加载的模块名称，第二个参数为加载成功之后的回调函数。这里用来提示已经加载成功。

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