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 [ [email protected] ] 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了