用easyui很久了,但是很少去看源码. 有解决不了的问题就去百度...
今日发现,easyui的源码不难懂. 而且结合 easyloader 可以非常方便的逐个研究easyui的组件.
但是, easyloader 的官方API介绍非常简略.
easyloader.base = '../'; // 设置 easyui 基础目录
easyloader.load('messager', function(){ // 加载指定模块
$.messager.alert('Title', 'load ok');
});
如上:
(1) easyloader.base ,应该指向哪个目录?
(2) easyloader.load('messager', ... 不需要提前引入css文件吗?
API里没有说明这些问题. 没办法,只能去看源码了.
看过源码之后, 可以知道:
(1) easyloader.base -> 应该指向一个root目录, 此root目录必须是包含plugins, themes, locale ,其实就是从官网下载的easyui某个版本解压后的根目录. (源码中明确设定,加载css从themes目录获取, 加载js从plugins目录获取...)
(2) easyloader.load('messager', function(){}); 也可以写成 using('messager',function(){}) . 这种写法是采用loadModule()方式加载文件的. 会加载module的js和css以及依赖module的js和css.
easyloader 的源码比较简单. 分析源码时,我是采用妙味课堂杜鹏老师分析jquery的方法来的. 分析如下,比较简陋,原因是不难,没什么可写的.
* easyloader [easyui_1.4.2]
|- 源码 {426} 行. (function(){
modules: {} //(15, 199)
locales: {} //(201, 224)
queues:
loadJs(): //(228, 244)
runJs(): //()
loadCss(): //
loadSingle(): //(267, 307)
loadModule(): //(309, 371)
easyloader: { //(373, 403)
modules:
locales:
base:
theme:
css:
locale:
timeout:
load:
onProgress:
onLoad:
} window.using = easyloader.load; //(415, ) })();
写个小例子.
jquery-easyui-1.4.2
|- locale
|- my
|- demo1
|- test.html
|- plugins
|- themes
...
test.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script type="text/javascript" src="../../jquery.min.js"></script>
<script type="text/javascript" src="../../easyloader.js"></script>
<script type="text/javascript">
//
easyloader.base = "../../";
using('messager', function(){
$.messager.alert('系统提示','Hello World!','info');
});
</script>
</head>
<body> </body>
</html>
jquery和easyloader本身必须引入.其他的js和css就不用引入了.
easyloader只是加载easyui量声定制的. 用来作研究还可以. 万能加载还是得学习使用 require.js 和 sea.js