[Ext JS 4] 动态加载

2021-12-12 01:48:37

Ext JS 4 require 动态加载

一次性加载完所有的js 文件，对于比较大型的项目来说，效率较为低下。可能只是一个简单的首页，也要几秒甚至十几秒才能出得来。

是否可以在需要的时候才进行加载？

动态加载，是Ext JS 4 中新增的特性。

先直接看看Ext JS 4 中如何实现动态加载。

例子步骤：

1. 新建一个 MusicWin.js 文件，内容如下：

Ext.define(‘App.ux.MusicWin‘,{  
    play : function(){  
        alert(‘playing...‘);  
    }  
});

使用Ext 的方式定义一个类：App.ux.MusicWin ，此类中有一个方法play, 方法体就很简单，打印一个提示信息。

2. 在测试页面中 dynamicLoad.html 中，动态的载入以上js, 并调用play 方法。

<!-- oscar999 -->
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
  <script src="../ext-all.js" type="text/javascript"></script>
<script>
Ext.Loader.setConfig({enabled:true,paths:{‘App.ux‘:‘‘}}); 
Ext.onReady(function(){
    //no content	
});

function play()
{
	Ext.require([‘App.ux.MusicWin‘],function(){
		var s = new App.ux.MusicWin();
		s.play();
	});
}
</script>
</head>
<body>
<input type=button value="Test2" onclick="play()">
</body>
</html>

3. 使用chrome 的Develop 工具可以看到，在点击按钮的时候，才会去加载定义的js 文件。测试成功。

不难看出，使用这种方式需要遵循一定的规则：

1. js 的源文件使用 Ext.define 的方式定义一个类。

2. 源文件的名字和类的名字是一致的。像上面的类App.ux.MusicWin 对应的文件名是 MusicWin.js

3. 要使用动态加载，需要配置这个参数为true. Ext.Loader.setConfig({enabled:true});

默认值看上去是true. (API上是写的默认值是false).

如果设为false 的话，会有以下错误

4. 可以通过设置paths 设置js 文件的位置，空的话就是当前路径。

例如： Ext.Loader.setConfig({paths:{‘App.ux‘:‘‘}}); ，到当前路径寻找App.ux 的类定义。

如果不设置这个参数的话，默认到 App这个项目的 ux 路径下去寻找。

加载js 的方式：

1. 此方式已经考虑缓存的状况。一段时间更新的话不会重复加载同样的js .

2. 可以设置 disableCaching 配置不产生_dc = 后面一串

3. 可以设置disableCachingParam 修改_dc 为其他字串。

Sencha Cmd

有的项目可能完全用不上像Ext.chart 这样的包，ext-all.js 的文件超过1M ，如何自定需要ext-all.js(as ext-all-no-chart.js)

Sencha Cmd 是一套集打包，部署，压缩等功能的一个工具。

下载地址：http://www.sencha.com/products/sencha-cmd/download

安装完成以后, 进入命令行执行：

sencha -sdk extjs compile exclude -namespace Ext.chart and concat ext-all-nocharts-debug-w-comments.js

细部的sencha cmd 就不在此介绍了，只是简单介绍：

1. 使用sencha cmd 可以产生指定模块的js . （不需要的模组就包括进来）

2. -sdk 后面是extjs 的目录， sencha cmd 依赖下面的 src 目录的源代码产生汇总的js.

Ext.Loader.loadScript

但是事实不总是那么理想

1. 项目不是使用sencha cmd 产生的，也没有导入 extjs/src ，而是直接导入的ext-all.js 这份文件。

2. 自己定义的js 包以及第三方包并不是使用Ext.define 的方式来定义的。

这个时候，可以考虑使用Ext.Loader.loadScript

使用方式很简单：

Ext.Loader.loadScript({ url: scriptpath,scope:this});

需要注意的是：

1. 这种方式是没有缓存机制的，只要执行这个，都会从服务器端重新下载代码。

2. 这种方式是异步的，如果导入两份有前后依赖关系的js 的话，有可能会出现问题。

没有缓存机制，就要自行处理了，或定义js 的全局变量，或在Ext 对象中设置相应的属性。

依赖关系的文件，可以在第一份加载成功后再加载第二份：

	Ext.Loader.loadScript({ url: script1path,scope:this,onLoad:function(){
		Ext.Loader.loadScript({ url:script2path,scope:this});
	}});

总结

总结一下，可以通过

1. Ext require 动态加载

2. sencha cmd 定制模组

3. Ext.loader.loadScript

三个方面来实现文件面的性能提示，除此之外，还可以使用 YUI comperssor 压缩js 或其他方式提示性能。参见

使用yuicompressor 压缩js, CSS

[Ext JS 4] 动态加载

码农公寓

Ext JS 4 require 动态加载

Sencha Cmd

Ext.Loader.loadScript

总结

使用yuicompressor 压缩js, CSS

相关文章