http://www.cnblogs.com/haogj/archive/2013/04/22/3036685.html

使用脚本库总要加载一大堆的样式表和脚本文件，在 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源码阅读

资源下载：

点击下载示例文件

学习 easyui 之一：easyloader 分析与使用的更多相关文章

  1. 2.EasyUI学习总结(二)——easyloader分析与使用(转载)

    本文转载自:http://www.cnblogs.com/haogj/archive/2013/04/22/3036685.html 使用脚本库总要加载一大堆的样式表和脚本文件,在easyui 中,除 ...

  2. EasyUI学习总结(二)——easyloader分析与使用(转载)

    本文转载自:http://www.cnblogs.com/haogj/archive/2013/04/22/3036685.html 使用脚本库总要加载一大堆的样式表和脚本文件,在easyui 中,除 ...

  3. 学习 easyui 之二：jQuery 的 ready 函数和 easyloader 的加载回调函数

    Ready 事件不一定 ready 使用 easyloader 的时候,必须要注意到脚本的加载时机问题,easyloader 会异步加载模块,所以,你使用的模块不一定已经加载了.比如下面的代码. &l ...

  4. 学习Easyui

    学习Easyui 社区easyui 论坛:http://bbs.jeasyuicn.com API地址:http://www.jeasyuicn.com/api 简单桌面版:http://app.bt ...

  5. UML和模式应用学习笔记-1(面向对象分析和设计)

    UML和模式应用学习笔记-1(面向对象分析和设计) 而只是对情节的记录:此处的用例场景为:游戏者请求掷骰子.系统展示结果:如果骰子的总点数是7,则游戏者赢得游戏,否则为输 (2)定义领域模型:在领域模 ...

  6. 原 iOS深入学习（Block全面分析）http://my.oschina.net/leejan97/blog/268536

    原 iOS深入学习(Block全面分析) 发表于1年前(2014-05-24 16:45)   阅读(26949) | 评论(14) 39人收藏此文章, 我要收藏 赞21 12月12日北京OSC源创会 ...

  7. 作业2——英语学习APP的案例分析

    英语学习APP的案例分析 很多同学有误解,软件工程课是否就是理论课?或者是几个牛人拼命写代码,其他人打酱油的课?要不然就是学习一个程序语言,搞一个职业培训的课?都不对,软件工程有理论,有实践,更重要的 ...

  8. FFmpeg 结构体学习(二)： AVStream 分析

    在上文FFmpeg 结构体学习(一): AVFormatContext 分析我们学习了AVFormatContext结构体的相关内容.本文,我们将讲述一下AVStream. AVStream是存储每一 ...

  9. FFmpeg 结构体学习(三)： AVPacket 分析

    在上文FFmpeg 结构体学习(二): AVStream 分析我们学习了AVStream结构体的相关内容.本文,我们将讲述一下AVPacket. AVPacket是存储压缩编码数据相关信息的结构体.下 ...

  10. FFmpeg 结构体学习(四)： AVFrame 分析

    在上文FFmpeg 结构体学习(三): AVPacket 分析我们学习了AVPacket结构体的相关内容.本文,我们将讲述一下AVFrame. AVFrame是包含码流参数较多的结构体.下面我们来分析 ...

随机推荐

  1. [CareerCup] 4.3 Create Minimal Binary Search Tree 创建最小二叉搜索树

    4.3 Given a sorted (increasing order) array with unique integer elements, write an algorithm to crea ...

  2. Cordova开发环境的搭建

    Cordova开发环境的搭建 原文地址:http://imziv.com/blog/article/read.htm?id=66 Cordova为目前做混合式开发中比较受欢迎的一个解决方案了,并且拥有 ...

  3. 区间dp的典例

    区间dp, 属于dp的一种,顾名思义,便是对区间处理的dp,其中石子归并,括号匹配,整数划分最为典型. (1)石子归并 dp三要素:阶段,状态,决策. 首先我们从第i堆石子到第j堆石子合并所花费的最小 ...

  4. 端口扫描之王——nmap入门精讲（二）

    接着讲上节的内容,上节中提到了一个时间优化的问题是使用参数-n,通过不解析地址来进行优化时间的,但是优化时间的方法还有很多,比如说我们可以通过时间优化(0-5),指定单位时间内的探针数,设置组的大小 ...

  5. jdbc基础 (二) 通过properties配置文件连接数据库

    csdn博文地址:jdbc基础 (二) 通过properties配置文件连接数据库 上一篇描述了对mysql数据库的简单操作,下面来看一下开发中应该如何灵活应用. 因为jdbc对数据库的驱动加载.连接 ...

  6. SQL温故系列两篇（二）

    .Sql 插入语句得到自动生成的递增的ID值 Insert into Table(name,des,num) values(’ltp’,’thisisbest’,10); Select @@ident ...

  7. js监听键盘回车

    //监听回车 $(document).keydown(function(e) { ) { $("#btnLogin").click(); } }) //input绑定回车 $('# ...

  8. ThinkPHP之项目搭建

    前言 在做javaweb开发时,我们创建一个项目,MyEclipse会自动为我们生成相应的目录结构,我们在此结构上才进行web开发,在使用TinkPHP框架做PHP开发时,一样,我们如何生成一个标准的 ...

  9. MySQL性能分析

    第一步 检查系统的状态 通过操作系统的一些工具检查系统的状态,比如CPU.内存.交换.磁盘的利用率,根据经验或与系统正常时的状态相比对,有时系统表面上看起来看空闲,这也可能不是一个正常的状态,因为cp ...

  10. Beta冲刺阶段

    Beta冲刺阶段 现阶段工作安排以及问题解决 Struts2框架配置 网上下载Struts 2 的框架代码,按照书上教程进行配置 遇到的问题:书上配置过程和实际操作有出入,按照书上过程无法完成配置过程 ...