[发明专利]一种动态加载Web页面的方法和装置

说明书

技术领域

本发明涉及计算机技术领域，尤其涉及一种动态加载Web页面的方法和装置。

背景技术

随着Web开发领域中Ajax等技术的大量普及，浏览器/服务器（B/S）模式下富客户端开发技术日益成熟，客户端与服务器的交互方式也发生了很大的转变。之所以叫做富客户端，是因为相对于传统的B/S模式，把更多的逻辑处理从服务器端转移到了客户端，使客户端功能更丰富，并且交互能力更强。富客户端一般基于Ajax技术调用服务器端发布的服务，即Ajax服务，这类服务的开发框架有Google Web Toolkit，ProjectZero等等。然而，由于富客户端页面的盛行，不可避免的会产生，诸如：前端JavaScript程序越来越复杂，容量越来越大，引入的JavaScript资源越来越庞大，产生的https请求也越来越多，从而加载一个页面的速度会越来越慢。另外，还存在各种变量函数名重复冲突，各模块间关系混乱复杂、不便于维护和扩展的问题。

例如，在现有技术下，加载如图1所示的Web页面需同时引入全部所需JavaScript文件，包括页面所需的所有功能JavaScript（数据转换、排序等）和显示JavaScript（弹出提示框、菜单面签、报表、复选单选框、列表等）。如图2所示，根据发明人的测试，在测试环境为无线网络，信号比较弱的情况下首次访问，资源请求耗时长达1分20秒。

发明内容

有鉴于此，本发明实施例提供一种动态加载Web页面的方法和装置，来解决以上背景技术部分提到的技术问题。

第一方面，本发明的实施例提供了一种动态加载Web页面的方法，包括如下步骤：

将服务器端包含的JavaScript文件按照功能模块化为多个JavaScript模块文件；

将所述多个JavaScript模块文件中包含的函数分别定义在浏览器端创建的接口模块中；

基于用户需求选择性地调用所述接口模块中所定义的函数；

判断所调用的函数对应的JavaScript模块文件是否已经加载在当前页面上，如果没有加载，则将所述JavaScript模块文件动态加载，执行所述调用的函数并返回调用结果到Web页面；如果已经加载，则直接执行所述调用的函数并返回调用结果到Web页面。

优选地，所述多个JavaScript模块文件通过所述接口模块进行交互。

优选地，所述函数包括公共的功能函数和用户接口函数。

优选地，将所述Javascript文件动态加载的步骤是利用script标签结点动态加载的。

优选地，所述浏览器为IE、Firefox、Chrome和Opera之一。

第二方面，本发明的第二实施例提供了一种动态加载Web页面的装置，包括：

功能实现模块，包括多个JavaScript模块文件，其中所述多个JavaScript模块文件是由服务器端包含的JavaScript文件按照功能模块化得到的；

接口模块，在浏览器端创建，用于将所述JavaScript模块文件中包含的函数分别定义在其中；

调用模块，用于基于用户需求选择性地调用所述接口模块中所定义的函数，

其中接口模块判断所述JavaScript模块文件是否已经加载在当前页面上，如果没有加载，则将所述JavaScript模块文件动态加载，并且调用模块执行所述调用的函数并返回调用结果到Web页面；如果接口模块判断所述JavaScript模块文件已经加载在当前页面上，则调用模块直接执行所述调用的函数并返回调用结果到Web页面。

优选地，所述多个JavaScript模块文件通过所述接口模块进行交互。

优选地，所述函数包括公共的功能函数和用户接口函数。

优选地，所述接口模块被配置为利用script标签结点动态加载所述JavaScript文件。

优选地，所述浏览器为IE、Firefox、Chrome和Opera之一。

本发明通过将JavaScript文件模块化并且在调用者需要的时候通过接口模块选择性加载，从而解决了大批量JavaScript文件同时引入页面的网络并发和速度缓慢的问题，又实现了按需加载，提高了服务性能并且节省了带宽。

另外，所有JavaScript模块文件都不直接进行交互，而是通过本发明的接口模块进行依赖关系的处理，大大降低了JavaScript模块文件之间的耦合关系和复杂程度。

附图说明