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

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();

js文件目录结构如下：

按照这样的方式，当需要引入一个类的时候直接调用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