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方法，還需要么？這個要繼續分析他的代碼了。。

很可惜，下載的代碼並不是最新的版本。作者似乎故意只發上一個版本的源碼。最新的技術，國之利器，不可示人啊。