李翠平

摘要：为了提供给用户良好的页面使用感受，在页面中使用脚本是常见的做法。用Javascript开发的Ext Js框架其丰富的界面功能，能带给用户良好的体验。为了提高页面的执行效率，Ext Js通过一系列方法实现了动态加载机制，具体有参数设置方法、Ext部分导入方法以及微加载等。文章Ext Js的动态加载机制的相关方法进行讨论。经过比较，其中的参数设置方法简单、高效。

关键词：Ext JS；动态加载；执行效率；JavaScript；参数设置

中图分类号：TP391.1

文献标志码：A

文章编号：1006-8228（2017）01-41-03

0.引言

随着Web技术的广泛应用和发展，开发者更希望开发出吸引用户同时能满足用户需求的页面。而为了达到良好的效果和简化开发，市场出现了许多以JavaScript为基础的框架，其中Ext Js就是一个比较综合的Js框架。其主要应用是界面式开发，方便用户快捷高效的制作出一个界面统一的应用系统。但是一次性加载完所有的Js文件，对于一个较大型的项目来说，效率就会变得低下。是否可以在需要的时候才进行加载？Ext Js的动态加载机制，就实现了按需加载。该功能是从Ext Js 4.0版本开始新增的特性。

1.实现动态加载的具体方法

1.1使用相关加载时的参数配置规则

（1）需要加载的外部js文件需要使用Ext.defme的方法定义一个类。

（2）外部js文件和类文件名要一致。比如创建类App.ux.MusicWin对应的文件名是MusicWin.1s。

（3）要实现动态加载，必须配置参数。

Ext.Loader.setConfig（enabled：true），将其中enabled屙性的值设置为true，该属性的默认值是false。

（4）可以通过设置paths，设置1s文件的位置，如缺省，就是当前路径。

例如：Ext.Loader.setConfig（paths：App.ux'："）；，到当前路径寻找App.ux的类定义。

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

使用chrome的Develop工具可以看到，在执行了相关操作（比如点击按钮）后，才会去加载定义的js文件，测试成功。图1和图2展示了测试的结果。

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

1.2自定义需要的ext-all.is文件，而不是导入整个文件的实现规则

（1）下载Sencha Cmd。Sencha Cmd是一套集打包、部署、压缩等功能的工具。Sencha Cmd支持Sencha Ext Js的4.1.1a及以上版本并支持SenchaTouch的2.1版本及以上。许多新功能需要在框架的支持下工作。Sencha Cmd需要Java的运行环境，需要1.7及以上版本的java环境支持，最低要求是javal.6版本。其下载地址：http：//www.sencha.com/products/sencha-cmd/download。安装完后，进入命令行（CMD）执行：

sencha-sdk extjs compile exclude-namespace Ext.

chart and concat ext-all-nocharts-debug-w-comments，js

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

（3）sdk后面是extjs的目录，sencha cmd依赖下面的src目录的源代码产生汇总的is。

（4）包和第三方包并不是使用Ext.define方式来定义的，使用以下方法导入自己定义的is文件：Ext.Loader.IoadScript（url：scriptpath，scope：this）：

需要注意两点：①这种方式是没有缓存机制的，只要执行这个，都会从服务器端重新下载代码；②这种方式是异步的，如果导入两份有前后依赖关系的js，则有可能出问题。可以用祥光方法解决这个问题。定义is的全局变量，或在Ext对象中设置相应的属性。对有依赖关系的文件，可以在第一份加载成功后再加载第二份。

Ext.LoadeLIoadScript（{url：scriptl path，scope：this.

onLoad：function（）

Ext.Loader.10adScript（url：script2path，scope：this）：

1.3使用controller方式具体实现规则

（1）获取加载文件的路径：对controHer而言，它的加载路径总是有两个备选路径，一个是Ext框架级别的备选路径，它的默认值是当前目录，另外一个是项目级别的路径，其优先级高于框架级别。只有項目级别路径加载不到is资源文件时，才会从框架级别的路径中加载is文件。

（2）要计算出项目级别的路径，不得不获取很多相关信息，比如前缀，controller的类名，路径名。其中Ext.application的项目名（name）的作用是提供项目级别路径的key，Ext.application的（appFolder）提供了项目级别路径的value，前缀是通过类的全名解析出来的。一般类的全名的前缀部分最好和Ext.application的项目名（name）一致，其原因是，资源文件最终路径path是通过path=paths[prefix]计算出来的。如果不一致，则转else分支。所有的资源文件最终路径都是用.分割的路径最终替换成的，分割的路径并且尾部追加扩展名来形成的，项目中任何地方不会涉及裸露的路径字符串。

（3）在任何情况下controller总能被正确的加载，只要appFolder设置正确。

1.4关于微加载

在最新的Sencha Cmd6包含了本地存储缓存，这类似于Sencha Touch的产品的微加载。它有一些重要的改进：

（1）缓存能在app.json中禁用；

（2）只有通过徽加载方式加载的内容才不会被删除；

（3）只有应用程序的当前版本才可保持在本地存储。

这些改进解决了当前Touch微加载所报告的问题。主要是它会在超出空间的时候积极的删除本地存储的内容。这个问题时常发生是因为保留了不必要的旧版本应用程序，这让完全删除成为最终选择。

2.结束语

本文从几种途径讨论了ExT的按需加载问题。这几种解决方法都各自有优点和不足之处。从这几种方法比较来看，个人更喜欢第一种方式，即：通过参数配置问题，这种方式简单有效。本文探讨的几种方法，只是工作中发现的，相信还有其他更好的解决方法等待我们去发现，去挖掘。