转载自：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. android 流行框架的使用

    === OKHttp主要功能 1.联网请求文本数据 2.大文件下载 3.大文件上传 4.请求图片 get请求 Request request = new Request.Builder()       ...

  2. tomcat 启动 关闭 重启脚本

    启动 #!/bin/bash # Author:wanglan # Mail:@qq.com # Fuction:Tomcat Start/stop/restart script # Version: ...

  3. Activemq+Zookeeper集群

    如果在同一台机器上请参考 http://blog.csdn.net/liuyifeng1920/article/details/50233067 http://blog.csdn.net/zuolj/ ...

  4. 关于Android中传递数据的一些讨论

    在Android中编写过程序的开发人员都知道.在Activity.Service等组件之间传递数据(尤其是复杂类型的数据)很不方便.一般可以使用Intent来传递可序列化或简单类型的数据.看下面的代码 ...

  5. [Go] 子类 调用 父类 的 属性、方法

    package main import ( "fmt" ) type A struct { Text string Name string } func (a *A) Say() ...

  6. css的浮动

    浮动的框可以向左或向右移动,直到它的外边缘碰到包含框或另一个浮动框的边框为止. 由于浮动框不在文档的普通流中,所以文档的普通流中的块框表现得就像浮动框不存在一样. 一 css的浮动 CSS提供了元素对 ...

  7. 在单链表的第i个位置后插入一个节点（阿里+腾讯等面试题总结）

    时间:2014.04.26 地点:基地 ------------------------- 一.题目 题目是非常easy和基础,就是在单链表的第i个位置后插入一个节点.要求写代码,5分钟之内完毕.面腾 ...

  8. mixpanel实验教程(1)

    一.关于 mixpanel 这个我不想多说,不明确请看官方手冊:https://mixpanel.com/help/reference/ 二.注冊 mixpanel.com 是一个商业机构.它的用户分 ...

  9. 十步轻松搞定IIS+PHP环境搭建

    突然心血来潮想着自己一直使用Apache+php的模式,想要了解一下IIS+php的模式.说起来也算是九曲十八弯吧! 第一部分:以ISAPI.dll 扩展的形式 结果按照资料上面说的我就是找不到一个i ...

  10. iOS 7.1 系统可以设置 button shapes,此功能可让按钮多一条下滑线

    IniOS 7, Apple completely revamped the user interface to give it a fresh and modern look. One of the ...