[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});

.

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


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

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

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


加载js 的方式:


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

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

3. 可以设置 修改_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



郑重声明:本站内容如果来自互联网及其他传播媒体,其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享,并不代表本站赞同其观点和对其真实性负责,也不构成任何其他建议。