关于实现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