[发明专利]一种基于JavaScript的模块加载方法及系统

说明书

技术领域

本发明涉及前端开发领域，尤其涉及一种基于JavaScript的模块加载方法及系统。

背景技术

当人们使用互联网浏览网页时，在网页中显示的内容均来源于html页面代码，在当前互联网环境下，网页中需要显示的内容越来越多，用户对体验的要求也越来越高，而html页面的加载速度是用户体验中最重要的一环，为了提高加载速度，以往将所有代码写在一个html文件中的方法已经无法满足需求。

因此，现有前端开发技术趋向于模块化，将需要实现的功能代码封装在不同的文件中，按需动态加载，但是现有的动态加载技术，都是通过在JavaScript中拼接html字符串或通过后端服务返回html字符串实现，这两种方法具有以下缺点：

1)拼接的html字符串无法直接体现网络节点的层次结构，导致代码的可读性差；

2)拼接的html字符串无法表达完整的功能含义，只是以变量的方式存在，导致代码的可维护性低；

3)拼接的html字符串没有抽象成具备独立功能的模块，导致代码的复用度低；

4)在开发过程中，极易因拼接符号缺失而出错。

发明内容

本发明所要解决的技术问题是针对现有动态加载技术具有代码可读性差、可维护性低、复用度低以及开发过程中易出错等问题，提供一种基于JavaScript的模块加载方法及系统。

本发明解决上述技术问题的技术方案如下：

一种基于JavaScript的模块加载方法，包括以下步骤：

步骤1，获取多个html模块和多个所述html模块之间的组合信息，作为配置数据存储在配置文件中；

步骤2，通过JavaScript代码调用加载函数，从所述配置文件中读取所述配置数据；

步骤3，根据所述配置数据，对多个所述html模块进行循环加载，分别得到每个html模块的待加载文件；

步骤4，从所述待加载文件中提取待加载内容和元素区域的位置信息；

步骤5，将所述待加载内容渲染到与所述位置信息对应的元素区域。

本发明的有益效果是：本发明提供的一种基于JavaScript的模块加载方法，通过将编写的代码存储在模块中，并以模块的方式加载html页面，具有代码的可读性好、可维护性高、复用度高等优点，并且在开发过程中，以模块的方式编写html，具有不会因拼接符号缺失而出错的优点，并且模块的加载顺序、组合情况都是在配置文件中配置，即使后续因需求变更需要修改组合的情况，只需要修改此配置文件即可，并且模块代码与主网页代码完全解耦，同一个模块可以在多个组合中复用，具有更高的实用性和适用性。

在上述技术方案的基础上，本发明还可以做如下改进。

进一步地，在步骤1之前还包括：

以模块的形式编写html，得到html模块；

将所述html模块进行组合并存储。

进一步地，所述html模块的形式具体为标准的html标签格式。

进一步地，所述组合信息包括各所述html模块与html模块名称的对应关系，以及各所述html模块之间的包括先后顺序的组合方式。

进一步地，所述html模块名称为所述html模块的唯一标识。

进一步地，步骤3中，根据所述配置数据，对多个所述html模块进行循环加载，通过ajax分别得到每个html模块的待加载文件。

进一步地，所述待加载文件为异步加载文件。

进一步地，还包括：

步骤6，修改所述配置文件中多个html模块的组合信息，并对修改后的所述配置文件执行步骤2至步骤5。

采用上述进一步方案的有益效果是：当因需求变更，需要对模块的组合进行修改时，只需要对配置文件进行修改就可以了，修改方便，具有良好的可扩展性。

本发明解决上述技术问题的另一种技术方案如下：

一种基于JavaScript的模块加载系统，包括：依次连接的获取模块、读取模块、循环模块和加载模块，其中：

所述获取模块用于获取多个html模块和多个所述html模块之间的组合信息，作为配置数据存储在配置文件中；

所述读取模块用于通过JavaScript代码调用加载函数，从所述配置文件中读取所述配置数据；

所述循环模块用于根据所述配置数据，对多个所述html模块进行循环加载，分别得到每个html模块的待加载文件；