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="jquery-easyui-1.4.1/jquery.min.js"></script> 8 <!-- 引入easyloader.js --> 9 <script type="text/javascript" src="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 = url;
179 script.onload = script.onreadystatechange = function(){
180 if (!done && (!script.readyState || script.readyState == ‘loaded‘ || script.readyState == ‘complete‘)){
181 done = true;
182 script.onload = script.onreadystatechange = null;
183 if (callback){
184 callback.call(script);
185 }
186 }
187 }
188 document.getElementsByTagName("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 = url;
216 document.getElementsByTagName(‘head‘)[0].appendChild(link);
217 if (callback){
218 callback.call(link);
219 }
220 }
221
222 /**
223 * 加载单独的一个模块
224 */
225 function loadSingle(name, callback){
226
227 // 加载队列存入该模块名，并表示状态为loading。
228 queues[name] = ‘loading‘;
229
230 // 根据模块名，取出该模块定义
231 var module = modules[name];
232
233 // js加载状态
234 var jsStatus = ‘loading‘;
235
236 // css加载状态，从这里你就可以看出easyloader.css就是一个开关变量，控制是否加载模块相应的css文件
237 var cssStatus = (easyloader.css && module[‘css‘]) ? ‘loading‘ : ‘loaded‘;
238
239 // 是css文件，就使用loadCss来加载之
240 if (easyloader.css && module[‘css‘]){
241 if (/^http/i.test(module[‘css‘])){
242 var url = module[‘css‘];
243 } else {
244 var url = easyloader.base + ‘themes/‘ + easyloader.theme + ‘/‘ + module[‘css‘];
245 }
246 loadCss(url, function(){
247 cssStatus = ‘loaded‘;
248 if (jsStatus == ‘loaded‘ && cssStatus == ‘loaded‘){
249 finish();
250 }
251 });
252 }
253
254 // 是js文件，就是用LoadJs来加载之
255 if (/^http/i.test(module[‘js‘])){
256 var url = module[‘js‘];
257 } else {
258 var url = easyloader.base + ‘plugins/‘ + module[‘js‘];
259 }
260 loadJs(url, function(){
261 jsStatus = ‘loaded‘;
262 if (jsStatus == ‘loaded‘ && cssStatus == ‘loaded‘){
263 finish();
264 }
265 });
266
267 // 最终调用finish函数，来结束加载。并触发onProgress函数，每加载成功一个模块，就调用一次onProgress
268 function finish(){
269 queues[name] = ‘loaded‘;
270 easyloader.onProgress(name);
271 if (callback){
272 callback();
273 }
274 }
275 }
276
277 /**
278 * easyui模块加载函数
279 * @param name 模块名，可以是string，也可以是数组
280 * @param callback 回调函数，当加载结束后会调用此函数
281 */
282 function loadModule(name, callback){
283
284 // 模块名，根据依赖关系，从前到后，依次排开
285 var mm = [];
286
287 // 加载标识，当其值为true时，表示需要加载的模块已经加载好了
288 var doLoad = false;
289
290 // 模块名支持两中，一种是string，一种是数组。这样就可以一次加载多个模块了
291 if (typeof name == ‘string‘){
292 // 是string的时候，调用add方法把模块名push到mm数组中去
293 add(name);
294 } else {
295 for(var i=0; i<name.length; i++){
296 // 是数组的时候，循环调用add方法把模块名统统push到mm数组中去
297 add(name[i]);
298 }
299 }
300
301 /**
302 * loadModule函数中内嵌的一个函数，用来加载模块名到变量mm数组中去
303 * @param name 模块名，只能是string
304 */
305 function add(name){
306 // 保护措施，如果该模块名不存在，我们就不要加载了
307 if (!modules[name]) return;
308
309 // 否则，就是该模块存在。然后，我们在看看其有没有依赖模块
310 var d = modules[name][‘dependencies‘];
311 if (d){
312 // 如果有依赖模块，我们要先把依赖模块的名字push到mm中去
313 // 这里用了递归调用
314 for(var i=0; i<d.length; i++){
315 add(d[i]);
316 }
317 }
318
319 // 把模块名放到mm中
320 mm.push(name);
321 }
322
323 /**
324 * 当一个模块及其依赖模块加载完成时，执行回调函数，并且触发onLoad函数
325 */
326 function finish(){
327 if (callback){
328 callback();
329 }
330 easyloader.onLoad(name);
331 }
332
333 // 加载用时
334 var time = 0;
335
336 /**
337 * 加载所需要的模块，需要的模块，我们已经统计好了，并按依赖关系，先后push到mm中去了
338 */
339 function loadMm(){
340 // 判断mm是不是空的
341 if (mm.length){
342
343 // 第一个模块
344 var m = mm[0];
345
346 // 判断加载队列是否包含此模块
347 if (!queues[m]){
348
349 // 加载队列不包含此模块，开始加载该模块
350 // 把doLoad置成true，表示开始加载
351 doLoad = true;
352
353 // 调用loadSingle方法来加载模块，加载成功后会把此模块从mm中shift掉，然后继续调用loadMM方法，就形成了递归调用
354 loadSingle(m, function(){
355 mm.shift();
356 loadMm();
357 });
358 } else if (queues[m] == ‘loaded‘){
359 // 加载队列已经加载过此模块了，不需要在加载了，直接从mm中shift掉即可
360 mm.shift();
361 loadMm();
362 } else {
363 // 表示正在加载该模块，累计所用时间如果没有超过timeout
364 // 则过10毫秒再调用一次loadMm函数
365 if (time < easyloader.timeout){
366 time += 10;
367 setTimeout(arguments.callee, 10);
368 }
369 }
370 } else {
371 // 走到这里，表示该加载的模块都已经加载好了
372 if (easyloader.locale && doLoad == true && locales[easyloader.locale]){
373 // 如果设置了国际化，并且已经加载好了，而且该国际化资源还存在，那么加载该资源js
374 var url = easyloader.base + ‘locale/‘ + locales[easyloader.locale];
375
376 // 执行js完事后，调用finish方法
377 runJs(url, function(){
378 finish();
379 });
380 } else {
381 // 没定义国际化文件，那么直接调用finish方法吧
382 finish();
383 }
384 }
385 }
386
387 loadMm();
388 }
389
390 /**
391 * easyloader定义为全局变量
392 */
393 easyloader = {
394
395 // 各个模块文件的定义，包括js、css和依赖模块
396 modules:modules,
397
398 // 国际化资源文件
399 locales:locales,
400
401 // jquery-easyui的根目录，在加载easyloader时，会自动根据你放置的位置而改变
402 base:‘.‘,
403
404 // 控件的主题，一共就有两个，在theme目录中。还有一个gray主题，浅灰色的，很难看。
405 theme:‘default‘,
406
407 // 这是一个开关变量，控制easyloader加载模块时，要不要加载相应的css文件，默认是需要加载的
408 css:true,
409
410 // 国际化语言，可以根据window.navigator.language或者window.navigator.userLanguage来获取当前浏览器的语言。
411 // 有两个属性，主要因为IE浏览器只认识userLanguage和sysLanguage，万恶的IE浏览器啊！
412 locale:null,
413
414 // 加载一个模块的最长时间，超过这个时间，就开始加载下一个模块了。
415 timeout:2000,
416
417 // easyloader就公开了这么一个方法，用来加载模块。
418 // name是模块名，callback是加载成功后执行的函数
419 load: function(name, callback){
420 if (//.css$/i.test(name)){
421 // 如果模块名是以.css结尾
422
423 if (/^http/i.test(name)){
424 // 如果模块名是以http开头，那么css是一个文件的url
425 loadCss(name, callback);
426 } else {
427 // 否则，说明模块名相对于jquery easyui根目录来说的
428 loadCss(easyloader.base + name, callback);
429 }
430 } else if (//.js$/i.test(name)){
431 // 如果模块名是以.js结尾
432
433 if (/^http/i.test(name)){
434 // 如果模块名是以http开头，那么js是一个文件的url
435 loadJs(name, callback);
436 } else {
437 // 否则，说明模块名相对于jquery easyui根目录来说的
438 loadJs(easyloader.base + name, callback);
439 }
440 } else {
441 // 以上两种都不是，说明是easyui自己的模块，直接使用loadModule来加载，就可以了
442 loadModule(name, callback);
443 }
444 },
445
446 // 当一个模块加载完会触发此函数
447 onProgress: function(name){},
448
449 // 当一个模块和其依赖都加载完会触发此函数
450 onLoad: function(name){}
451 };
452 /**
453 * 这一小段代码就是查找jquery-easyui的根目录，并赋值给easyloader的base属性上。这样easyloader再加载css文件和js文件就很方便定位了。
454 */
455 var scripts = document.getElementsByTagName(‘script‘);
456 for(var i=0; i<scripts.length; i++){
457 var src = scripts[i].src;
458 if (!src) continue;
459 var m = src.match(/easyloader/.js(/W|$)/i);
460 if (m){
461 easyloader.base = src.substring(0, m.index);
462 }
463 }
464 /**
465 * 这个就起一个别名的作用，比如页面中可以想如下这么下：
466 * using(‘window‘);
467 * 这样window模块就加载进来了！
468 */
469 window.using = easyloader.load;
470 /**
471 * easyloader.js加载的第一模块是parse模块，parser模块调用parse方法，可以解析页面上的easyui控件
472 */
473 if (window.jQuery){
474 jQuery(function(){
475 easyloader.load(‘parser‘, function(){
476 jQuery.parser.parse();
477 });
478 });
479 }
480
481 })();
到这里easyloader就分析结束了，如果你仔细看过了，相信一定会使用easyloader了
