用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