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. XCode的 Stack Trace,调试时抛出异常,定位到某一行代码

    在Xcode调试程序的时候,总是会出现不知道错误在什么地方的问题,很是捉急,现在又一个办法,可以具体定位到错误行的代码,试一下吧?超级好用 操作很简单: 1.在XCode界面中按cmd + 6快捷键, ...

  2. Android 中调试手段 打印函数调用栈信息

    下面来简单介绍下 android 中的一种调试方法. 在 android 的 app 开发与调试中,经常需要用到打 Log 的方式来查看函数调用点. 这里介绍一种方法来打印当前栈中的函数调用关系 St ...

  3. 如何在 kernel 和 hal 层读取同一个标志

    很多时候我们需要从 HAL 层(Hardware Abstract Layer)传一个标志给 kernel 层.一般这种传递是不能直接通过定义全局变量来实现的. 此时可以通过读写文件来实现该标志. 譬 ...

  4. memcached工作原理与优化建议

    申明,本文为转载文:http://my.oschina.net/liuxd/blog/63129 工作原理 基本概念:slab,page,chunk. slab,是一个逻辑概念.它是在启动memcac ...

  5. 妙味WEB前端开发全套视频教程+项目实战+移动端开发(99G)

    一共99GB的视频教程,全部存于百度网盘中,13个栏目,每个栏目里还划分有独立的小栏目 最基本的web前端学习介绍,到项目实战,再到移动端的开发,真正彻底掌握前端开发的精髓: 视频教程在线预览:(百度 ...

  6. 手把手教你开发chrome扩展一:开发Chrome Extenstion其实很简单

    手把手教你开发chrome扩展一:开发Chrome Extenstion其实很简单   手把手教你开发chrome扩展一:开发Chrome Extenstion其实很简单 手把手教你开发Chrome扩 ...

  7. Linux常用指令---netstat(网络端口)

    netstat命令用于显示与IP.TCP.UDP和ICMP协议相关的统计数据,一般用于检验本机各端口的网络连接情况.netstat是在内核中访问网络及相关信息的程序,它能提供TCP连接,TCP和UDP ...

  8. UIPasteboard的使用

    剪贴板的使用以及自定义剪贴板. 系统剪贴板的直接调用 其实整个过程非常的简单,我就用我写的一个自定义UILable来说明调用系统剪贴板. 首先,因为苹果只放出来了 UITextView,UITextF ...

  9. windows编程原理

    这里在学网络编程时遇到了讲解windows的编程,稍微整理一下windows编程原理,顺便复习一下. 首先,理解Windows 程序运行原理:Windows应用程序,操作系统,计算机硬件之间的相互关系 ...

  10. 6.HBase In Action 第一章-HBase简介(1.2 HBase的使用场景和成功案例)

    Sometimes the best way to understand a software product is to look at how it's used. The kinds of pr ...