關於實現Extjs動態加載類的方式實現

時間  2019-11-29
標籤 關於 實現 extjs 動態 加載 方式 简体版
原文   原文鏈接

Extjs4之前的版本沒有動態加載類的方式，這樣開發程序的時候加載不少的js會致使加載變慢，因爲本人一直使用extjs3的版本進行開發，因而簡單實現了一個動態加載類的管理器，使用方式與extjs4的方式有些相似，在每個類中須要使用其餘類的時候像java同樣先improt再使用。先看使用方式：java

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目錄結構web

按照這樣的方式，當須要引入一個類的時候直接調用Ext.require（）方法便可，這樣在使用的時候就會動態去加載這個類，固然也能夠動態的去引入一個不是類的js文件，調用Ext.loadJs()便可實現動態加載，如今下面給出動態加載js實現的代碼，在這裏採用ajax去請求js文件，然而ajax的方式都是異步的，這樣就不能保證須要使用的類還沒加載完就執行後面的代碼，因而先實現一個同步的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文件就不會再加載，代碼：json

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，這樣就能夠實現按需加載，只是目前採用同步加載方式效率不會過高，之後考慮改爲異步加載，提升加載速度。最後給出完整代碼：app

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異步

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程