晨港飞燕的博客

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

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

Java代码  收藏代码
  1. Ext.setPath("ThinkOA", "app");//将命名空间ThinkOA映射成webContent下的app文件夹,这样凡ThinkOA的命名空间的类都会去app目录下加载  
  2. Ext.setPath("Ext.ux", "resources/ux");//将命名空间Ext.ux映射成webContent下的resources/ux文件夹路径,这样凡Ext.ux的命名空间的类都会去resources/ux目录下加载  
  3. Ext.loadJs("ThinkOA/ns.js");//加载ns.js文件  
  4. Ext.loadJs("ThinkOA/constant.js");  
  5.   
  6. Ext.require("ThinkOA.Viewport");//导入自定义类ThinkOA.Viewport 需要保证app目录下有名称为Viewprot.js文件,里面的类名称必须是ThinkOA.Viewport  
  7. Ext.require("ThinkOA.LoginWindow");//导入自定义类ThinkOA.LoginWindow  
  8. new ThinkOA.LoginWindow({  
  9.     isDebug: false,  
  10.     loginUrl: "login.do",//Ext.ParamMgr.getValue("login.url"),  
  11.       
  12.     listeners: {  
  13.         scope: this,  
  14.         submit: function(win, jsonObject) {  
  15.             if (jsonObject.success) {  
  16.                 new ThinkOA.Viewport({  
  17.                 });  
  18.                 win.close();  
  19.             }else {  
  20.                 Ext.MessageBox.alert("提示",jsonObject.message);  
  21.             }   
  22.         }  
  23.     }  
  24.   
  25. }).show();  

 js文件目录结构如下：js目录结构

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

Js代码  收藏代码
  1.     /** 
  2.      * 扩张Ext.Ajax对象，增加同步请求方法 
  3.      */  
  4.     Ext.apply(Ext.Ajax, {  
  5.                 /** 
  6.                  * 同步请求方法，将阻塞 
  7.                  */  
  8.                 syncRequest : function(cfg) {  
  9.                     cfg = Ext.apply({  
  10.                                 success : Ext.emptyFn,  
  11.                                 failure : Ext.emptyFn  
  12.                             }, cfg)  
  13.                     var obj;  
  14.                     if (window.ActiveXObject) {  
  15.                         obj = new ActiveXObject('Microsoft.XMLHTTP');  
  16.                     } else if (window.XMLHttpRequest) {  
  17.                         obj = new XMLHttpRequest();  
  18.                     }  
  19.                     obj.open('POST', cfg.url, false);  
  20.                     obj.setRequestHeader('Content-Type',  
  21.                             'application/x-www-form-urlencoded');  
  22.                     obj.send(cfg.params);  
  23.                     var argument = cfg.argument || {};  
  24.                     if (obj.status == 200) {  
  25.                         cfg.success.call(cfg.scope || this, obj,argument);  
  26.                     } else if(obj.status == 404){  
  27. //                      Ext.MessageBox.alert(cfg.url+"不存在！")  
  28.                         cfg.failure.call(cfg.scope || this, obj,argument);  
  29.                     }else {  
  30.                         cfg.failure.call(cfg.scope || this, obj,argument);  
  31.                     }  
  32.                     // var result = Ext.util.JSON.decode(obj.responseText);  
  33.                 }  
  34.             });  

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

Js代码  收藏代码
  1. /** 
  2.  * js加载管理器 
  3.  */  
  4. Ext.JsMgr = Ext.extend(Object, {  
  5.             timeout : 30,  
  6.             scripts : {},  
  7.             disableCaching : true,  
  8.             paths : {},  
  9.             setPath : function(dest, target) {  
  10.                 this.paths[dest] = target;  
  11.             },  
  12.             loadClass : function(className) {  
  13.                 for (var p in this.paths) {  
  14.                     className = className.replace(p, this.paths[p])  
  15.                 }  
  16.                 var jsUrl = className.split(".").join("/") + ".js";  
  17.                 if (!this.scripts[className]) {  
  18.                     //同步请求js文件  
  19.                     Ext.Ajax.syncRequest({  
  20.                                 url : jsUrl,  
  21.                                 success : this.processSuccess,  
  22.                                 failure : this.processFailure,  
  23.                                 scope : this,  
  24.                                 timeout : (this.timeout * 1000),  
  25.                                 disableCaching : this.disableCaching,  
  26.                                 argument : {  
  27.                                     'url' : className  
  28.                                 }  
  29.                             });  
  30.                 }  
  31.             },  
  32.             loadJavaScript : function(filepath) {  
  33.                 var className  = filepath.replace(".js","").split("/").join(".");  
  34.                 this.loadClass(className);  
  35.             },  
  36.             processSuccess : function(response,argument) {  
  37.                 this.scripts[argument.url] = true;  
  38.                 window.execScript ? window  
  39.                         .execScript(response.responseText) : window  
  40.                         .eval(response.responseText);  
  41.             },  
  42.             processFailure : function() {  
  43.             }  
  44.         })  
  45. Ext.JsMgr = new Ext.JsMgr();  
  46.   
  47. Ext.setPath = function(ns,path) {  
  48.     Ext.JsMgr.setPath(ns,path) ;  
  49. }  
  50. Ext.require = function() {  
  51.     Ext.JsMgr.loadClass(arguments[0]);  
  52. };  
  53. Ext.loadJs = function() {  
  54.     Ext.JsMgr.loadJavaScript(arguments[0])  
  55. }  

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

Java代码  收藏代码
  1. (function() {  
  2.     /** 
  3.      * 扩张Ext.Ajax对象，增加同步请求方法 
  4.      */  
  5.     Ext.apply(Ext.Ajax, {  
  6.                 /** 
  7.                  * 同步请求方法，将阻塞 
  8.                  */  
  9.                 syncRequest : function(cfg) {  
  10.                     cfg = Ext.apply({  
  11.                                 success : Ext.emptyFn,  
  12.                                 failure : Ext.emptyFn  
  13.                             }, cfg)  
  14.                     var obj;  
  15.                     if (window.ActiveXObject) {  
  16.                         obj = new ActiveXObject('Microsoft.XMLHTTP');  
  17.                     } else if (window.XMLHttpRequest) {  
  18.                         obj = new XMLHttpRequest();  
  19.                     }  
  20.                     obj.open('POST', cfg.url, false);  
  21.                     obj.setRequestHeader('Content-Type',  
  22.                             'application/x-www-form-urlencoded');  
  23.                     obj.send(cfg.params);  
  24.                     var argument = cfg.argument || {};  
  25.                     if (obj.status == 200) {  
  26.                         cfg.success.call(cfg.scope || this, obj,argument);  
  27.                     } else if(obj.status == 404){  
  28. //                      Ext.MessageBox.alert(cfg.url+"不存在！")  
  29.                         cfg.failure.call(cfg.scope || this, obj,argument);  
  30.                     }else {  
  31.                         cfg.failure.call(cfg.scope || this, obj,argument);  
  32.                     }  
  33.                     // var result = Ext.util.JSON.decode(obj.responseText);  
  34.                 }  
  35.             });  
  36.     Ext.override(Ext.mgr.CompMgr,{  
  37.         getInstance : function(id, override){  
  38.             var instance, comp = this.get(id);  
  39.             if(comp){  
  40.                 Ext.require(comp.className);//先加载类  
  41.                 instance = new (comp.getClass())(Ext.apply(comp.getConfig(), override));  
  42.             }  
  43.             return instance;  
  44.         }  
  45.     })  
  46.     /** 
  47.      * js加载管理器 
  48.      */  
  49.     Ext.JsMgr = Ext.extend(Object, {  
  50.                 timeout : 30,  
  51.                 scripts : {},  
  52.                 disableCaching : true,  
  53.                 paths : {},  
  54.                 setPath : function(dest, target) {  
  55.                     this.paths[dest] = target;  
  56.                 },  
  57.                 loadClass : function(className) {  
  58.                     for (var p in this.paths) {  
  59.                         className = className.replace(p, this.paths[p])  
  60.                     }  
  61.                     var jsUrl = className.split(".").join("/") + ".js";  
  62.                     if (!this.scripts[className]) {  
  63.                         //同步请求js文件  
  64.                         Ext.Ajax.syncRequest({  
  65.                                     url : jsUrl,  
  66.                                     success : this.processSuccess,  
  67.                                     failure : this.processFailure,  
  68.                                     scope : this,  
  69.                                     timeout : (this.timeout * 1000),  
  70.                                     disableCaching : this.disableCaching,  
  71.                                     argument : {  
  72.                                         'url' : className  
  73.                                     }  
  74.                                 });  
  75.                     }  
  76.                 },  
  77.                 loadJavaScript : function(filepath) {  
  78.                     var className  = filepath.replace(".js","").split("/").join(".");  
  79.                     this.loadClass(className);  
  80.                 },  
  81.                 processSuccess : function(response,argument) {  
  82.                     this.scripts[argument.url] = true;  
  83.                     window.execScript ? window  
  84.                             .execScript(response.responseText) : window  
  85.                             .eval(response.responseText);  
  86.                 },  
  87.                 processFailure : function() {  
  88.                 }  
  89.             })  
  90.     Ext.JsMgr = new Ext.JsMgr();  
  91.       
  92.     Ext.setPath = function(ns,path) {  
  93.         Ext.JsMgr.setPath(ns,path) ;  
  94.     }  
  95.     Ext.require = function() {  
  96.         Ext.JsMgr.loadClass(arguments[0]);  
  97.     };  
  98.     Ext.loadJs = function() {  
  99.         Ext.JsMgr.loadJavaScript(arguments[0])  
  100.     }  
  101. })();  

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

posted @ 2016-05-26 14:07  晨港飞燕  阅读(575)  评论(0)  编辑  收藏  举报