/**
* easyloader - jQuery EasyUI
*
* Licensed under the GPL terms
* To use it on other terms please contact us
*
* Copyright(c) 2009-2012 stworthy [ stworthy@gmail.com ]
*
*/
/**
* 首先要知道eeasyui的模块化组成
* 1.模块的属性
* (1).模块的名字,如:"pagination"
* (2).有且只有一个js文件的名字,如:"jquery.pagination.js"
* (3).可能存在一个css文件的名字,如:"pagination.css"
* (4).依赖的其他的模块的名字的数组,如:['linkbutton']
* 2.easyload在加载其他模块的时候都会有一个基路径,这个基路径就是easyload.js所在的目录
* 3.easyload.js加载运行注册页面初始化函数,在这个初始化函数中首先加载"parser"模块,加载完成后,再调用"parser"模块的方法:jQuery.parser.parse()
*/
(
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'
},
progressbar: {
js:
'jquery.progressbar.js',
css:
'progressbar.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']
},
propertygrid: {
js:
'jquery.propertygrid.js',
css:
'propertygrid.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',
'progressbar']
},
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']
},
searchbox: {
js:
'jquery.searchbox.js',
css:
'searchbox.css',
dependencies: [
'menubutton']
},
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',
'combo']
},
datetimebox: {
js:
'jquery.datetimebox.js',
dependencies: [
'datebox',
'timespinner']
},
slider: {
js:
'jquery.slider.js',
dependencies: [
'draggable']
},
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',
'cz':
'easyui-lang-cz.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文件。就是把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);
}
}
/**
* 只加载单个模块,不加载依赖的模块
* 加载完成之后,queues队列里对应的该模块的属性的值为"loaded"
* @param name
* @param callback
*/
function loadSingle(name, callback) {
// 加载队列存入该模块名，并表示状态为loading。
queues[name] =
'loading';
// 根据模块名，取出该模块定义
var module =
modules[name];
// js加载状态,一个模块肯定会有一个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'];
var url =
easyloader.
base +
'' +
module[
'js'];
}
loadJs(
url,
function () {
jsStatus =
'loaded';
if (
jsStatus ==
'loaded' &&
cssStatus ==
'loaded') {
finish();
}
});
function finish() {
queues[name] =
'loaded';
easyloader.
onProgress(name);
if (callback) {
callback();
}
}
}
//根据名称加载模块,如:loadModule("parser")
function loadModule(name, callback) {
var mm = [];
var doLoad =
false;
if (
typeof name ==
'string') {
add(name);
}
else {
for (
var i =
0;
i < name.
length;
i++) {
add(name[
i]);
}
}
function add(name) {
//如果定义的所有模块中不包含指定加载的模块的名称的话,就直接返回
if (!
modules[name])
return;
//获取这个模块的所有依赖模块
var d =
modules[name][
'dependencies'];
if (
d) {
//如果这个莫块存在依赖模块就先加载依赖模块
for (
var i =
0;
i <
d.
length;
i++) {
add(
d[
i]);
}
}
//将模块的名字添加到mm数组中
mm.
push(name);
}
function finish() {
if (callback) {
callback();
}
easyloader.
onLoad(name);
}
var time =
0;
function loadMm() {
//加载模块的方法
if (
mm.
length) {
var m =
mm[
0];
// the first module
if (!
queues[
m]) {
doLoad =
true;
loadSingle(
m,
function () {
mm.
shift();
loadMm();
});
}
else if (
queues[
m] ==
'loaded') {
mm.
shift();
loadMm();
}
else {
if (
time <
easyloader.
timeout) {
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();
}
easyloader = {
modules:
modules,
locales:
locales,
base:
'.',
theme:
'default',
css:
true,
locale:
null,
timeout:
2000,
load:
function (name, callback) {
if (
/\.css$/i.
test(name)) {
//如果加载的是单个css文件
if (
/^http/i.
test(name)) {
//如果使用的是绝对地址,直接调用loadCss方法
loadCss(name, callback);
}
else {
//如果是相对地址就使用基地址
loadCss(
easyloader.
base + name, callback);
}
}
else if (
/\.js$/i.
test(name)) {
//如果是单个js文件
if (
/^http/i.
test(name)) {
//如果是绝对地址,直接调用加载js文件的方法
loadJs(name, callback);
}
else {
//如果是相对地址就使用基地址
loadJs(
easyloader.
base + name, callback);
}
}
else {
//非js和css文件,就调用加载模块的名称
loadModule(name, callback);
}
},
onProgress:
function (name) { },
onLoad:
function (name) { }
};
/**
* 加载js文件函数，过程就是动态创建一个script标签，然后添加到head标签中去* 有一个问题是监听了script标签的两个事件函数，一个是onload，另一个是onreadystatechange，这个数要是针对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);
}
//找到easyloader.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);
}
}
window.
using =
easyloader.
load;
if (
window.
jQuery) {
jQuery(
function () {
easyloader.
load(
'parser',
function () {
jQuery.
parser.
parse();
});
});
}
})();
