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 //将所有的插件,和插件资源和依赖文件放进modules对象中。 12 var modules = { 13 14 draggable:{ 15 js:'jquery.draggable.js' 16 }, 17 droppable:{ 18 js:'jquery.droppable.js' 19 }, 20 resizable:{ 21 js:'jquery.resizable.js' 22 }, 23 linkbutton:{ 24 js:'jquery.linkbutton.js', 25 css:'linkbutton.css' 26 }, 27 pagination:{ 28 js:'jquery.pagination.js', 29 css:'pagination.css', 30 dependencies:['linkbutton'] 31 }, 32 datagrid:{ 33 js:'jquery.datagrid.js', 34 css:'datagrid.css', 35 dependencies:['panel','resizable','linkbutton','pagination'] 36 }, 37 treegrid:{ 38 js:'jquery.treegrid.js', 39 css:'tree.css', 40 dependencies:['datagrid'] 41 }, 42 panel: { 43 js:'jquery.panel.js', 44 css:'panel.css' 45 }, 46 window:{ 47 js:'jquery.window.js', 48 css:'window.css', 49 dependencies:['resizable','draggable','panel'] 50 }, 51 dialog:{ 52 js:'jquery.dialog.js', 53 css:'dialog.css', 54 dependencies:['linkbutton','window'] 55 }, 56 messager:{ 57 js:'jquery.messager.js', 58 css:'messager.css', 59 dependencies:['linkbutton','window'] 60 }, 61 layout:{ 62 js:'jquery.layout.js', 63 css:'layout.css', 64 dependencies:['resizable','panel'] 65 }, 66 form:{ 67 js:'jquery.form.js' 68 }, 69 menu:{ 70 js:'jquery.menu.js', 71 css:'menu.css' 72 }, 73 tabs:{ 74 js:'jquery.tabs.js', 75 css:'tabs.css', 76 dependencies:['panel','linkbutton'] 77 }, 78 splitbutton:{ 79 js:'jquery.splitbutton.js', 80 css:'splitbutton.css', 81 dependencies:['linkbutton','menu'] 82 }, 83 menubutton:{ 84 js:'jquery.menubutton.js', 85 css:'menubutton.css', 86 dependencies:['linkbutton','menu'] 87 }, 88 accordion:{ 89 js:'jquery.accordion.js', 90 css:'accordion.css', 91 dependencies:['panel'] 92 }, 93 calendar:{ 94 js:'jquery.calendar.js', 95 css:'calendar.css' 96 }, 97 combo:{ 98 js:'jquery.combo.js', 99 css:'combo.css', 100 dependencies:['panel','validatebox'] 101 }, 102 combobox:{ 103 js:'jquery.combobox.js', 104 css:'combobox.css', 105 dependencies:['combo'] 106 }, 107 combotree:{ 108 js:'jquery.combotree.js', 109 dependencies:['combo','tree'] 110 }, 111 combogrid:{ 112 js:'jquery.combogrid.js', 113 dependencies:['combo','datagrid'] 114 }, 115 validatebox:{ 116 js:'jquery.validatebox.js', 117 css:'validatebox.css' 118 }, 119 numberbox:{ 120 js:'jquery.numberbox.js', 121 dependencies:['validatebox'] 122 }, 123 spinner:{ 124 js:'jquery.spinner.js', 125 css:'spinner.css', 126 dependencies:['validatebox'] 127 }, 128 numberspinner:{ 129 js:'jquery.numberspinner.js', 130 dependencies:['spinner','numberbox'] 131 }, 132 timespinner:{ 133 js:'jquery.timespinner.js', 134 dependencies:['spinner'] 135 }, 136 tree:{ 137 js:'jquery.tree.js', 138 css:'tree.css', 139 dependencies:['draggable','droppable'] 140 }, 141 datebox:{ 142 js:'jquery.datebox.js', 143 css:'datebox.css', 144 dependencies:['calendar','validatebox'] 145 }, 146 parser:{ 147 js:'jquery.parser.js' 148 } 149 }; 150 //将国际化文件放入一个locales对象中 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 //加载js方法 169 function loadJs(url, callback){ 170 //标志变量,js是否加载并执行 171 var done = false; 172 var script = document.createElement('script');//创建script dom 173 script.type = 'text/javascript'; 174 script.language = 'javascript'; 175 script.src = url; 176 script.onload = script.onreadystatechange = function(){ //onload是firefox 浏览器事件,onreadystatechange,是ie的,为了兼容,两个都写上,这样写会导致内存泄露 177 //script.readyState只是ie下有这个属性,如果这个值为undefined,说明是在firefox,就直接可以执行下面的代码了。反之为ie,需要对script.readyState 178 //状态具体值进行判别,loaded和complete状态表示,脚本加载了并执行了。 179 if (!done && (!script.readyState || script.readyState == 'loaded' || script.readyState == 'complete')){ 180 done = true; 181 182 script.onload = script.onreadystatechange = null;//释放内存,还会泄露。 183 if (callback){//加载后执行回调 184 callback.call(script); 185 } 186 } 187 } 188 //具体加载动作,上面的onload是注册事件, 189 document.getElementsByTagName("head")[0].appendChild(script); 190 } 191 //运行js ,看代码逻辑可知,运行js,只是在js执行后,将这个script删除而已,主要用来加载国际化文件 192 function runJs(url, callback){ 193 loadJs(url, function(){ 194 document.getElementsByTagName("head")[0].removeChild(this); 195 if (callback){ 196 callback(); 197 } 198 }); 199 } 200 201 //加载css没什么好说的 202 function loadCss(url, callback){ 203 var link = document.createElement('link'); 204 link.rel = 'stylesheet'; 205 link.type = 'text/css'; 206 link.media = 'screen'; 207 link.href = url; 208 document.getElementsByTagName('head')[0].appendChild(link); 209 if (callback){ 210 callback.call(link); 211 } 212 } 213 //加载单一一个plugin,仔细研究module ,可以发现,pingin之间通过dependence,构造成了一颗依赖树, 214 //这个方法,就是加载具体树中的一个节点 215 function loadSingle(name, callback){ 216 //把整个plugin的状态设置为loading 217 queues[name] = 'loading'; 218 219 var module = modules[name]; 220 //把js状态设置为loading 221 var jsStatus = 'loading'; 222 //如果允许css,并且plugin有css,则加载css,否则设置加载过了,其实是不加载 223 var cssStatus = (easyloader.css && module['css']) ? 'loading' : 'loaded'; 224 //加载css,plugin 的css,如果是全称,就用全称,否则把简写换成全称,所以简写的css文件要放入到themes/type./文件下 225 if (easyloader.css && module['css']){ 226 if (/^http/i.test(module['css'])){ 227 var url = module['css']; 228 } else { 229 var url = easyloader.base + 'themes/' + easyloader.theme + '/' + module['css']; 230 } 231 loadCss(url, function(){ 232 cssStatus = 'loaded'; 233 //js, css加载完,才调用回调 234 if (jsStatus == 'loaded' && cssStatus == 'loaded'){ 235 finish(); 236 } 237 }); 238 } 239 //加载js,全称用全称,简写补全。 240 if (/^http/i.test(module['js'])){ 241 var url = module['js']; 242 } else { 243 var url = easyloader.base + 'plugins/' + module['js']; 244 } 245 loadJs(url, function(){ 246 jsStatus = 'loaded'; 247 if (jsStatus == 'loaded' && cssStatus == 'loaded'){ 248 finish(); 249 } 250 }); 251 //加载完调用的方法,改plugin状态 252 function finish(){ 253 queues[name] = 'loaded'; 254 //调用正在加载的方法,其实已经加载完了, 255 easyloader.onProgress(name); 256 if (callback){ 257 callback(); 258 } 259 } 260 } 261 //加载主模块入口, 262 function loadModule(name, callback){ 263 //定义数组,最后是形成的是依赖插件列表,最独立的插件放在首位,name是末尾 264 var mm = []; 265 var doLoad = false; 266 //name有两种,一种是string ,一种是string array,这样一次可以加载多个plugin,都是调用add方法进行添加 267 if (typeof name == 'string'){ 268 add(name); 269 } else { 270 for(var i=0; i<name.length; i++){ 271 add(name[i]); 272 } 273 } 274 275 function add(name){ 276 //如果modules中没有这个plugin那退出 277 if (!modules[name]) return; 278 //如果有,查看它是否依赖其他plugin 279 var d = modules[name]['dependencies']; 280 //如果依赖,就加载依赖的plugin.同时在加载依赖的plugin的依赖。注意循环中调用了add,是递归 281 if (d){ 282 for(var i=0; i<d.length; i++){ 283 add(d[i]); 284 } 285 } 286 mm.push(name); 287 } 288 289 function finish(){ 290 if (callback){ 291 callback(); 292 } 293 //调用onLoad,传递name 为参数 294 easyloader.onLoad(name); 295 } 296 //形成依赖树,不行还没有做实质性工作呢,那就是加载。打起精神来,最核心的代码就是以下的了 297 //超时用 298 var time = 0; 299 //定义一个加载方法,定义后直接调用 300 function loadMm(){ 301 //如果mm有长度,长度!=0,加载plugin,为0,即加载完毕,开始加载国际化文件。 302 if (mm.length){ 303 var m = mm[0]; // the first module 304 if (!queues[m]){//状态序列中没有这个plugin的信息,说明没有加载这个plug,调用laodSingle进行加载 305 doLoad = true; 306 loadSingle(m, function(){ 307 mm.shift();//加载完成后,将这个元素从数组去除,在继续加载,直到数组 308 loadMm(); 309 }); 310 } else if (queues[m] == 'loaded'){//如果这个plugin已经加载,就不用加载,以为mm中可能有重复项 311 mm.shift(); 312 loadMm(); 313 } else { 314 if (time < easyloader.timeout){//超时时候,10秒钟调用一次loadMn().注意arguments.callee代表函数本身 315 time += 10; 316 setTimeout(arguments.callee, 10); 317 } 318 } 319 } else { 320 if (easyloader.locale && doLoad == true && locales[easyloader.locale]){ 321 var url = easyloader.base + 'locale/' + locales[easyloader.locale]; 322 runJs(url, function(){ 323 finish(); 324 }); 325 } else { 326 finish(); 327 } 328 } 329 } 330 331 loadMm(); 332 } 333 // 定义一个加载器,注意,是全局变量,没有var, 334 easyloader = { 335 modules:modules, 336 locales:locales, 337 338 base:'.',//该属性是为了加载js,记录文件夹路径的 339 theme:'default', //默认主题 340 css:true, 341 locale:null, 342 timeout:2000,//加载超时事件 343 //easyloader.load(),该模块加载的调用方法,先加载css,然后加载js 344 load: function(name, callback){ 345 //如果加载是*.css文件,判断是不是以http开头,如果是,直接调用 346 if (/.css$/i.test(name)){ 347 if (/^http/i.test(name)){ 348 loadCss(name, callback); 349 } else { 350 //不是http的,加上base.文件夹路径 351 loadCss(easyloader.base + name, callback); 352 } 353 } 354 //加载js文件 355 else if (/.js$/i.test(name)){ 356 if (/^http/i.test(name)){ 357 loadJs(name, callback); 358 } else { 359 loadJs(easyloader.base + name, callback); 360 } 361 } else { 362 //如果直接传递一个插件名,就去modole数组中加载。改方法是重点,也是easyui自带的plugin加载方式 363 loadModule(name, callback); 364 } 365 }, 366 367 onProgress: function(name){}, 368 onLoad: function(name){} 369 }; 370 //以上一直在定义函数,和变量,此处为真正执行处 371 //获取页面的所有的script,主要是为了获取我们现在解释的easyloader.js文件路径,来设置base属性 372 var scripts = document.getElementsByTagName('script'); 373 for(var i=0; i<scripts.length; i++){ 374 var src = scripts[i].src; 375 if (!src) continue; 376 var m = src.match(/easyloader.js(W|$)/i);//判断文件是否含有easyloadr.js 377 if (m){ 378 //如果有,base为easyloadr.js 的相同前缀 379 easyloader.base = src.substring(0, m.index); 380 } 381 } 382 //定义一个简化调用接口 383 window.using = easyloader.load; 384 385 if (window.jQuery){ 386 jQuery(function(){ 387 //系统数据加载完后,加载parser.js插件,该插件是渲染界面的 388 easyloader.load('parser', function(){ 389 jQuery.parser.parse();//渲染方法 390 }); 391 }); 392 } 393 394 })();