3.EasyUI学习总结(三)——easyloader源码分析
easyloader模块是用来加载jquery easyui的js和css文件的，即easyloader可以在调用的时候自动加载当前页面所需的文件，不用再自己引用，
而且它可以分析模块的依赖关系，先加载依赖项。模块加载好了会调用parse模块来解析页面。把class是easyui-开头的标签都转化成easyui的控件。
先看Demo1例子，再分析源代码。
有跟后台交互的属性比较多的控件，建议用js
没有跟后台交互的，建议用class
<!DOCTYPE html>
<html>
<head>
<title>easyloader范例</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<!-- 引入JQuery -->
<script type="text/javascript" src="jquery-easyui-1.4.1/jquery.min.js"></script>
<!-- 引入easyloader.js -->
<script type="text/javascript" src="jquery-easyui-1.4.1/easyloader.js"></script>
</head> <body>
<div class="easyui-panel" title="Demo1" fit="false"
collapsible="true" minimizable="true" maximizable="true" closable="true" style="width:100%; height: 200px;" >
easyloader会自动解析这个div，因为class属性中带有easyui开头的类！
</div>
</body>
</html>
/**
* easyloader - jQuery EasyUI
*
* Licensed under the GPL:
* http://www.gnu.org/licenses/gpl.txt
*
* Copyright 2010 stworthy [ stworthy@gmail.com ]
*
*/
(function(){
// 模块文件定义
var modules = {
draggable:{
js:'jquery.draggable.js'
},
droppable:{
js:'jquery.droppable.js'
},
resizable:{
js:'jquery.resizable.js'
},
linkbutton:{
js:'jquery.linkbutton.js',
css:'linkbutton.css'
},
pagination:{
js:'jquery.pagination.js',
css:'pagination.css',
dependencies:['linkbutton']
},
datagrid:{
js:'jquery.datagrid.js',
css:'datagrid.css',
dependencies:['panel','resizable','linkbutton','pagination']
},
treegrid:{
js:'jquery.treegrid.js',
css:'tree.css',
dependencies:['datagrid']
},
panel: {
js:'jquery.panel.js',
css:'panel.css'
},
window:{
js:'jquery.window.js',
css:'window.css',
dependencies:['resizable','draggable','panel']
},
dialog:{
js:'jquery.dialog.js',
css:'dialog.css',
dependencies:['linkbutton','window']
},
messager:{
js:'jquery.messager.js',
css:'messager.css',
dependencies:['linkbutton','window']
},
layout:{
js:'jquery.layout.js',
css:'layout.css',
dependencies:['resizable','panel']
},
form:{
js:'jquery.form.js'
},
menu:{
js:'jquery.menu.js',
css:'menu.css'
},
tabs:{
js:'jquery.tabs.js',
css:'tabs.css',
dependencies:['panel','linkbutton']
},
splitbutton:{
js:'jquery.splitbutton.js',
css:'splitbutton.css',
dependencies:['linkbutton','menu']
},
menubutton:{
js:'jquery.menubutton.js',
css:'menubutton.css',
dependencies:['linkbutton','menu']
},
accordion:{
js:'jquery.accordion.js',
css:'accordion.css',
dependencies:['panel']
},
calendar:{
js:'jquery.calendar.js',
css:'calendar.css'
},
combo:{
js:'jquery.combo.js',
css:'combo.css',
dependencies:['panel','validatebox']
},
combobox:{
js:'jquery.combobox.js',
css:'combobox.css',
dependencies:['combo']
},
combotree:{
js:'jquery.combotree.js',
dependencies:['combo','tree']
},
combogrid:{
js:'jquery.combogrid.js',
dependencies:['combo','datagrid']
},
validatebox:{
js:'jquery.validatebox.js',
css:'validatebox.css'
},
numberbox:{
js:'jquery.numberbox.js',
dependencies:['validatebox']
},
spinner:{
js:'jquery.spinner.js',
css:'spinner.css',
dependencies:['validatebox']
},
numberspinner:{
js:'jquery.numberspinner.js',
dependencies:['spinner','numberbox']
},
timespinner:{
js:'jquery.timespinner.js',
dependencies:['spinner']
},
tree:{
js:'jquery.tree.js',
css:'tree.css',
dependencies:['draggable','droppable']
},
datebox:{
js:'jquery.datebox.js',
css:'datebox.css',
dependencies:['calendar','validatebox']
},
parser:{
js:'jquery.parser.js'
}
}; // 国际化资源文件
var locales = {
'af':'easyui-lang-af.js',
'bg':'easyui-lang-bg.js',
'ca':'easyui-lang-ca.js',
'cs':'easyui-lang-cs.js',
'da':'easyui-lang-da.js',
'de':'easyui-lang-de.js',
'en':'easyui-lang-en.js',
'fr':'easyui-lang-fr.js',
'nl':'easyui-lang-nl.js',
'zh_CN':'easyui-lang-zh_CN.js',
'zh_TW':'easyui-lang-zh_TW.js'
}; // 加载队列
var queues = {}; /**
* 加载js文件函数，过程就是动态创建一个script标签，然后添加到head标签中去。
* 有一个问题是监听了script标签的两个事件函数，一个是onload，另一个是onreadystatechange，这个数要是针对IE和非IE浏览器准备的
* 万恶的IE浏览器！！！
*/
function loadJs(url, callback){
var done = false;
var script = document.createElement('script');
script.type = 'text/javascript';
script.language = 'javascript';
script.src = url;
script.onload = script.onreadystatechange = function(){
if (!done && (!script.readyState || script.readyState == 'loaded' || script.readyState == 'complete')){
done = true;
script.onload = script.onreadystatechange = null;
if (callback){
callback.call(script);
}
}
}
document.getElementsByTagName("head")[0].appendChild(script);
} /**
* 执行js文件。就是把js文件加载进来，再remove掉
* @param url js的url
* @callback 回调函数，执行完js时会调用这个函数
*/
function runJs(url, callback){
loadJs(url, function(){
document.getElementsByTagName("head")[0].removeChild(this);
if (callback){
callback();
}
});
} /**
* 加载css文件。和加载js文件一样，动态创建一个link标签，然后追加到head标签中去
* @param url css的url
* @param callback 回调函数，加载完成后调用此函数
*/
function loadCss(url, callback){
var link = document.createElement('link');
link.rel = 'stylesheet';
link.type = 'text/css';
link.media = 'screen';
link.href = url;
document.getElementsByTagName('head')[0].appendChild(link);
if (callback){
callback.call(link);
}
} /**
* 加载单独的一个模块
*/
function loadSingle(name, callback){ // 加载队列存入该模块名，并表示状态为loading。
queues[name] = 'loading'; // 根据模块名，取出该模块定义
var module = modules[name]; // js加载状态
var jsStatus = 'loading'; // css加载状态，从这里你就可以看出easyloader.css就是一个开关变量，控制是否加载模块相应的css文件
var cssStatus = (easyloader.css && module['css']) ? 'loading' : 'loaded'; // 是css文件，就使用loadCss来加载之
if (easyloader.css && module['css']){
if (/^http/i.test(module['css'])){
var url = module['css'];
} else {
var url = easyloader.base + 'themes/' + easyloader.theme + '/' + module['css'];
}
loadCss(url, function(){
cssStatus = 'loaded';
if (jsStatus == 'loaded' && cssStatus == 'loaded'){
finish();
}
});
} // 是js文件，就是用LoadJs来加载之
if (/^http/i.test(module['js'])){
var url = module['js'];
} else {
var url = easyloader.base + 'plugins/' + module['js'];
}
loadJs(url, function(){
jsStatus = 'loaded';
if (jsStatus == 'loaded' && cssStatus == 'loaded'){
finish();
}
}); // 最终调用finish函数，来结束加载。并触发onProgress函数，每加载成功一个模块，就调用一次onProgress
function finish(){
queues[name] = 'loaded';
easyloader.onProgress(name);
if (callback){
callback();
}
}
} /**
* easyui模块加载函数
* @param name 模块名，可以是string，也可以是数组
* @param callback 回调函数，当加载结束后会调用此函数
*/
function loadModule(name, callback){ // 模块名，根据依赖关系，从前到后，依次排开
var mm = []; // 加载标识，当其值为true时，表示需要加载的模块已经加载好了
var doLoad = false; // 模块名支持两中，一种是string，一种是数组。这样就可以一次加载多个模块了
if (typeof name == 'string'){
// 是string的时候，调用add方法把模块名push到mm数组中去
add(name);
} else {
for(var i=0; i<name.length; i++){
// 是数组的时候，循环调用add方法把模块名统统push到mm数组中去
add(name[i]);
}
} /**
* loadModule函数中内嵌的一个函数，用来加载模块名到变量mm数组中去
* @param name 模块名，只能是string
*/
function add(name){
// 保护措施，如果该模块名不存在，我们就不要加载了
if (!modules[name]) return; // 否则，就是该模块存在。然后，我们在看看其有没有依赖模块
var d = modules[name]['dependencies'];
if (d){
// 如果有依赖模块，我们要先把依赖模块的名字push到mm中去
// 这里用了递归调用
for(var i=0; i<d.length; i++){
add(d[i]);
}
} // 把模块名放到mm中
mm.push(name);
} /**
* 当一个模块及其依赖模块加载完成时，执行回调函数，并且触发onLoad函数
*/
function finish(){
if (callback){
callback();
}
easyloader.onLoad(name);
} // 加载用时
var time = 0; /**
* 加载所需要的模块，需要的模块，我们已经统计好了，并按依赖关系，先后push到mm中去了
*/
function loadMm(){
// 判断mm是不是空的
if (mm.length){ // 第一个模块
var m = mm[0]; // 判断加载队列是否包含此模块
if (!queues[m]){ // 加载队列不包含此模块，开始加载该模块
// 把doLoad置成true，表示开始加载
doLoad = true; // 调用loadSingle方法来加载模块，加载成功后会把此模块从mm中shift掉，然后继续调用loadMM方法，就形成了递归调用
loadSingle(m, function(){
mm.shift();
loadMm();
});
} else if (queues[m] == 'loaded'){
// 加载队列已经加载过此模块了，不需要在加载了，直接从mm中shift掉即可
mm.shift();
loadMm();
} else {
// 表示正在加载该模块，累计所用时间如果没有超过timeout
// 则过10毫秒再调用一次loadMm函数
if (time < easyloader.timeout){
time += 10;
setTimeout(arguments.callee, 10);
}
}
} else {
// 走到这里，表示该加载的模块都已经加载好了
if (easyloader.locale && doLoad == true && locales[easyloader.locale]){
// 如果设置了国际化，并且已经加载好了，而且该国际化资源还存在，那么加载该资源js
var url = easyloader.base + 'locale/' + locales[easyloader.locale]; // 执行js完事后，调用finish方法
runJs(url, function(){
finish();
});
} else {
// 没定义国际化文件，那么直接调用finish方法吧
finish();
}
}
} loadMm();
} /**
* easyloader定义为全局变量
*/
easyloader = { // 各个模块文件的定义，包括js、css和依赖模块
modules:modules, // 国际化资源文件
locales:locales, // jquery-easyui的根目录，在加载easyloader时，会自动根据你放置的位置而改变
base:'.', // 控件的主题，一共就有两个，在theme目录中。还有一个gray主题，浅灰色的，很难看。
theme:'default', // 这是一个开关变量，控制easyloader加载模块时，要不要加载相应的css文件，默认是需要加载的
css:true, // 国际化语言，可以根据window.navigator.language或者window.navigator.userLanguage来获取当前浏览器的语言。
// 有两个属性，主要因为IE浏览器只认识userLanguage和sysLanguage，万恶的IE浏览器啊！
locale:null, // 加载一个模块的最长时间，超过这个时间，就开始加载下一个模块了。
timeout:2000, // easyloader就公开了这么一个方法，用来加载模块。
// name是模块名，callback是加载成功后执行的函数
load: function(name, callback){
if (//.css$/i.test(name)){
// 如果模块名是以.css结尾 if (/^http/i.test(name)){
// 如果模块名是以http开头，那么css是一个文件的url
loadCss(name, callback);
} else {
// 否则，说明模块名相对于jquery easyui根目录来说的
loadCss(easyloader.base + name, callback);
}
} else if (//.js$/i.test(name)){
// 如果模块名是以.js结尾 if (/^http/i.test(name)){
// 如果模块名是以http开头，那么js是一个文件的url
loadJs(name, callback);
} else {
// 否则，说明模块名相对于jquery easyui根目录来说的
loadJs(easyloader.base + name, callback);
}
} else {
// 以上两种都不是，说明是easyui自己的模块，直接使用loadModule来加载，就可以了
loadModule(name, callback);
}
}, // 当一个模块加载完会触发此函数
onProgress: function(name){}, // 当一个模块和其依赖都加载完会触发此函数
onLoad: function(name){}
};
/**
* 这一小段代码就是查找jquery-easyui的根目录，并赋值给easyloader的base属性上。这样easyloader再加载css文件和js文件就很方便定位了。
*/
var scripts = document.getElementsByTagName('script');
for(var i=0; i<scripts.length; i++){
var src = scripts[i].src;
if (!src) continue;
var m = src.match(/easyloader/.js(/W|$)/i);
if (m){
easyloader.base = src.substring(0, m.index);
}
}
/**
* 这个就起一个别名的作用，比如页面中可以想如下这么下：
* using('window');
* 这样window模块就加载进来了！
*/
window.using = easyloader.load;
/**
* easyloader.js加载的第一模块是parse模块，parser模块调用parse方法，可以解析页面上的easyui控件
*/
if (window.jQuery){
jQuery(function(){
easyloader.load('parser', function(){
jQuery.parser.parse();
});
});
} })();
/**
* parser模块主要是解析页面中easyui的控件
*/
$.parser = {
// 是否自动解析
auto: true, // 可以被解析的控件
plugins:['linkbutton','menu','menubutton','splitbutton','layout',
'tree','window','dialog','datagrid',
'combobox','combotree','numberbox','validatebox',
'calendar','datebox','panel','tabs','accordion'
], // 解析函数
parse: function(context){
if ($.parser.auto){
for(var i=0; i<$.parser.plugins.length; i++){
(function(){
// 控件名
var name = $.parser.plugins[i];
// 查找class为easyui-控件名的jq对象，例如，easyui-layout
var r = $('.easyui-' + name, context); if (r.length){
// 如果有这个对象，那么判断它有没有初始化函数
if (r[name]){
// 如果有直接调用
r[name]();
} else if (window.easyloader){
// 如果没有用easyloader把模块的js文件载入进来，再调用
easyloader.load(name, function(){
r[name]();
})
}
}
})();
}
}
}
}; // 调用parse方法，实际上easyloader中已经调用了，我估计这个是给不是easyloader加载时使用的
$(function(){
$.parser.parse();
});
})(jQuery);
3.EasyUI学习总结(三)——easyloader源码分析的更多相关文章
- EasyUI学习总结(三)——easyloader源码分析(转载)
声明:这一篇文章是转载过来的,转载地址忘记了,原作者如果看到了,希望能够告知一声,我好加上去! easyloader模块是用来加载jquery easyui的js和css文件的,而且它可以分析模块的依 ...
- EasyUI学习总结(四)——parser源码分析
parser模块是easyloader第一个加载的模块,它的主要作用,就是扫描页面上easyui开头的class标签,然后初始化成easyui控件. /** * parser模块主要是解析页面中eas ...
- EasyUI学习总结(四)——parser源码分析（转载）
本文转载自:http://www.cnblogs.com/xdp-gacl/p/4082561.html parser模块是easyloader第一个加载的模块,它的主要作用,就是扫描页面上easyu ...
- memcached学习笔记——存储命令源码分析下篇
上一篇回顾:<memcached学习笔记——存储命令源码分析上篇>通过分析memcached的存储命令源码的过程,了解了memcached如何解析文本命令和mencached的内存管理机制 ...
- memcached学习笔记——存储命令源码分析上篇
原创文章,转载请标明,谢谢. 上一篇分析过memcached的连接模型,了解memcached是如何高效处理客户端连接,这一篇分析memcached源码中的process_update_command ...
- Redis学习之底层链表源码分析
Redis底层链表的源码分析: 一.链表结点的结构(单个结点): // listNode 双端链表节点 typedef struct listNode { // 前置节点 struct listNod ...
- HashMap(三)之源码分析
通过分析HashMap来学习源码,那么通过此过程我们要带着这几个问题去一起探索 为什么要学习源码 怎么去学习 0.1 为什么要学习源码 这个问题,直接给出结论,学习源码肯定是有好处的,比如: 学习优秀 ...
- tornado 学习笔记6 Application 源码分析
Application 是Tornado重要的模块之一,主要是配置访问路由表及其他应用参数的设置. 源代码位于虚拟运行环境文件夹下(我的是env),具体位置为env > lib>sit-p ...
- Netty学习笔记(三)——netty源码剖析
1.Netty启动源码剖析 启动类: public class NettyNioServer { public static void main(String[] args) throws Excep ...
随机推荐
- Zencart视频教程 Zencart模板制作教程视频 Zencart仿站教程资料
Zen Cart是国外一个免费的.界面友好,开放式源码的购物车软件,是目前外贸行业使用最为广泛的网站程序.本仿站技术需要你有一定的html和css基础,易学易懂,一步一步地教你操作和使用Zen Car ...
- JS截取字符串
使用 substring()或者slice() 函数:split() 功能:使用一个指定的分隔符把一个字符串分割存储到数组例子:str=”jpg|bmp|gif|ico|png”;arr=theStr ...
- HttpClient学习整理
HttpClient简介HttpClient 功能介绍 1． 读取网页(HTTP/HTTPS)内容 2.使用POST方式提交数据(httpClient3) 3． 处理页面重定向 ...
- Dell xps 13 9350待机时总是关机的处理方法
现象: 年初买的dell xps13 9350,最近可能是由于win10做了一些更新,每次睡眠就自动关机了,重启很多次,修改电源选项都没用, 原因分析: 在网上搜了一下,有人发现xps15 9350也 ...
- Fiddler 使用备忘
快捷键 ctrl + f(session 查询,高亮) ctrl + x(清除所有 session) alt + q(定位到命令行,以下操作为命令行语句) help(查看帮助文档) select sc ...
- 终于等到你---订餐系统之负载均衡（nginx+memcached+ftp上传图片+iis）
又见毕业 对面工商大学的毕业生叕在拍毕业照了,一个个脸上都挂满了笑容,也许是满意自己四年的修行,也许是期待步入繁华的社会... 恰逢其时的连绵细雨与满天柳絮,似乎也是在映衬他们心中那些离别的忧伤,与对 ...
- C#反射在ADO中的巧用
在C#原生开发网站的时候,经常会碰到一个问题,后台用原生查出来的数据一般是DataReader或者是DataTable,这样就把数据从数据库中拿到了,然后就是把数据绑定到前台页面进行输出,这是最原生态 ...
- 腾讯云CentOS Apache开启HTTPS
1.申请SSL证书 https://console.qcloud.com/ssl?utm_source=yingyongbao&utm_medium=ssl&utm_campaign= ...
- [转]Eclipse SVN冲突解决
原文地址:http://www.devnote.cn/article/82.html 基本原则是:每次提交前需要先和线上的对比,先把冲突解决掉,然后把线上的更新到本地,最后把本地的提交上去. 右键项目 ...
- 设计模式 “续”
观察者模式 再次申明,本文学习自 程杰 兄的 "大话设计模式" 根据书中的内容和自己的体会而来. 观察者模式也叫 发布.订阅模式,在这个模式里,一个目标物件管理所有依赖它的观察者物 ...