1、第一次看了官網的demo。引用的是EasyLoader.js文件，而不是引用jquery.easyui.min.js文件，我就有疑問了，百度一下。
jQuery EasyUI是一款基於JQuery的UI高速搭建組件。
EasyLoader是能夠動態載入腳本和CSS文件。也能夠動態載入EasyUI已有組件。須要引用EasyLoader.js文件，注意：這里就不須要引用jquery.easyui.min.js文件了。
比方須要載入linkbutton組件。則能夠用以下的兩種方式來載入：
第一種通過設置class來實現:
僅僅要class設置了easyui-組件名，easyloader就會自己主動動態載入對應的組件
另外一種通過腳本來實現:
") });
或者
這里using 等同於 easyloader.load，也就是說using是 easyloader.load方法的簡寫。
經常使用屬性：
1) Locale： 本地化
使用方法：easyloader.locale = "zh_CN"; // 本地化設置
2) Theme： 主題
使用方法：easyloader.theme = "gray"; // 設置主題
事件：
1) onProgress： 每一個組件載入完畢后觸發
2) onLoad：在onProgress事件后觸發，當組件以及關聯組件所有載入完畢后觸發
兩者的差別能夠從名稱中看出端倪。onProgress事件能夠用來顯示運行進度，而onLoad事件能夠用於提示用戶能夠使用組件了。
2、怎么動態載入js、css呢？
/**
* easyloader - jQuery EasyUI
*
* Licensed under the GPL:
* http://www.gnu.org/licenses/gpl.txt
*
* Copyright 2010 stworthy [ stworthy@gmail.com ]
*
*/
(function(){
//將全部的插件。和插件資源和依賴文件放進modules對象中。
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'
}
};
//將國際化文件放入一個locales對象中
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方法
function loadJs(url, callback){
//標志變量，js是否載入並運行
var done = false;
var script = document.createElement('script');//創建script dom
script.type = 'text/javascript';
script.language = 'javascript';
script.src = url;
script.onload = script.onreadystatechange = function(){ //onload是firefox 瀏覽器事件，onreadystatechange,是ie的。為了兼容，兩個都寫上，這樣寫會導致內存泄露
//script.readyState僅僅是ie下有這個屬性，假設這個值為undefined，說明是在firefox,就直接能夠運行以下的代碼了。反之為ie，須要對script.readyState
//狀態詳細值進行判別，loaded和complete狀態表示，腳本載入了並運行了。
if (!done && (!script.readyState || script.readyState == 'loaded' || script.readyState == 'complete')){
done = true;
script.onload = script.onreadystatechange = null;//釋放內存，還會泄露。
if (callback){//載入后運行回調
callback.call(script);
}
}
}
//詳細載入動作。上面的onload是注冊事件。
document.getElementsByTagName("head")[0].appendChild(script);
}
//運行js ,看代碼邏輯可知，運行js,僅僅是在js運行后。將這個script刪除而已，主要用來載入國際化文件
function runJs(url, callback){
loadJs(url, function(){
document.getElementsByTagName("head")[0].removeChild(this);
if (callback){
callback();
}
});
}
//載入css沒什么好說的
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);
}
}
//載入單一一個plugin,細致研究module ,能夠發現。pingin之間通過dependence,構造成了一顆依賴樹。
//這種方法。就是載入詳細樹中的一個節點
function loadSingle(name, callback){
//把整個plugin的狀態設置為loading
queues[name] = 'loading';
var module = modules[name];
//把js狀態設置為loading
var jsStatus = 'loading';
//假設同意css,而且plugin有css,則載入css,否則設置載入過了，事實上是不載入
var cssStatus = (easyloader.css && module['css']) ? 'loading' : 'loaded';
//載入css,plugin 的css，假設是全稱，就用全稱。否則把簡寫換成全稱。所以簡寫的css文件要放入到themes/type./文件下
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';
//js， css載入完，才調用回調
if (jsStatus == 'loaded' && cssStatus == 'loaded'){
finish();
}
});
}
//載入js,全稱用全稱，簡寫補全。
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();
}
});
//載入完調用的方法。改plugin狀態
function finish(){
queues[name] = 'loaded';
//調用正在載入的方法，事實上已經載入完了，
easyloader.onProgress(name);
if (callback){
callback();
}
}
}
//載入主模塊入口。
function loadModule(name, callback){
//定義數組，最后是形成的是依賴插件列表，最獨立的插件放在首位，name是末尾
var mm = [];
var doLoad = false;
//name有兩種。一種是string ,一種是string array,這樣一次能夠載入多個plugin,都是調用add方法進行加入
if (typeof name == 'string'){
add(name);
} else {
for(var i=0; i<name.length; i++){
add(name[i]);
}
}
function add(name){
//假設modules中沒有這個plugin那退出
if (!modules[name]) return;
//假設有。查看它是否依賴其它plugin
var d = modules[name]['dependencies'];
//假設依賴，就載入依賴的plugin.同一時候在載入依賴的plugin的依賴。注意循環中調用了add,是遞歸
if (d){
for(var i=0; i<d.length; i++){
add(d[i]);
}
}
mm.push(name);
}
function finish(){
if (callback){
callback();
}
//調用onLoad，傳遞name 為參數
easyloader.onLoad(name);
}
//形成依賴樹，不行還沒有做實質性工作呢，那就是載入。
打起精神來。最核心的代碼就是以下的了
//超時用
var time = 0;
//定義一個載入方法。定義后直接調用
function loadMm(){
//假設mm有長度，長度！=0,載入plugin,為0，即載入完畢。開始載入國際化文件。
if (mm.length){
var m = mm[0]; // the first module
if (!queues[m]){//狀態序列中沒有這個plugin的信息，說明沒有載入這個plug,調用laodSingle進行載入
doLoad = true;
loadSingle(m, function(){
mm.shift();//載入完畢后，將這個元素從數組去除，在繼續載入，直到數組
loadMm();
});
} else if (queues[m] == 'loaded'){//假設這個plugin已經載入，就不用載入，以為mm中可能有反復項
mm.shift();
loadMm();
} else {
if (time < easyloader.timeout){//超時時候。10秒鍾調用一次loadMn().注意arguments.callee代表函數本身
time += 10;
setTimeout(arguments.callee, 10);
}
}
} else {
if (easyloader.locale && doLoad == true && locales[easyloader.locale]){
var url = easyloader.base + 'locale/' + locales[easyloader.locale];
runJs(url, function(){
finish();
});
} else {
finish();
}
}
}
loadMm();
}
// 定義一個載入器，注意，是全局變量。沒有var,
easyloader = {
modules:modules,
locales:locales,
base:'.',//該屬性是為了載入js,記錄目錄路徑的
theme:'default', //默認主題
css:true,
locale:null,
timeout:2000,//載入超時事件
//easyloader.load()，該模塊載入的調用方法,先載入css,然后載入js
load: function(name, callback){
//假設載入是*.css文件，推斷是不是以http開頭，假設是，直接調用
if (/\.css$/i.test(name)){
if (/^http/i.test(name)){
loadCss(name, callback);
} else {
//不是http的。加上base.目錄路徑
loadCss(easyloader.base + name, callback);
}
}
//載入js文件
else if (/\.js$/i.test(name)){
if (/^http/i.test(name)){
loadJs(name, callback);
} else {
loadJs(easyloader.base + name, callback);
}
} else {
//假設直接傳遞一個插件名，就去modole數組中載入。改方法是重點，也是easyui自帶的plugin載入方式
loadModule(name, callback);
}
},
onProgress: function(name){},
onLoad: function(name){}
};
//以上一直在定義函數，和變量。此處為真正運行處
//獲取頁面的全部的script,主要是為了獲取我們如今解釋的easyloader.js文件路徑，來設置base屬性
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);//推斷文件是否含有easyloadr.js
if (m){
//假設有。base為easyloadr.js 的同樣前綴
easyloader.base = src.substring(0, m.index);
}
}
//定義一個簡化調用接口
window.using = easyloader.load;
if (window.jQuery){
jQuery(function(){
//系統數據載入完后，載入parser.js插件，該插件是渲染界面的
easyloader.load('parser', function(){
jQuery.parser.parse();//渲染方法
});
});
}
})();