EXT JS动态加载机制探究及实现.docVIP

EXT JS动态加载机制探究及实现 　　摘要：为了提供给用户良好的页面使用感受，在页面中使用脚本是常见的做法。用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：///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框架级别的备选路径，它的默认值是当前目录，另外一