[Ext JS 4] 动态加载
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 或其他方式提示性能。参见