[Ext JS 4] 动态加载| 成都西华升腾科技有限公司

Ext JS开发大全

CmsWing

[Ext JS 4] 动态加载

## [Ext JS 4] 动态加载
### Ext JS 4 require 动态加载
一次性加载完所有的js 文件， 对于比较大型的项目来说，效率较为低下。可能只是一个简单的首页， 也要几秒甚至十几秒才能出得来。
是否可以在需要的时候才进行加载？
动态加载， 是Ext JS 4 中新增的特性。
先直接看看Ext JS 4 中如何实现动态加载。
例子步骤：
### 1. 新建一个 MusicWin.js 文件，内容如下：
```javascript
Ext.define('App.ux.MusicWin',{  
    play : function(){  
alert('playing...');  
    }  
}); 
```
使用Ext 的方式定义一个类：App.ux.MusicWin ， 此类中有一个方法play, 方法体就很简单，打印一个提示信息。

### 2. 在测试页面中 dynamicLoad.html 中， 动态的载入以上js, 并调用play 方法。
```html
<html>
<head>
<metahttp-equiv="Content-Type"content="text/html; charset=UTF-8">
<title>Insert title heretitle>
<scriptsrc="../ext-all.js"type="text/javascript">script>
<script>
Ext.Loader.setConfig({enabled:true,paths:{'App.ux':''}}); 
Ext.onReady(function(){
//no content	
});
functionplay()
{
Ext.require(['App.ux.MusicWin'],function(){
var s = newApp.ux.MusicWin();
		s.play();
	});
}
script>
head>
<body>
<inputtype=buttonvalue="Test2"οnclick="play()">
body>
html>
```

### 3. 使用chrome 的Develop 工具可以看到， 在点击按钮的时候，才会去加载定义的js 文件。测试成功。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 文件的位置， 空的话就是当前路径。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 andconcat 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 对象中设置相应的属性。
依赖关系的文件， 可以在第一份加载成功后再加载第二份：
```html
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

购物车

0 ITEMS ON YOUR CART

Ext JS开发大全

[Ext JS 4] 动态加载

网站导航