Jquery easyui 源代码分析之easyloader
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来加载。
- <!DOCTYPE HTML>
- <html>
- <head>
- <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
- <title>Demo2</title>
- <link rel="stylesheet" type="text/css" href="jquery-easyui-1.2.3/themes/default/easyui.css">
- <link rel="stylesheet" type="text/css" href="jquery-easyui-1.2.3/themes/icon.css">
- <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/jquery.easyui.min.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来加载。因为他定制性更强,可以自定义主题和国际化等。而压缩过的文件的优势在于一次性把所有模块都加载进来,速度上更快。
- /**
- * easyloader - jQuery EasyUI
- *
- * Licensed under the GPL:
- * http://www.gnu.org/licenses/gpl.txt
- *
- * Copyright 2010 stworthy [ stworthy@gmail.com ]
- *
- */
- (function(){
- // 模块文件定义
- var modules = {
- draggable:{
- js:'jquery.draggable.js'
- },
- droppable:{
- js:'jquery.droppable.js'
- },
- resizable:{
- js:'jquery.resizable.js'
- },
- linkbutton:{
- js:'jquery.linkbutton.js',
- css:'linkbutton.css'
- },
- pagination:{
- js:'jquery.pagination.js',
- css:'pagination.css',
- dependencies:['linkbutton']
- },
- datagrid:{
- js:'jquery.datagrid.js',
- css:'datagrid.css',
- dependencies:['panel','resizable','linkbutton','pagination']
- },
- treegrid:{
- js:'jquery.treegrid.js',
- css:'tree.css',
- dependencies:['datagrid']
- },
- panel: {
- js:'jquery.panel.js',
- css:'panel.css'
- },
- window:{
- js:'jquery.window.js',
- css:'window.css',
- dependencies:['resizable','draggable','panel']
- },
- dialog:{
- js:'jquery.dialog.js',
- css:'dialog.css',
- dependencies:['linkbutton','window']
- },
- messager:{
- js:'jquery.messager.js',
- css:'messager.css',
- dependencies:['linkbutton','window']
- },
- layout:{
- js:'jquery.layout.js',
- css:'layout.css',
- dependencies:['resizable','panel']
- },
- form:{
- js:'jquery.form.js'
- },
- menu:{
- js:'jquery.menu.js',
- css:'menu.css'
- },
- tabs:{
- js:'jquery.tabs.js',
- css:'tabs.css',
- dependencies:['panel','linkbutton']
- },
- splitbutton:{
- js:'jquery.splitbutton.js',
- css:'splitbutton.css',
- dependencies:['linkbutton','menu']
- },
- menubutton:{
- js:'jquery.menubutton.js',
- css:'menubutton.css',
- dependencies:['linkbutton','menu']
- },
- accordion:{
- js:'jquery.accordion.js',
- css:'accordion.css',
- dependencies:['panel']
- },
- calendar:{
- js:'jquery.calendar.js',
- css:'calendar.css'
- },
- combo:{
- js:'jquery.combo.js',
- css:'combo.css',
- dependencies:['panel','validatebox']
- },
- combobox:{
- js:'jquery.combobox.js',
- css:'combobox.css',
- dependencies:['combo']
- },
- combotree:{
- js:'jquery.combotree.js',
- dependencies:['combo','tree']
- },
- combogrid:{
- js:'jquery.combogrid.js',
- dependencies:['combo','datagrid']
- },
- validatebox:{
- js:'jquery.validatebox.js',
- css:'validatebox.css'
- },
- numberbox:{
- js:'jquery.numberbox.js',
- dependencies:['validatebox']
- },
- spinner:{
- js:'jquery.spinner.js',
- css:'spinner.css',
- dependencies:['validatebox']
- },
- numberspinner:{
- js:'jquery.numberspinner.js',
- dependencies:['spinner','numberbox']
- },
- timespinner:{
- js:'jquery.timespinner.js',
- dependencies:['spinner']
- },
- tree:{
- js:'jquery.tree.js',
- css:'tree.css',
- dependencies:['draggable','droppable']
- },
- datebox:{
- js:'jquery.datebox.js',
- css:'datebox.css',
- dependencies:['calendar','validatebox']
- },
- parser:{
- js:'jquery.parser.js'
- }
- };
- // 国际化资源文件
- var locales = {
- 'af':'easyui-lang-af.js',
- 'bg':'easyui-lang-bg.js',
- 'ca':'easyui-lang-ca.js',
- 'cs':'easyui-lang-cs.js',
- 'da':'easyui-lang-da.js',
- 'de':'easyui-lang-de.js',
- 'en':'easyui-lang-en.js',
- 'fr':'easyui-lang-fr.js',
- 'nl':'easyui-lang-nl.js',
- 'zh_CN':'easyui-lang-zh_CN.js',
- 'zh_TW':'easyui-lang-zh_TW.js'
- };
- // 加载队列
- var queues = {};
- /**
- * 加载js文件函数,过程就是动态创建一个script标签,然后添加到head标签中去。
- * 有一个问题是监听了script标签的两个事件函数,一个是onload,另一个是onreadystatechange,这个数要是针对IE和非IE浏览器准备的
- * 万恶的IE浏览器!!!
- */
- function loadJs(url, callback){
- var done = false;
- var script = document.createElement('script');
- script.type = 'text/javascript';
- script.language = 'javascript';
- script.src = url;
- script.onload = script.onreadystatechange = function(){
- if (!done && (!script.readyState || script.readyState == 'loaded' || script.readyState == 'complete')){
- done = true;
- script.onload = script.onreadystatechange = null;
- if (callback){
- callback.call(script);
- }
- }
- }
- document.getElementsByTagName("head")[0].appendChild(script);
- }
- /**
- * 执行js文件。就是把js文件加载进来,再remove掉
- * @param url js的url
- * @callback 回调函数,执行完js时会调用这个函数
- */
- function runJs(url, callback){
- loadJs(url, function(){
- document.getElementsByTagName("head")[0].removeChild(this);
- if (callback){
- callback();
- }
- });
- }
- /**
- * 加载css文件。和加载js文件一样,动态创建一个link标签,然后追加到head标签中去
- * @param url css的url
- * @param callback 回调函数,加载完成后调用此函数
- */
- function loadCss(url, callback){
- var link = document.createElement('link');
- link.rel = 'stylesheet';
- link.type = 'text/css';
- link.media = 'screen';
- link.href = url;
- document.getElementsByTagName('head')[0].appendChild(link);
- if (callback){
- callback.call(link);
- }
- }
- /**
- * 加载单独的一个模块
- */
- function loadSingle(name, callback){
- // 加载队列存入该模块名,并表示状态为loading。
- queues[name] = 'loading';
- // 根据模块名,取出该模块定义
- var module = modules[name];
- // js加载状态
- var jsStatus = 'loading';
- // css加载状态,从这里你就可以看出easyloader.css就是一个开关变量,控制是否加载模块相应的css文件
- var cssStatus = (easyloader.css && module['css']) ? 'loading' : 'loaded';
- // 是css文件,就使用loadCss来加载之
- if (easyloader.css && module['css']){
- if (/^http/i.test(module['css'])){
- var url = module['css'];
- } else {
- var url = easyloader.base + 'themes/' + easyloader.theme + '/' + module['css'];
- }
- loadCss(url, function(){
- cssStatus = 'loaded';
- if (jsStatus == 'loaded' && cssStatus == 'loaded'){
- finish();
- }
- });
- }
- // 是js文件,就是用LoadJs来加载之
- if (/^http/i.test(module['js'])){
- var url = module['js'];
- } else {
- var url = easyloader.base + 'plugins/' + module['js'];
- }
- loadJs(url, function(){
- jsStatus = 'loaded';
- if (jsStatus == 'loaded' && cssStatus == 'loaded'){
- finish();
- }
- });
- // 最终调用finish函数,来结束加载。并触发onProgress函数,每加载成功一个模块,就调用一次onProgress
- function finish(){
- queues[name] = 'loaded';
- easyloader.onProgress(name);
- if (callback){
- callback();
- }
- }
- }
- /**
- * easyui模块加载函数
- * @param name 模块名,可以是string,也可以是数组
- * @param callback 回调函数,当加载结束后会调用此函数
- */
- function loadModule(name, callback){
- // 模块名,根据依赖关系,从前到后,依次排开
- var mm = [];
- // 加载标识,当其值为true时,表示需要加载的模块已经加载好了
- var doLoad = false;
- // 模块名支持两中,一种是string,一种是数组。这样就可以一次加载多个模块了
- if (typeof name == 'string'){
- // 是string的时候,调用add方法把模块名push到mm数组中去
- add(name);
- } else {
- for(var i=0; i<name.length; i++){
- // 是数组的时候,循环调用add方法把模块名统统push到mm数组中去
- add(name[i]);
- }
- }
- /**
- * loadModule函数中内嵌的一个函数,用来加载模块名到变量mm数组中去
- * @param name 模块名,只能是string
- */
- function add(name){
- // 保护措施,如果该模块名不存在,我们就不要加载了
- if (!modules[name]) return;
- // 否则,就是该模块存在。然后,我们在看看其有没有依赖模块
- var d = modules[name]['dependencies'];
- if (d){
- // 如果有依赖模块,我们要先把依赖模块的名字push到mm中去
- // 这里用了递归调用
- for(var i=0; i<d.length; i++){
- add(d[i]);
- }
- }
- // 把模块名放到mm中
- mm.push(name);
- }
- /**
- * 当一个模块及其依赖模块加载完成时,执行回调函数,并且触发onLoad函数
- */
- function finish(){
- if (callback){
- callback();
- }
- easyloader.onLoad(name);
- }
- // 加载用时
- var time = 0;
- /**
- * 加载所需要的模块,需要的模块,我们已经统计好了,并按依赖关系,先后push到mm中去了
- */
- function loadMm(){
- // 判断mm是不是空的
- if (mm.length){
- // 第一个模块
- var m = mm[0];
- // 判断加载队列是否包含此模块
- if (!queues[m]){
- // 加载队列不包含此模块,开始加载该模块
- // 把doLoad置成true,表示开始加载
- doLoad = true;
- // 调用loadSingle方法来加载模块,加载成功后会把此模块从mm中shift掉,然后继续调用loadMM方法,就形成了递归调用
- loadSingle(m, function(){
- mm.shift();
- loadMm();
- });
- } else if (queues[m] == 'loaded'){
- // 加载队列已经加载过此模块了,不需要在加载了,直接从mm中shift掉即可
- mm.shift();
- loadMm();
- } else {
- // 表示正在加载该模块,累计所用时间如果没有超过timeout
- // 则过10毫秒再调用一次loadMm函数
- if (time < easyloader.timeout){
- time += 10;
- setTimeout(arguments.callee, 10);
- }
- }
- } else {
- // 走到这里,表示该加载的模块都已经加载好了
- if (easyloader.locale && doLoad == true && locales[easyloader.locale]){
- // 如果设置了国际化,并且已经加载好了,而且该国际化资源还存在,那么加载该资源js
- var url = easyloader.base + 'locale/' + locales[easyloader.locale];
- // 执行js完事后,调用finish方法
- runJs(url, function(){
- finish();
- });
- } else {
- // 没定义国际化文件,那么直接调用finish方法吧
- finish();
- }
- }
- }
- loadMm();
- }
- /**
- * easyloader定义为全局变量
- */
- easyloader = {
- // 各个模块文件的定义,包括js、css和依赖模块
- modules:modules,
- // 国际化资源文件
- locales:locales,
- // jquery-easyui的根目录,在加载easyloader时,会自动根据你放置的位置而改变
- base:'.',
- // 控件的主题,一共就有两个,在theme目录中。还有一个gray主题,浅灰色的,很难看。
- theme:'default',
- // 这是一个开关变量,控制easyloader加载模块时,要不要加载相应的css文件,默认是需要加载的
- css:true,
- // 国际化语言,可以根据window.navigator.language或者window.navigator.userLanguage来获取当前浏览器的语言。
- // 有两个属性,主要因为IE浏览器只认识userLanguage和sysLanguage,万恶的IE浏览器啊!
- locale:null,
- // 加载一个模块的最长时间,超过这个时间,就开始加载下一个模块了。
- timeout:2000,
- // easyloader就公开了这么一个方法,用来加载模块。
- // name是模块名,callback是加载成功后执行的函数
- load: function(name, callback){
- if (//.css$/i.test(name)){
- // 如果模块名是以.css结尾
- if (/^http/i.test(name)){
- // 如果模块名是以http开头,那么css是一个文件的url
- loadCss(name, callback);
- } else {
- // 否则,说明模块名相对于jquery easyui根目录来说的
- loadCss(easyloader.base + name, callback);
- }
- } else if (//.js$/i.test(name)){
- // 如果模块名是以.js结尾
- if (/^http/i.test(name)){
- // 如果模块名是以http开头,那么js是一个文件的url
- loadJs(name, callback);
- } else {
- // 否则,说明模块名相对于jquery easyui根目录来说的
- loadJs(easyloader.base + name, callback);
- }
- } else {
- // 以上两种都不是,说明是easyui自己的模块,直接使用loadModule来加载,就可以了
- loadModule(name, callback);
- }
- },
- // 当一个模块加载完会触发此函数
- onProgress: function(name){},
- // 当一个模块和其依赖都加载完会触发此函数
- onLoad: function(name){}
- };
- /**
- * 这一小段代码就是查找jquery-easyui的根目录,并赋值给easyloader的base属性上。这样easyloader再加载css文件和js文件就很方便定位了。
- */
- var scripts = document.getElementsByTagName('script');
- for(var i=0; i<scripts.length; i++){
- var src = scripts[i].src;
- if (!src) continue;
- var m = src.match(/easyloader/.js(/W|$)/i);
- if (m){
- easyloader.base = src.substring(0, m.index);
- }
- }
- /**
- * 这个就起一个别名的作用,比如页面中可以想如下这么下:
- * using('window');
- * 这样window模块就加载进来了!
- */
- window.using = easyloader.load;
- /**
- * easyloader.js加载的第一模块是parse模块,parser模块调用parse方法,可以解析页面上的easyui控件
- */
- if (window.jQuery){
- jQuery(function(){
- easyloader.load('parser', function(){
- jQuery.parser.parse();
- });
- });
- }
- })();
到这里easyloader就分析结束了,如果你仔细看过了,相信一定会使用easyloader了。有问题可以给我留言。