关于实现Extjs动态加载类的方式实现

Extjs4以前的版本没有动态加载类的方式，这样开发程序的时候加载很多的js会导致加载变慢，由于本人一直使用extjs3的版本进行开发，于是简单实现了一个动态加载类的管理器，使用方式与extjs4的方式有些类似，在每一个类中需要使用其他类的时候像java一样先improt再使用。先看使用方式：

Ext.setPath("ThinkOA", "app");//将命名空间ThinkOA映射成webContent下的app文件夹,这样凡ThinkOA的命名空间的类都会去app目录下加载
Ext.setPath("Ext.ux", "resources/ux");//将命名空间Ext.ux映射成webContent下的resources/ux文件夹路径,这样凡Ext.ux的命名空间的类都会去resources/ux目录下加载
Ext.loadJs("ThinkOA/ns.js");//加载ns.js文件
Ext.loadJs("ThinkOA/constant.js");

Ext.require("ThinkOA.Viewport");//导入自定义类ThinkOA.Viewport 需要保证app目录下有名称为Viewprot.js文件,里面的类名称必须是ThinkOA.Viewport
Ext.require("ThinkOA.LoginWindow");//导入自定义类ThinkOA.LoginWindow
new ThinkOA.LoginWindow({
    isDebug: false,
    loginUrl: "login.do",//Ext.ParamMgr.getValue("login.url"),

    listeners: {
        scope: this,
        submit: function(win, jsonObject) {
            if (jsonObject.success) {
                new ThinkOA.Viewport({
                });
                win.close();
            }else {
                Ext.MessageBox.alert("提示",jsonObject.message);
            }
        }
    }

}).show();

 js文件目录结构如下：

按照这样的方式，当需要引入一个类的时候直接调用Ext.require（）方法即可，这样在使用的时候就会动态去加载这个类，当然也可以动态的去引入一个不是类的js文件，调用Ext.loadJs()即可实现动态加载，现在下面给出动态加载js实现的代码，在这里采用ajax去请求js文件，然而ajax的方式都是异步的，这样就不能保证需要使用的类还没加载完就执行后面的代码，于是先实现一个同步的ajax方法，代码如下：

    /**
     * 扩张Ext.Ajax对象，增加同步请求方法
     */
    Ext.apply(Ext.Ajax, {
                /**
                 * 同步请求方法，将阻塞
                 */
                syncRequest : function(cfg) {
                    cfg = Ext.apply({
                                success : Ext.emptyFn,
                                failure : Ext.emptyFn
                            }, cfg)
                    var obj;
                    if (window.ActiveXObject) {
                        obj = new ActiveXObject('Microsoft.XMLHTTP');
                    } else if (window.XMLHttpRequest) {
                        obj = new XMLHttpRequest();
                    }
                    obj.open('POST', cfg.url, false);
                    obj.setRequestHeader('Content-Type',
                            'application/x-www-form-urlencoded');
                    obj.send(cfg.params);
                    var argument = cfg.argument || {};
                    if (obj.status == 200) {
                        cfg.success.call(cfg.scope || this, obj,argument);
                    } else if(obj.status == 404){
//                      Ext.MessageBox.alert(cfg.url+"不存在！")
                        cfg.failure.call(cfg.scope || this, obj,argument);
                    }else {
                        cfg.failure.call(cfg.scope || this, obj,argument);
                    }
                    // var result = Ext.util.JSON.decode(obj.responseText);
                }
            });

 有了此同步请求方法后，下面的js动态加载管理器就很容易实现，当加载一次的js文件就不会再加载，代码：

/**
 * js加载管理器
 */
Ext.JsMgr = Ext.extend(Object, {
            timeout : 30,
            scripts : {},
            disableCaching : true,
            paths : {},
            setPath : function(dest, target) {
                this.paths[dest] = target;
            },
            loadClass : function(className) {
                for (var p in this.paths) {
                    className = className.replace(p, this.paths[p])
                }
                var jsUrl = className.split(".").join("/") + ".js";
                if (!this.scripts[className]) {
                    //同步请求js文件
                    Ext.Ajax.syncRequest({
                                url : jsUrl,
                                success : this.processSuccess,
                                failure : this.processFailure,
                                scope : this,
                                timeout : (this.timeout * 1000),
                                disableCaching : this.disableCaching,
                                argument : {
                                    'url' : className
                                }
                            });
                }
            },
            loadJavaScript : function(filepath) {
                var className  = filepath.replace(".js","").split("/").join(".");
                this.loadClass(className);
            },
            processSuccess : function(response,argument) {
                this.scripts[argument.url] = true;
                window.execScript ? window
                        .execScript(response.responseText) : window
                        .eval(response.responseText);
            },
            processFailure : function() {
            }
        })
Ext.JsMgr = new Ext.JsMgr();

Ext.setPath = function(ns,path) {
    Ext.JsMgr.setPath(ns,path) ;
}
Ext.require = function() {
    Ext.JsMgr.loadClass(arguments[0]);
};
Ext.loadJs = function() {
    Ext.JsMgr.loadJavaScript(arguments[0])
}

 到此js加载管理器实现完成，目前只是先随便写了个哉项目中使用了下，还比较方便，不再需要大量的引入js，这样就可以实现按需加载，只是目前采用同步加载方式效率不会太高，以后考虑改成异步加载，提高加载速度。最后给出完整代码：

(function() {
    /**
     * 扩张Ext.Ajax对象，增加同步请求方法
     */
    Ext.apply(Ext.Ajax, {
                /**
                 * 同步请求方法，将阻塞
                 */
                syncRequest : function(cfg) {
                    cfg = Ext.apply({
                                success : Ext.emptyFn,
                                failure : Ext.emptyFn
                            }, cfg)
                    var obj;
                    if (window.ActiveXObject) {
                        obj = new ActiveXObject('Microsoft.XMLHTTP');
                    } else if (window.XMLHttpRequest) {
                        obj = new XMLHttpRequest();
                    }
                    obj.open('POST', cfg.url, false);
                    obj.setRequestHeader('Content-Type',
                            'application/x-www-form-urlencoded');
                    obj.send(cfg.params);
                    var argument = cfg.argument || {};
                    if (obj.status == 200) {
                        cfg.success.call(cfg.scope || this, obj,argument);
                    } else if(obj.status == 404){
//                      Ext.MessageBox.alert(cfg.url+"不存在！")
                        cfg.failure.call(cfg.scope || this, obj,argument);
                    }else {
                        cfg.failure.call(cfg.scope || this, obj,argument);
                    }
                    // var result = Ext.util.JSON.decode(obj.responseText);
                }
            });
    Ext.override(Ext.mgr.CompMgr,{
        getInstance : function(id, override){
            var instance, comp = this.get(id);
            if(comp){
                Ext.require(comp.className);//先加载类
                instance = new (comp.getClass())(Ext.apply(comp.getConfig(), override));
            }
            return instance;
        }
    })
    /**
     * js加载管理器
     */
    Ext.JsMgr = Ext.extend(Object, {
                timeout : 30,
                scripts : {},
                disableCaching : true,
                paths : {},
                setPath : function(dest, target) {
                    this.paths[dest] = target;
                },
                loadClass : function(className) {
                    for (var p in this.paths) {
                        className = className.replace(p, this.paths[p])
                    }
                    var jsUrl = className.split(".").join("/") + ".js";
                    if (!this.scripts[className]) {
                        //同步请求js文件
                        Ext.Ajax.syncRequest({
                                    url : jsUrl,
                                    success : this.processSuccess,
                                    failure : this.processFailure,
                                    scope : this,
                                    timeout : (this.timeout * 1000),
                                    disableCaching : this.disableCaching,
                                    argument : {
                                        'url' : className
                                    }
                                });
                    }
                },
                loadJavaScript : function(filepath) {
                    var className  = filepath.replace(".js","").split("/").join(".");
                    this.loadClass(className);
                },
                processSuccess : function(response,argument) {
                    this.scripts[argument.url] = true;
                    window.execScript ? window
                            .execScript(response.responseText) : window
                            .eval(response.responseText);
                },
                processFailure : function() {
                }
            })
    Ext.JsMgr = new Ext.JsMgr();

    Ext.setPath = function(ns,path) {
        Ext.JsMgr.setPath(ns,path) ;
    }
    Ext.require = function() {
        Ext.JsMgr.loadClass(arguments[0]);
    };
    Ext.loadJs = function() {
        Ext.JsMgr.loadJavaScript(arguments[0])
    }
})();

 源码下载地址：http://download.csdn.net/detail/ybhanxiao/7804811