[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 或其他方式提示性能。参见
使用yuicompressor 压缩js, CSS
郑重声明:本站内容如果来自互联网及其他传播媒体,其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享,并不代表本站赞同其观点和对其真实性负责,也不构成任何其他建议。