JQuery-easyui 分析（1）

     下载了jquery-easyui的源码，做简单分析。

     easyui的代码库结构很简单。n个控件（widget）的文件(比如jquery.calendar.js, 一看就明白它是日历组件咯)加上两个基础文件--easyloader.js 和parser.js;

     easyloader.js 话说是负责加载每个widget的Js文件和css文件的，当然也负责把parser.js给load近来。

  首先看看easyloader.js:

   这个js里有一个modules对象：

var modules={messager:{
js:'jquery.messager.js',
css:'messager.css',
dependencies:['linkbutton','window','progressbar']
},
//... 省略其他
}

 这个代码段messager自然是easyui里一个widget，js，css属性都是widget对应的文件名；

dependencies 是依赖项；也就是说加载messager的时候先要把linkbutton，window，progressbar先加载进来。

加载widget的方法一目了然，是loadJS，loadCss，loadModule 这几个方法。

二：Parser.JS
    easyui的widget都是声明式的，比如：  <a href="#"  class="easyui-linkbutton" data-options="iconCls:'icon-add'">Add</a>  

 声明class为easyui-linkbutton，则easyui库会把这个超链接变成按钮。 那么easyui库就必须读到这个class，然后转换。

转换在parser.js 的parse方法中进行。

     在parser.js 中有一个plugins数组，保存了所有easyui的widget名称，如下代码：

plugins:['linkbutton','menu','menubutton','splitbutton','progressbar',
'tree','combobox','combotree','numberbox','validatebox','searchbox',
'numberspinner','timespinner','calendar','datebox','datetimebox','slider',
'layout','panel','datagrid','propertygrid','treegrid','tabs','accordion','window','dialog'
],

 

然后parse方法循环数组，每循环到一个widget名，就从网页中获取相关的jquery对象

parse: function(context){
var aa = [];
for(var i=0; i<$.parser.plugins.length; i++){  //循环widget数组
var name = $.parser.plugins[i];
var r = $('.easyui-' + name, context); //从网页中查找shen
if (r.length){
　　if (r[name]){
　　r[name]();
} else {
　　aa.push({name:name,jq:r});
}
}
}

 

余下就是调用easyloader进行加载了。

 

有一个问题还没明白，当把所有的widget合并到一个js文件里的时候，easyloader的load方法，还需要么？这个要继续分析他的代码了。。

很可惜，下载的代码并不是最新的版本。作者似乎故意只发上一个版本的源码。最新的技术，国之利器，不可示人啊。