easyloader.js源代码分析

http://www.cnblogs.com/jasonoiu/p/easyloader_source_code_analysis.html

Jquery easyui是一个javascript UI 组件库,使用它可以快速开发企业级的业务系统。如果你正准备开发系统后台,可以选择jquery easyui,也可以选择Ext JS。我个人的看法是,如果开发团队就两三个人,开发工期很短,就一两个月。那么选择jquery easyui就对了,jquery easyui源代码量不多,便于阅读和自行修改。而Ext JSy源代码太多,短时间很难看完,学习曲线也比较陡峭。如果人手充足,时间也富裕,可以考虑使用Ext JS来开发,毕竟Ext JS更强大,控件更多。

Jquery easyui是基于Jquery插件机制扩展的,所以如果你很熟悉Jquery,那么使用它开发会很简单。

Jquery easyui的源代码svn地址:http://jquery-easyui.googlecode.com/svn

easyloader模块是用来加载jquery easyui的js和css文件的,而且它可以分析模块的依赖关系,先加载依赖项。模块加载好了会调用parse模块来解析页面。把class是easyui开头的标签都转化成easyui的控件。

先看Demo1例子,再分析源代码。

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Demo1</title>
<script type="text/javascript" src="jquery-easyui-1.2.3/jquery-1.4.4.min.js"></script>
<script type="text/javascript" src="jquery-easyui-1.2.3/easyloader.js"></script>
</head>
<body>
    <div class="easyui-panel" title="Demo1" fit="true" collapsible="true" minimizable="true" maximizable="true" closable="true" style="width: 100%; height: 200px;" >
        easyloader会自动解析这个div,因为class属性中带有easyui开头的类!
    </div>
</body>
</html>

作者开发此模块,说明应该尽量使用easyuiloader来加载。因为他定制性更强,可以自定义主题和国际化等。而压缩过的文件的优势在于一次性把所有模块都加载进来,速度上更快。

  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 })();
时间: 2024-10-08 12:45:15

easyloader.js源代码分析的相关文章

Jquery easyui 源代码分析之easyloader

Jquery easyui是一个javascript UI 组件库,使用它可以快速开发企业级的业务系统.如果你正准备开发系统后台,可以选择jquery easyui,也可以选择Ext JS.我个人的看法是,如果开发团队就两三个人,开发工期很短,就一两个月.那么选择jquery easyui就对了,jquery easyui源代码量不多,便于阅读和自行修改.而Ext JSy源代码太多,短时间很难看完,学习曲线也比较陡峭.如果人手充足,时间也富裕,可以考虑使用Ext JS来开发,毕竟Ext JS更强

EasyUI学习总结(三)——easyloader源码分析

EasyUI学习总结(三)--easyloader源码分析 easyloader模块是用来加载jquery easyui的js和css文件的,而且它可以分析模块的依赖关系,先加载依赖项.模块加载好了会调用parse模块来解析页面.把class是easyui开头的标签都转化成easyui的控件. 先看Demo1例子,再分析源代码. 1 <!DOCTYPE html> 2 <html> 3 <head> 4 <title>easyloader范例</tit

EasyUI学习总结(三)——easyloader源码分析(转载)

声明:这一篇文章是转载过来的,转载地址忘记了,原作者如果看到了,希望能够告知一声,我好加上去! easyloader模块是用来加载jquery easyui的js和css文件的,而且它可以分析模块的依赖关系,先加载依赖项.模块加载好了会调用parse模块来解析页面.把class是easyui开头的标签都转化成easyui的控件. 先看Demo1例子,再分析源代码. 1 <!DOCTYPE html> 2 <html> 3 <head> 4 <title>ea

pomelo源代码分析(一)

千里之行始于足下,一直说想了解pomelo,对pomelo有兴趣,但一直迟迟没有去碰,尽管对pomelo进行源代码分析,在网络上肯定不止我一个,已经有非常优秀的前辈走在前面,如http://golanger.cn/,在阅读Pomelo代码的时候,已经连载到了11篇了,在我的源代码分析參考了该博客,当然,也会添?我对pomelo的理解,借此希望能提高一下自己对node.js的了解和学习一些优秀的设计. 开发环境:win7 调试环境:webstorm5.0 node.js版本号:v0.8.21 源代

Zepto源代码分析之二~三个API

因为时间关系:本次仅仅对这三个API($.camelCase.$.contains.$.each)方法进行分析 第一个方法变量转驼峰:$.camelCase('hello-world-welcome'); 源代码: var camelize; /** * 字符串替换 * 使用replace第二个參数带回调 */ camelize = function(str) { return str.replace(/-+(.)?/g, function(match, chr) { return chr ?

webqq加密js参数分析

以下是分析实例:今天来说说WEBQQ登陆过程的分析,抛砖引玉而已 第一步:使用HttpWatch 软件抓取webQQ页面从打开至登陆成功到所有数据包.我们所有到操作均在这里面查找. 等待抓包中.....  这里为了方便 我已经登陆成功一个号码并且抓包成功. 抓包方法很简单  打开IE  打开HttpWatch 点击记录后 开始一系列的登陆操作直到登陆成功后.停止抓 第二步:我们重新打开一个webqq登陆页面.来分析网页源代码.(这里建议大家使用 Chrome 谷歌浏览器.比较方便.它本身带有一个

Nodejs源代码分析之Path

今天介绍一下nodejs Path的源代码分析,Path的API文档在https://nodejs.org/dist/latest-v5.x/docs/api/path.html,使用相对简单,在API文档中,须要特别说明的是例如以下的文字: This module contains utilities for handling and transforming file paths. Almost all these methods perform only string transforma

Java中arraylist和linkedlist源代码分析与性能比較

Java中arraylist和linkedlist源代码分析与性能比較 1,简单介绍 在java开发中比較经常使用的数据结构是arraylist和linkedlist,本文主要从源代码角度分析arraylist和linkedlist的性能. 2,arraylist源代码分析 Arraylist底层的数据结构是一个对象数组.有一个size的成员变量标记数组中元素的个数,例如以下图: * The array buffer into which the elements of the ArrayLis

转:RTMPDump源代码分析

0: 主要函数调用分析 rtmpdump 是一个用来处理 RTMP 流媒体的开源工具包,支持 rtmp://, rtmpt://, rtmpe://, rtmpte://, and rtmps://.也提供 Android 版本. 最近研究了一下它内部函数调用的关系. 下面列出几个主要的函数的调用关系. RTMPDump用于下载RTMP流媒体的函数Download: 用于建立网络连接(NetConnect)的函数Connect: 用于建立网络流(NetStream)的函数 rtmpdump源代码