首页 > 代码库 > EasyUI学习总结(三)——easyloader源码分析
EasyUI学习总结(三)——easyloader源码分析
EasyUI学习总结(三)——easyloader源码分析
easyloader模块是用来加载jquery easyui的js和css文件的，而且它可以分析模块的依赖关系，先加载依赖项。模块加载好了会调用parse模块来解析页面。把class是easyui开头的标签都转化成easyui的控件。
先看Demo1例子，再分析源代码。
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <title>easyloader范例</title> 5 <meta http-equiv="content-type" content="text/html; charset=UTF-8"> 6 <!-- 引入JQuery --> 7 <script type="text/javascript" src="http://www.mamicode.com/jquery-easyui-1.4.1/jquery.min.js"></script> 8 <!-- 引入easyloader.js --> 9 <script type="text/javascript" src="http://www.mamicode.com/jquery-easyui-1.4.1/easyloader.js"></script> 10 </head> 11 12 <body> 13 <div class="easyui-panel" title="Demo1" fit="false" 14 collapsible="true" minimizable="true" maximizable="true" closable="true" style="width:100%; height: 200px;" > 15 easyloader会自动解析这个div，因为class属性中带有easyui开头的类！ 16 </div> 17 </body> 18 </html>
运行结果如下所示：
easyloader源码分析
1 /**
2 * easyloader - jQuery EasyUI
3 *
4 * Licensed under the GPL:
5 * http://www.gnu.org/licenses/gpl.txt
6 *
7 * Copyright 2010 stworthy [ stworthy@gmail.com ]
8 *
9 */
10 (function(){
11 // 模块文件定义
12 var modules = {
13 draggable:{
14 js:‘jquery.draggable.js‘
15 },
16 droppable:{
17 js:‘jquery.droppable.js‘
18 },
19 resizable:{
20 js:‘jquery.resizable.js‘
21 },
22 linkbutton:{
23 js:‘jquery.linkbutton.js‘,
24 css:‘linkbutton.css‘
25 },
26 pagination:{
27 js:‘jquery.pagination.js‘,
28 css:‘pagination.css‘,
29 dependencies:[‘linkbutton‘]
30 },
31 datagrid:{
32 js:‘jquery.datagrid.js‘,
33 css:‘datagrid.css‘,
34 dependencies:[‘panel‘,‘resizable‘,‘linkbutton‘,‘pagination‘]
35 },
36 treegrid:{
37 js:‘jquery.treegrid.js‘,
38 css:‘tree.css‘,
39 dependencies:[‘datagrid‘]
40 },
41 panel: {
42 js:‘jquery.panel.js‘,
43 css:‘panel.css‘
44 },
45 window:{
46 js:‘jquery.window.js‘,
47 css:‘window.css‘,
48 dependencies:[‘resizable‘,‘draggable‘,‘panel‘]
49 },
50 dialog:{
51 js:‘jquery.dialog.js‘,
52 css:‘dialog.css‘,
53 dependencies:[‘linkbutton‘,‘window‘]
54 },
55 messager:{
56 js:‘jquery.messager.js‘,
57 css:‘messager.css‘,
58 dependencies:[‘linkbutton‘,‘window‘]
59 },
60 layout:{
61 js:‘jquery.layout.js‘,
62 css:‘layout.css‘,
63 dependencies:[‘resizable‘,‘panel‘]
64 },
65 form:{
66 js:‘jquery.form.js‘
67 },
68 menu:{
69 js:‘jquery.menu.js‘,
70 css:‘menu.css‘
71 },
72 tabs:{
73 js:‘jquery.tabs.js‘,
74 css:‘tabs.css‘,
75 dependencies:[‘panel‘,‘linkbutton‘]
76 },
77 splitbutton:{
78 js:‘jquery.splitbutton.js‘,
79 css:‘splitbutton.css‘,
80 dependencies:[‘linkbutton‘,‘menu‘]
81 },
82 menubutton:{
83 js:‘jquery.menubutton.js‘,
84 css:‘menubutton.css‘,
85 dependencies:[‘linkbutton‘,‘menu‘]
86 },
87 accordion:{
88 js:‘jquery.accordion.js‘,
89 css:‘accordion.css‘,
90 dependencies:[‘panel‘]
91 },
92 calendar:{
93 js:‘jquery.calendar.js‘,
94 css:‘calendar.css‘
95 },
96 combo:{
97 js:‘jquery.combo.js‘,
98 css:‘combo.css‘,
99 dependencies:[‘panel‘,‘validatebox‘]
100 },
101 combobox:{
102 js:‘jquery.combobox.js‘,
103 css:‘combobox.css‘,
104 dependencies:[‘combo‘]
105 },
106 combotree:{
107 js:‘jquery.combotree.js‘,
108 dependencies:[‘combo‘,‘tree‘]
109 },
110 combogrid:{
111 js:‘jquery.combogrid.js‘,
112 dependencies:[‘combo‘,‘datagrid‘]
113 },
114 validatebox:{
115 js:‘jquery.validatebox.js‘,
116 css:‘validatebox.css‘
117 },
118 numberbox:{
119 js:‘jquery.numberbox.js‘,
120 dependencies:[‘validatebox‘]
121 },
122 spinner:{
123 js:‘jquery.spinner.js‘,
124 css:‘spinner.css‘,
125 dependencies:[‘validatebox‘]
126 },
127 numberspinner:{
128 js:‘jquery.numberspinner.js‘,
129 dependencies:[‘spinner‘,‘numberbox‘]
130 },
131 timespinner:{
132 js:‘jquery.timespinner.js‘,
133 dependencies:[‘spinner‘]
134 },
135 tree:{
136 js:‘jquery.tree.js‘,
137 css:‘tree.css‘,
138 dependencies:[‘draggable‘,‘droppable‘]
139 },
140 datebox:{
141 js:‘jquery.datebox.js‘,
142 css:‘datebox.css‘,
143 dependencies:[‘calendar‘,‘validatebox‘]
144 },
145 parser:{
146 js:‘jquery.parser.js‘
147 }
148 };
149
150 // 国际化资源文件
151 var locales = {
152 ‘af‘:‘easyui-lang-af.js‘,
153 ‘bg‘:‘easyui-lang-bg.js‘,
154 ‘ca‘:‘easyui-lang-ca.js‘,
155 ‘cs‘:‘easyui-lang-cs.js‘,
156 ‘da‘:‘easyui-lang-da.js‘,
157 ‘de‘:‘easyui-lang-de.js‘,
158 ‘en‘:‘easyui-lang-en.js‘,
159 ‘fr‘:‘easyui-lang-fr.js‘,
160 ‘nl‘:‘easyui-lang-nl.js‘,
161 ‘zh_CN‘:‘easyui-lang-zh_CN.js‘,
162 ‘zh_TW‘:‘easyui-lang-zh_TW.js‘
163 };
164
165 // 加载队列
166 var queues = {};
167
168 /**
169 * 加载js文件函数，过程就是动态创建一个script标签，然后添加到head标签中去。
170 * 有一个问题是监听了script标签的两个事件函数，一个是onload，另一个是onreadystatechange，这个数要是针对IE和非IE浏览器准备的
171 * 万恶的IE浏览器！！！
172 */
173 function loadJs(url, callback){
174 var done = false;
175 var script = document.createElement(‘script‘);
176 script.type = ‘text/javascript‘;
177 script.language = ‘javascript‘;
178 script.src = http://www.mamicode.com/url;"head")[0].appendChild(script);
189 }
190
191 /**
192 * 执行js文件。就是把js文件加载进来，再remove掉
193 * @param url js的url
194 * @callback 回调函数，执行完js时会调用这个函数
195 */
196 function runJs(url, callback){
197 loadJs(url, function(){
198 document.getElementsByTagName("head")[0].removeChild(this);
199 if (callback){
200 callback();
201 }
202 });
203 }
204
205 /**
206 * 加载css文件。和加载js文件一样，动态创建一个link标签，然后追加到head标签中去
207 * @param url css的url
208 * @param callback 回调函数，加载完成后调用此函数
209 */
210 function loadCss(url, callback){
211 var link = document.createElement(‘link‘);
212 link.rel = ‘stylesheet‘;
213 link.type = ‘text/css‘;
214 link.media = ‘screen‘;
215 link.href = http://www.mamicode.com/url;>
到这里easyloader就分析结束了，如果你仔细看过了，相信一定会使用easyloader了
EasyUI学习总结(三)——easyloader源码分析
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。