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

2022-07-20 15:00:06

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

  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. Ext.require("ThinkOA.Viewport");//导入自定义类ThinkOA.Viewport 需要保证app目录下有名称为Viewprot.js文件,里面的类名称必须是ThinkOA.Viewport
  6. Ext.require("ThinkOA.LoginWindow");//导入自定义类ThinkOA.LoginWindow
  7. new ThinkOA.LoginWindow({
  8. isDebug: false,
  9. loginUrl: "login.do",//Ext.ParamMgr.getValue("login.url"),
  10. listeners: {
  11. scope: this,
  12. submit: function(win, jsonObject) {
  13. if (jsonObject.success) {
  14. new ThinkOA.Viewport({
  15. });
  16. win.close();
  17. }else {
  18. Ext.MessageBox.alert("提示",jsonObject.message);
  19. }
  20. }
  21. }
  22. }).show();

关于实现Extjs动态加载类的方式实现关于实现Extjs动态加载类的方式实现js文件目录结构如下：关于实现Extjs动态加载类的方式实现

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

  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文件就不会再加载，代码：

  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. Ext.setPath = function(ns,path) {
  47. Ext.JsMgr.setPath(ns,path) ;
  48. }
  49. Ext.require = function() {
  50. Ext.JsMgr.loadClass(arguments[0]);
  51. };
  52. Ext.loadJs = function() {
  53. Ext.JsMgr.loadJavaScript(arguments[0])
  54. }

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

  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. Ext.setPath = function(ns,path) {
  92. Ext.JsMgr.setPath(ns,path) ;
  93. }
  94. Ext.require = function() {
  95. Ext.JsMgr.loadClass(arguments[0]);
  96. };
  97. Ext.loadJs = function() {
  98. Ext.JsMgr.loadJavaScript(arguments[0])
  99. }
  100. })();

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

上一篇：OOP学习


下一篇：ExtJs 4.2.1 复选框数据项动态加载(更新一下)