在Extjs模块化程序中动态加载js文件

最新推荐文章于 2021-06-09 19:26:20 发布

原创最新推荐文章于 2021-06-09 19:26:20 发布 · 2.3k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#extjs #callback #function #button #module #null

extjs 学习专栏收录该内容

29 篇文章

订阅专栏

本文介绍了一种基于Extjs的模块化方法，并详细解释了如何通过动态加载JavaScript组件来实现模块的按需初始化。此外，文中还讨论了动态加载机制在调试过程中遇到的问题。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1. 本Extjs模块化的方式是参考的 http://microboat.iteye.com/blog/182682 的方法

2. 在模块中：

Ext.extend(main.module,{
	 init:function(){
	
	 	// load js
	 	this.loadJS("js/modules/modScoreManage/GridStudent.js",this.onLoadJS.createDelegate(this));
		
	}
	,onLoadJS:function(){
		
		// 创建Module中所需对象
		this.sm = new Ext.grid.RowSelectionModel({ singleSelect:true });
	 	...
		this.gridStudent = new modScoreManage.GridStudent(this.sm,this.cmScore);  
	 	
	 	// 添加事件
	 	this.gridStudent.getTopToolbar().findByType('button')[0].on('click',this.onBtnEdit,this);
		this.gridStudent.getTopToolbar().findByType('button')[1].on('click',this.onBtnDelete,this);
	 	
		// 将母体组件添加到this.main（那个tab）中
		this.body = this.gridStudent;
		this.main.add(this.body);
		this.main.doLayout();
		
	}
	,getJsM:function(f)
	{
	    var reg = /\/(\w+)\./;
	      jF = f.match(reg);
	    return jF[jF.length-1];
	}
	,loadJS:function(js, callback)
	{
	    var id = this.getJsM(js);
	    var scriptId = document.getElementById(id);
	    if(scriptId)
	    {
	          callback();
	    }
	    else
	    {
	            var script = document.createElement("script");
	              script.id = id;
	              script.type = "text/javascript";
	            if (callback)
	            {
	                  script.onload = script.onreadystatechange = function()
	                {
	                    if (script.readyState && script.readyState != 'loaded' && script.readyState != 'complete')
	                    {
	                        return;
	                    }
	                      script.onreadystatechange = script.onload = null;
	                      callback();
	                };
	            }
	              script.src = js;
	            var head = document.getElementsByTagName('head').item(0);
	              head.appendChild (script);
	    }
	}...

将 loadJS 的回调函数与 Ext 的 createDelegate 方法配合使用，保证了外部js文件加载完成后再进行模块的初始化。

这样实现了动态加载模块中中所需的js组件。

不过这里面仍然有问题没有解决：

动态加载的js文件无法以合适的方式进行删除，以至于程序调试时每次都要清空缓存来调试页面。非常不方便。

如有达人对此有所建议，还望多多提醒。