用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

easyloader [easyui_1.4.2] 分析源码,妙手偶得之的更多相关文章

  1. java分析源码－ReentrantLock

    一.前言 在分析了 AbstractQueuedSynchronier 源码后,接着分析ReentrantLock源码,其实在 AbstractQueuedSynchronizer 的分析中,已经提到 ...

  2. Flink源码分析 - 源码构建

    原文地址:https://mp.weixin.qq.com/s?__biz=MzU2Njg5Nzk0NQ==&mid=2247483692&idx=1&sn=18cddc1ee ...

  3. Elasticsearch源码分析 - 源码构建

    原文地址:https://mp.weixin.qq.com/s?__biz=MzU2Njg5Nzk0NQ==&mid=2247483694&idx=1&sn=bd03afe5a ...

  4. tensorflow运行原理分析(源码)

    tensorflow运行原理分析(源码)  https://pan.baidu.com/s/1GJzQg0QgS93rfsqtIMURSA

  5. 【Azure 应用服务】Azure Function App使用SendGrid发送邮件遇见异常消息The operation was canceled，分析源码逐步最终源端

    问题描述 在使用Azure Function App的SendGrid Binging功能,调用SendGrid服务器发送邮件功能时,有时候遇见间歇性,偶发性异常.在重新触发SendGrid部分的Fu ...

  6. 鸿蒙内核源码分析(源码结构篇) | 内核每个文件的含义 | 百篇博客分析OpenHarmony源码 | v18.04

    百篇博客系列篇.本篇为: v18.xx 鸿蒙内核源码分析(源码结构篇) | 内核每个文件的含义 | 51.c.h .o 前因后果相关篇为: v08.xx 鸿蒙内核源码分析(总目录) | 百万汉字注解 ...

  7. 鸿蒙内核源码分析(源码注释篇) | 鸿蒙必定成功，也必然成功 | 百篇博客分析OpenHarmony源码 | v13.02

    百篇博客系列篇.本篇为: v13.xx 鸿蒙内核源码分析(源码注释篇) | 鸿蒙必定成功,也必然成功 | 51.c.h .o 几点说明 kernel_liteos_a_note | 中文注解鸿蒙内核 ...

  8. Servlet-Cookie源码分析 源码环境：Tomcat8

    最近在学习servlet的一些实现细节,阅读了Cookie的源码. Cookie本质上是服务器发送给客户端(主要是浏览器)的一个会话临时数据. 其源码注释文档的说明: Creates a cookie ...

  9. Spark BlockManager的通信及内存占用分析(源码阅读九）

    之前阅读也有总结过Block的RPC服务是通过NettyBlockRpcServer提供打开,即下载Block文件的功能.然后在启动jbo的时候由Driver上的BlockManagerMaster对 ...

随机推荐

  1. 常见AutoCAD病毒(acad.fas、acad.lsp)清除方法

    常见AutoCAD病毒(acad.fas.acad.lsp)清除方法 acad.fas.acad.lsp这两种病毒是最常见的CAD病毒了,而且往往同一时候出现.因为其本身对系统并不具备危害性,不过恶作 ...

  2. delphi 中DLL的建立

    Dll的创建与调用   File ->New->Other->Dll Wizard  DLL的创建 //可以将本代码复制粘贴到项目中 library Project1; uses S ...

  3. 架构师之路(39)---IoC框架

    1 IoC理论的背景     我们都知道,在採用面向对象方法设计的软件系统中,它的底层实现都是由N个对象组成的,全部的对象通过彼此的合作,终于实现系统的业务逻辑.   图1:软件系统中耦合的对象 假设 ...

  4. zencart技术联盟交流群

    增加500人的免费互助"zencart技术联盟交流群"!名额不多,先到先得! zencart技术联盟俱乐部(1群) ( 已满) zencart技术联盟俱乐部(2群) 群号:1990 ...

  5. 进程间通信之POSIX信号量

    POSIX信号量接口,意在解决XSI信号量接口的几个不足之处: POSIX信号量接口相比于XSI信号量接口,允许更高性能的实现. POSIX信号量接口简单易用:没有信号量集,其中一些接口模仿了我们熟悉 ...

  6. 阅读uboot

    下面是一个执行make XXX_config后的打印信息: pengdl@debian:~/work/costdown/new/Hi3520D_SDK_V1.0.2.2c/source/arm11/u ...

  7. struts2.1笔记07：Sturts.xml配置中的包介绍

    1. 2.这里上面namespace作用是介绍: (1)如果<package>配置在struts1中如下: (2)同样的配置在struts2中如下:

  8. Node.js module.exports和exports的区别

    require 用来加载代码,而 exports 和 module.exports 则用来导出代码,从接触node.js就不会它们两陌生,上代码: foo.js exports.a = functio ...

  9. 模拟游客一天的生活与旅游java程序代写源码

    在某个城市的商业区里,有一家首饰店,一家饭店,一家面馆,一家火锅店,一家银行,一家当铺 现在有一群来自四川的游客,一群陕西的游客,一群上海的游客,和以上各店家的工作人员在此区域里,请模拟他们一天的生活 ...

  10. linux 文件夹权限及umask

    先创建一个目录,看看权限: $ ll 总用量 drwxrwxr-x huangxm huangxm 2月 : ./ drwxr-xr-x huangxm huangxm 2月 : ../ drwxrw ...