EXT JS动态加载机制的研究与实现

计算机时代2017年第1期

0引言

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

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

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

⑴需要加载的外部js文件需要使用Ext.define的方法定义一个类。

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

⑶要实现动态加载，必须配置参数。

Ext.Loader.setConfig({enabled:true})，将其中enabled 属性的值设置为true，该属性的默认值是false。

⑷可以通过设置paths，设置js文件的位置，如缺省，就是当前路径。

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

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

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

DOI:10.16644/https://www.sodocs.net/doc/c47775896.html,33-1094/tp.2017.01.013

EXT JS动态加载机制的研究与实现

李翠平

(广东松山职业技术学院，广东韶关512126)

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

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

中图分类号：TP391.1文献标志码：A文章编号：1006-8228(2017)01-41-03 Research and implementation of dynamic loading mechanism of EXT JS

Li Cuiping

（Guangdong Songshan Polytechnic College,Computer Department,Shaoguan,Guangdong512126,China）Abstract：In order to provide users with a good experience of the web page,the use of scripts in the page is a common practice.

The rich interface functions of Ext JS framework developed with JavaScript can give users a good experience.In order to improve the execution efficiency of pages,Ext JS realizes the dynamic loading mechanism through a lot of methods,including the method of parameter setting,the method of import the Ext part and the micro loading,etc.The methods related to dynamic loading mechanism of Ext JS are discussed in this paper,and by the comparison,the method of parameter setting is simple and efficient.

Key words：Ext JS；dynamic loading；execution efficiency；JavaScript；parameter setting

收稿日期：2016-10-13

作者简介：李翠平（1982-），女，江苏连云港人，本科，讲师，主要研究方向：软件开发。·

·41万方数据