转载自：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. web前端面试经历分享

    十天前,我还在纠结这个暑假到底是呆在实验室研究技术好还是找一份实习见识世面好,而现在我已经接到offer准备工作了.这几天真是累得够呛,一方面需要拼命准备期末考试,另一方面,需要往公司里面跑接受面试. ...

  2. android activity 启动模式

    韩梦飞沙  韩亚飞  313134555@qq.com  yue31313  han_meng_fei_sha 1,标准的, 2,单个 顶部 3,单个 任务 4,单个 实例 标准的 就是 每启动一次这 ...

  3. BZOJ.4355.Play with sequence(线段树)

    题目链接 问题在于操作二.操作二可以拆分成:区间加\(C\).区间(对\(0\))取\(\max\). 注意到操作一的\(C\)都是非负数,即数列中不会出现负数,所以我们直接维护最小值和最小值出现的次 ...

  4. Slickflow.NET 开源工作流引擎高级开发(三) -- 并行分支容器与会签工作流模式的组合

    前言:  流程引擎的核心功能是负责解析流程定义XML和流转,业务环节的不断积累,让人们不断总结和抽象出一些模式,这些模式统称为工作流模式(Workflow Pattern).本文的重点就是介绍一种常见 ...

  5. oracle 11g wm_concat 、 listagg 函数的使用（合并数据）

    方法一 wn_concat() 函数 1.把以下图中Name一样的数据合并为一条,而且NO的值要这样显示如 C.1,C.2 2.实现这种效果的操作如下,先把Name的值进行分组(group by),再 ...

  6. C++11 function

    #include <iostream> #include <functional> #include <vector> using namespace std; / ...

  7. [SQL ERROR 800]Corresponding types must be compatible in CASE expression.

    SQL应用报错800.Corresponding types must be compatible in CASE expression. 错误描述: 11:00:51  [SELECT - 0 ro ...

  8. PHP开启curl_init

    windows主机出现“Call to undefined function curl_init”错误提示,没有定义的函数,也就是php还没打开对curl_init函数的支持. 全文:http://j ...

  9. Docker 传奇之 dotCloud

    2010年,几个大胡子年轻人在旧金山成立了一家做 PaaS 平台的公司,起名为「dotCloud」,这个名字让我想起了微软的「DotNet」. dotCloud 主要是基于 PaaS 平台为开发者或开 ...

  10. AngularJS过滤排序思路

    本篇主要整理使用AngularJS进行过滤排序的思路. 在controller中,$scope的persons字段存储数组. $scope.persons = [ { "name" ...