ExtJs 4.x 学习小记：Ext.require动态加载js文件

最新推荐文章于 2025-10-02 09:12:18 发布

原创最新推荐文章于 2025-10-02 09:12:18 发布 · 1.9w 阅读

3 ·

CC 4.0 BY-SA版权

ExtJs 专栏收录该内容

13 篇文章

订阅专栏

本文介绍如何在网页中动态加载JS文件以减少浏览器负担，提高浏览速度，并通过使用Extjs的require方法实现这一目标。包括设置Ext.Loader启用动态依赖加载特性，以及在不同JS文件之间的动态调用和加载过程。

一般我们在网页中中引用html或jsp文件，都是在页面文件中通过一下方式静态的引用

<script type="text/javascript" src="./js/PlanApply/monthrepairinfo.js"></script>

在js文件数量少的情况下还可以接受，当js文件较多时，如果都这样使用静态方式加载，会增加浏览器的负担，如果能改为动态加载，需要时才加载要用到的js文件，这样可以一定程度上提高浏览器的浏览速度，Extjs提供了require方法来动态加载js文件

要使用动态加载，首先要设置Ext.Loader的enabled配置项为true，在Ext的API文档中，原文如下

enabled : Boolean
Whether or not to enable the dynamic dependency loading feature.

Defaults to: false

Available since: 4.0.0

它写到默认为false，使用发现其实为true，所以使用时可以不管Loader，使用默认值

test.js

/**
 * 定义一个方法，用来显示Form
 */
 function displayForm()
 {
	var win=Ext.create("js.test",{ 
	                  title:'动态加载js测试页面',
	                  height:300,
	                  width:300
	            });                                  
	win.show();   
 }
 /**
  * 定义一个类
  */
 Ext.define('js.test',{
        extend:'Ext.window.Window' 
    }) ;
Ext.onReady

另一个js文件handler.js中要动态调用，handler.js在页面中使用静态调用，当点击一个按钮时，对test.js进行动态加载

require成功后有一个回调函数，在这里我们调用test.js中的displayForm方法显示界面

 function btnClick(optype){
	Ext.require('js.test',function(){
		displayForm();
	})	
 }

说明：上面两段代码中都有 ‘js.test’，在不使用Loader的paths做路径设置的前提下，代表js文件的路径形式， ‘js.test’ 就代表 js/test.js，即网站目录下的js文件夹下面的test.js文件，所以自定义的类名和require的第一个参数要保持一致。