Easyui Study Summary (iii)--easyloader source analysis

Easyui Study Summary (iii)--easyloader source analysis

The Easyloader module is used to load the JS and CSS files of the jquery Easyui, and it can analyze the dependencies of the modules and load the dependencies first. The module loads well and invokes the parse module to parse the page. The tags that start with class Easyui are converted into Easyui controls.

First look at the Demo1 example, and then analyze the source code.

1 <! DOCTYPE html> 2 
The results of the operation are as follows:
　　
Easyloader Source Code Analysis
  1/** 2 * easyloader-jquery Easyui 3 * 4 * Licensed under the gpl:5 * http://www.gnu.org/licenses/gpl.txt 6 * 7 * Copyright stworthy [stworthy@gmail.com] 8 * 9 * * (function () {11//module file definition of var Modu             Les = {draggable:{+ js: ' Jquery.draggable.js ', droppable:{17         JS: ' Jquery.droppable.js ', resizable:{js: ' Jquery.resizable.js ' 21}, 22         linkbutton:{-js: ' Jquery.linkbutton.js ', CSS: ' Linkbutton.css ' 25}, 26 pagination:{js: ' jquery.pagination.js ', CSS: ' pagination.css ', dependencies:[' LinkButton '], datagrid:{-js: ' Jquery.datagrid.js ', CSS: ' Datagrid.css '             , dependencies:[' panel ', ' resizable ', ' LinkButton ', ' pagination '], treegrid:{37 JS: ' Jquery.treegrId.js ', max CSS: ' tree.css ', dependencies:[' DataGrid ', ' Max ', panel: {42 JS: ' Jquery.panel.js ', CSS: ' panel.css ', window:{-js: ' Jquery.wi         Ndow.js ', CSS: ' window.css ', dependencies:[' resizable ', ' draggable ', ' Panel '] 49}, 50 dialog:{js: ' Jquery.dialog.js ', the CSS: ' dialog.css ', dependencies:[' link Button ', ' Window '], messager:{: ' Jquery.messager.js ', $ css: ' Messager . css ', dependencies:[' LinkButton ', ' window '], layout:{: ' Jquery.lay Out.js ', the CSS: ' Layout.css ', the dependencies:[' resizable ', ' panel '], the form: {$ JS: ' Jquery.form.js ', menu:{-js: ' Jquery.menu.js ', CS         S: ' Menu.css ' 71}, tabs:{: ' Jquery.tabs.js ', the CSS: ' tabs.css ', dependencies:[' pane L ', ' LinkButton '], splitbutton:{-js: ' Jquery.splitbutton.js ', CSS: ' SPL Itbutton.css ', dependencies:[' LinkButton ', ' menu ', "Bayi}," The menubutton:{-the-st-JS: ' Jquery.menubutton.js ', CSS: ' menubutton.css ', dependencies:[' LinkButton ', ' Menu '] 86} , accordion:{: ' Jquery.accordion.js ', the CSS: ' Accordion.css ', Depen dencies:[' Panel '], calendar:{: ' Jquery.calendar.js ', 94 CSS: ' Calendar             . css ' combo:{}, ' 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.validatebo X.js ', the CSS: ' validatebox.css ' 117},118 numberbox:{119 js: ' Jquery.numberbox.js ', 1             dependencies:[' Validatebox ']121},122 spinner:{123 js: ' Jquery.spinner.js ', 124             CSS: ' spinner.css ', dependencies:[' Validatebox ']126},127 numberspinner:{128 JS: ' Jquery.numberspinner.js ', 129 dependencies:[' spinner ', ' Numberbox ']130},131 timespi nner:{132 js: ' Jquery.timespinner.js ', 133 dependencies:[' spinner ']134},135 tree:{1 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         Internationalized resource file 151 var locales = {"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 ': ' Easyu I-lang-de.js ', 158 ' en ': ' easyui-lang-en.js ', 159 ' fr ': ' easyui-lang-fr.js ', ' nl ': ' EASYUI-LANG-NL.J S ', 161 ' zh_cn ': ' Easyui-lang-zh_cn.js ', 162 ' zh_tw ': ' easyui-lang-zh_tw.js ' 163};164 165//Load Queue 1 var queues = {};167 168/**169 * Load JS file function, the process is to dynamically create a script tag, and then add to the head tag. 170 * One problem is the two event function that listens to the script tag, one is onload and the other is ONreadystatechange, this number is for IE and non-IE browser prepared 171 * Evil IE browser!!! 172 */173 function Loadjs (URL, callback) {174 var done = false;175 var script = Document.createele ment (' script '); 176 script.type = ' text/javascript '; 177 script.language = ' javascript '; 178 Script.s rc = url;179 Script.onload = Script.onreadystatechange = function () {!done && (!script. ReadyState | | Script.readystate = = ' Loaded ' | | Script.readystate = = ' complete ') {181 do = true;182 Script.onload = Script.onreadystatec             hange = null;183 if (callback) {184 callback.call (script); 185}186 }187}188 document.getelementsbytagname ("Head") [0].appendchild (script); 189}190 191/* *192 * Execute JS file. is the JS file loaded in, and then remove the 193 * @param url js url194 * @callback callback function, after the execution of JS will call this function 195 */196 functions Runjs (U    RL, callback) {197     Loadjs (URL, function () {198 document.getelementsbytagname ("Head") [0].removechild (this); 199 if (callback) {callback (); 201}202}); 203}204 205/**206 * Load CSS file.     Like loading JS file, dynamically create a link tag and append it to the head tag 207 * @param url css url208 * @param callback callback function, call this function after loading is complete 209 */210 function loadcss (URL, callback) {211 var link = document.createelement (' link '); 212 Link.rel = ' styleshe ET '; 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 * Load a separate module 224 */225 function Loadsingle (name, callback) {226 227 The load queue is stored in the module name and indicates a status of loading. 228 Queues[name] = ' loading '; 229 230//According to the module name, remove the module definition 231 var module = modules[name];232 233//JS load status 234 var jsstatus = ' loading '; 235 236//CSS load state, from here you can see EAS YLOADER.CSS is a switch variable that controls whether the module is loaded with the corresponding CSS file 237 var cssstatus = (easyloader.css && module[' css ')? ' Loading ': ' Loaded '; 238 239//is a CSS file, use LOADCSS to load the 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 ' &A         mp;& Cssstatus = = ' loaded ') {249 finish (); 250}251}); 252}253 254//Is the JS file, is to use LOADJS to load the 255 if (/^http/i.test (module[' js ')) {$ var url = module[' j           S '];257} else {258  var url = easyloader.base + ' plugins/' + module[' js '];259}260 loadjs (URL, function () {261 JS Status = ' loaded '; 262 if (jsstatus = = ' Loaded ' && cssstatus = = ' loaded ') {263 finish (); 264}265}); 266 267//Final call to the finish function to end the load.             and trigger the OnProgress function, each load succeeds a module, call once onProgress268 function finish () {269 Queues[name] = ' loaded '; 270         Easyloader.onprogress (name); 271 if (callback) {272 callback (); 273}274  }275}276 277/**278 * Easyui Module load function 279 * @param name Module name, either string or array 280 * @param callback callback function, this function will be called when the load is finished 281 */282 function LoadModule (name, callback) {283 284//module name, according to dependencies, from front to back, row 28         5 var mm = [];286 287//load ID, when its value is true, indicates that the module that needs to be loaded is already loaded 288 var doload = false;289 290//Module name support Two, one is a string, one is an array. This allows multiple modules to be loaded at once 291 if(typeof name = = ' String ')  {292//is a string, call the Add method to push the module name to the MM array to 293 add (name); 294} else {295 for (Var i=0; i<name.length;         i++) {296//is an array, loop calls the Add method to push the module name into the MM array 297 Add (Name[i]); 298}299 }300 301/**302 * A function embedded in the LoadModule function to load the module name into the variable mm array 303 * @param name Module name, can only be string3  */305 function Add (name) {306//protection, if the module name does not exist, we will not load the 307 if (!modules[name]) return;308 309//Otherwise, the module is present. Then we're looking at whether it has a dependent module 310 var d = modules[name][' dependencies '];311 if (d) {312//If there is a dependent modulo                     block, we must first push the name of the dependent module to mm 313//here with a recursive call 314 for (var i=0; i<d.length; i++) {315 Add (D[i]), 316}317}318 319//Put the module name in mm MM.PU      SH (name); 321}322 323   /**324 * When a module and its dependent modules are loaded, the callback function is executed, and the onload function is triggered 325 */326 functions finish () {327 if (         Callback) {328 callback (); 329}330 easyloader.onload (name); 331}332 333//Load when 334 var time = 0;335 336/**337 * Load the required modules, we have counted well, and by dependency, successively Pu                 SH to mm 338 */339 function loadmm () {340//determine mm is not empty 341 if (mm.length) {342 343//First module 344 var m = mm[0];345 346//Judgment load queue is                     No contains this module 347 if (!queues[m]) {348 349//Load queue does not contain this module, start loading the module 350                     Set Doload to True to start loading 351 doload = true;352 353                         Call the Loadsingle method to load the module, after the load succeeds, it will shift the module from MM and then continue to call the LOADMM method, forming a recursive call 354 loadsingle (M, function () {355 Mm. Shift (); 356 loadmm (); 357}); 358} else if (queues[m] = = ' Load                     Ed ') {359//load queue has already loaded this module, do not need to load, directly from the mm shift away can be mm.shift (); 361                     LOADMM (); 362} else {363//indicates that the module is being loaded, and the accumulated time if no more than timeout364                          The LOADMM function is called again after 10 milliseconds 365 if (Time < easyloader.timeout) {366 "+ + 10;367 SetTimeout (Arguments.callee, 10); 368}369}370} else {371//Go here to indicate that the loaded module is already loaded 372 if (easyloader.locale && doload = = True &                     & Locales[easyloader.locale]) {373//If internationalization is set up and it is already loaded, and the internationalized resource exists, load the resource js374 var url = easyloader.base + ' locale/' + locales[easyloader.locale];375 376//Execute     After JS is finished, call the finish method 377                Runjs (URL, function () {378 finish (); 379}); 380             } else {381//does not define an internationalized file, then call the Finish method directly 382 finish (); 383}384 }385}386 387 loadmm (); 388}389 390/**391 * Easyloader defined as global variable 392 */3         Easyloader = {394 395//module file definitions, including JS, CSS, and dependent modules 396 modules:modules,397 398         Internationalized resource file 399 locales:locales,400 401//Jquery-easyui root directory, when loading Easyloader, will automatically change depending on where you place it 402 Base: '. ', 403 404//Control theme, there are altogether two, in the theme directory. There is also a gray theme, light gray, hard to see. 405 theme: ' Default ', 406 407//This is a switch variable, control Easyloader loading module, to not load the corresponding CSS file, the default is to load the 408 css:tr UE,409 410//International language, can be based on window.navigator.language or window.navigator.userLanguage to obtain the current browser language. 411//There are two properties, mainly because IE browser only know userlanguage and syslanguage, evil ie browser Ah!       412  locale:null,413 414//Load a module for the longest time, over this time, start loading the next module. 415 timeout:2000,416 417//Easyloader has disclosed a method for loading modules. 418//Name is the module name, callback is the function executed after the load succeeds 419 load:function (name, callback) {420 if (//.css$/i.test (n                     AME) {421//If the module name is ending with a. CSS 422 423 if (/^http/i.test (name)) {424                     If the module name starts with HTTP, then the CSS is a file of url425 loadcss (name, callback); 426} else {427                 Otherwise, the module name is 428 loadcss (easyloader.base + name, callback) relative to the jquery easyui root directory; 429                  }430} else if (//.js$/i.test (name)) {431//If the module name is at. JS End 432 433 if (/^http/i.test (name)) {434//If the module name starts with HTTP, then JS is a file of url435 Lo           Adjs (name, callback); 436} else {437///Otherwise, the module name is 438 for the jquery Easyui root directory          Loadjs (easyloader.base + name, callback); 439}440} else {441//above two Species are not, the description is Easyui own module, directly using LoadModule to load, it can be 442 loadModule (name, callback); 443}444},44 5 446//When a module is loaded, this function is triggered 447 onprogress:function (name) {},448 449///When a module and its dependencies are loaded This function onload:function (name) {}451};452/**453 * This small piece of code is to find the root of Jquery-easyui, and assign to the Easyloader base property on 。 This easyloader the CSS file and JS file can be conveniently located. 454 */455 var scripts = document.getelementsbytagname (' script '); 456 for (var i=0; i<scripts.length; i++) {45 7 var src = scripts[i].src;458 if (!src) continue;459 var m = Src.match (/easyloader/.js (/w|$)/i); 4 if (m) {461 easyloader.base = src.substring (0, M.index); 462}463}464/**465 * This is the role of an alias, such as the page can think of the following: 466 * using (' window '); 467 * So the window module is loaded in! 468 */469 window.using = easyloader.load;470/**471 * easyloader.js The first module loaded is the parse module, and the parser module calls the Parse method, which resolves the Easyui control on the page 472 */473                 if (window.jquery) {474 jQuery (function () {475 easyloader.load (' parser ', function () {476 JQuery.parser.parse (); 477}); 478}); 479}480 481});
Here Easyloader the analysis is over, if you look carefully, I believe you will use Easyloader
Easyui Study Summary (iii)--easyloader source analysis