原文链接： http://kalllx.iteye.com/blog/787031
?
原作者观点：
想找一份好的jsui 来做软件的外壳，最好是原创的，看了不少jquery代码，发现了不少的jqueryplugins.但是都比较零散，唯独jquery easyui ,比较系统。 功能和元素都比较全，自己想写一套类似的，可惜现在功力还不行。所以先学习easy-ui的源码吧。今天看了里面的第一个类。eayload。当 然看这个源码之前，最好将jquery源码先读一遍。因为easyui是基于jquery写的。如果想对jquery 深入了解，最好下一番功夫在ec-262-3上，详读后会对scope ,excute-context ,this等有更深入了解。 easyloader.js可以说是easyui的最基础的一个类，它负责加载js,css,以及locale文件，里面的结构比较简单。
?
本人实践后观点：这不过是一个锦上添花的功能，放弃
1. 放弃使用easyloader.js的功能。 其作用不过是根据页面上使用了哪些easyUi组件，动态装载相应的js，和css。其中js组件之间，有定义一个依赖关系。
比如，treegrid依赖于datagrid；如果页面上用到了treegrid，easyloader会将plugins下的jquery.treegrid.js和jquery.datagrid.js一起加载到页面中：
treegrid: {
??? ??? ??? js: "jquery.treegrid.js",
??? ??? ??? css: "tree.css",
??? ??? ??? dependencies: ["datagrid"]
??? ??? },
2. 其原理可能是 ： 拦截在页面中的easyUi特有的class； 比如class="easyui-dialog"；easyloader.js可以判定它用了dialog组件。【没时间研究……有兴趣的同学告知一下】
3. 放弃原因： 意义不大，节省不了多少流量，本来easyUi的js就不大，压缩以后就更小了。相反，我在使用easyloader过程中，倒是会出现脚本错误（可能在form上面忘了加class，后面又用了其clear方法），可能是本人写法不对，但是不想浪费时间。
4. 最终引入文件截图:
?
--------------------------以下为转载内容 ------------------------------------------
/**
?* 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();//渲染方法
??? ??? ??? });
??? ??? });
??? }
???
})();