用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. Codeforces Round #277 (Div. 2) E. LIS of Sequence DP

    E. LIS of Sequence Time Limit: 20 Sec Memory Limit: 256 MB 题目连接 http://codeforces.com/contest/486/pr ...

  2. Codeforces Bubble Cup 8 - Finals [Online Mirror]H. Bots 数学

    H. Bots Time Limit: 1 Sec Memory Limit: 256 MB 题目连接 http://codeforces.com/contest/575/problem/H Desc ...

  3. ApiDemo/FragmentRetainInstance 解析

    /* * Copyright (C) 2010 The Android Open Source Project * * Licensed under the Apache License, Versi ...

  4. seajs 2.3.0 加入jquery

    [前言] 上篇文章简单的介绍了seajs的使用,下午使用seajs整合jquery就碰到问题了. 下载seajs上的examples,里面直接require('jquery')没有不论什么问题, 我照 ...

  5. springMVC2 1入门程序

    1入门程序 .1需求 实现商品列表查询 .2需要的jar包 使用spring3.2.0(带springwebmvc模块) .1前端控制器 在web.xml中配置: <?xml version=& ...

  6. mybatis0210 mybatis和ehcache缓存框架整合

    .1mybatis和ehcache缓存框架整合 一般不用mybatis来管理缓存而是用其他缓存框架在管理缓存,因为其他缓存框架管理缓存会更加高效,因为别人专业做缓存的而mybatis专业做sql语句的 ...

  7. android150 笔记

    1. 什么是Activity? 四大组件之一,一般的,一个用户交互界面对应一个activity,界面的容器. setContentView() ,// 要显示的布局 button.setOnclick ...

  8. 判断脚本,图片,CSS,iframe等是否加载完成

    1.图片 <img id="MyImg" src="src"/>jquery实现:$("#MyImg").load(functi ...

  9. Java中 return 和finally

    1. 最简单的情形 public void main(){ String s = test(); System.out.println("s=[" + s + "]&qu ...

  10. MYSQL基础笔记(六)- 数据类型一

    数据类型(列类型) 所谓数据烈性,就是对数据进行统一的分类.从系统角度出发时为了能够使用统一的方式进行管理,更好的利用有限的空间. SQL中讲数据类型分成三大类:1.数值类型,2.字符串类型和时间日期 ...