转载自：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源码阅读

资源下载：

点击下载示例文件

easyloader分析与使用的更多相关文章

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

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

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

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

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

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

  4. 3.EasyUI学习总结(三)——easyloader源码分析

    easyloader模块是用来加载jquery easyui的js和css文件的,即easyloader可以在调用的时候自动加载当前页面所需的文件,不用再自己引用, 而且它可以分析模块的依赖关系,先加 ...

  5. easyloader.js源代码分析

    http://www.cnblogs.com/jasonoiu/p/easyloader_source_code_analysis.html Jquery easyui是一个javascript UI ...

  6. easyloader [easyui_1.4.2] 分析源码,妙手偶得之

    用easyui很久了,但是很少去看源码. 有解决不了的问题就去百度... 今日发现,easyui的源码不难懂. 而且结合 easyloader 可以非常方便的逐个研究easyui的组件. 但是, ea ...

  7. EasyUI学习总结(三)——easyloader源码分析(转载)

    声明:这一篇文章是转载过来的,转载地址忘记了,原作者如果看到了,希望能够告知一声,我好加上去! easyloader模块是用来加载jquery easyui的js和css文件的,而且它可以分析模块的依 ...

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

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

  9. alias导致virtualenv异常的分析和解法

    title: alias导致virtualenv异常的分析和解法 toc: true comments: true date: 2016-06-27 23:40:56 tags: [OS X, ZSH ...

随机推荐

  1. 试图（View）

    试图是通过命名约定与动作方法想关联的.这个动作方法称为Index,控制器名称为Home; 添加试图,试图名与该试图相关联的动作方法的名称一致.

  2. @Transactional导致无法动态数据源切换

    公司目前数据源为主从模式:主库可读写,从库只负责读.使用spring-jdbc提供的AbstractRoutingDataSource结合ThreadLocal存储key,实现数据源动态切换. 最近项 ...

  3. j.u.c系列（07）---之读写锁：ReentrantReadWriteLock

    写在前面 重入锁ReentrantLock是排他锁,排他锁在同一时刻仅有一个线程可以进行访问,但是在大多数场景下,大部分时间都是提供读服务,而写服务占有的时间较少.然而读服务不存在数据竞争问题,如果一 ...

  4. C#怎么通过一个按钮Button,实现点击这个按钮可以打开一个文件或者文件夹?

    string path1 = @"d:\log.txt";  //打开D盘下的log.txt文件 System.Diagnostics.Process.Start(path1); ...

  5. Android ListView中按钮监听器设置的解决方案

    在做安卓应用开发的时候很经常会用到ListView,并且每一个Item里面都会有按钮之类的需要进行事件监听的控件.在给按钮添加OnClickListener的时候,一开始很下意识的会想在ListVie ...

  6. stanford CS DB 课程 数据库系统实现

    http://infolab.stanford.edu/db_pages/classes.html   CS145: Introduction to Databases   CS245: Databa ...

  7. javascript循环性能比较

    1.数组循环遍历方法 javascript传统的数组遍历有for循环,while循环,以及for-in.本篇文章要比较的是以下几种循环遍历方法: 遍历方式 备注 正向for循环   逆向for循环 减 ...

  8. lodash用法系列(1),数组集合操作

    Lodash用来操作对象和集合,比Underscore拥有更多的功能和更好的性能. 官网:https://lodash.com/引用:<script src="//cdnjs.clou ...

  9. 使用Axure RP原型设计实践02,自定义部件以及熟悉与部件相关面板

    本篇体验在Axure中自定义部件,并熟悉Widget Interations and Notes面板,Widget Properties and Style面板,Widget Manager面板. 在 ...

  10. Java泛型中的标记符含义：

    Java泛型中的标记符含义: E - Element (在集合中使用,因为集合中存放的是元素) T - Type(Java 类) K - Key(键) V - Value(值) N - Number( ...