JavaScript模块化HTML文件前端加载方法与流程

本发明涉及互联网技术领域，特别涉及技术领域，具体是指一种javascript模块化html文件前端加载方法。

背景技术：

javascript一种直译式脚本语言，是一种动态类型、弱类型、基于原型的语言，内置支持类型。它的解释器被称为javascript引擎，为浏览器的一部分，广泛用于客户端的脚本语言，最早是在html(标准通用标记语言下的一个应用)网页上使用，用来给html网页增加动态功能。html允许javascript可以通过dom更改html元素。

随着前端javascript代码复杂度的提高，代码关系的维护成为了工作中的挑战之一，在之前很长的一段时间里，前端只能通过一系列的<script>标签来维护代码关系，但当项目的复杂度不断提高时，这种简单的代码组织方式很容易使得代码变得混乱不堪。目前，在开发大型javascript应用程序的场景中，业界常用的管理工具包括es6modules、seajs、requirejs、browserify等，然而，发明人发现现有技术存在如下问题：现有常用的管理工具均是基于文件维度的模块管理，而当一个html文件加载所需的模块增多时，模块管理文件也相应增加，从而使得目前html文件的模块管理方式变得非常复杂，代码调试难度大，开发效率很低。

技术实现要素：

本发明的目的是克服了上述现有技术中的缺点，提供一种可以将多个代码模块合并到一个文件中，方便管理模块及模块依赖，提高开发效率，降低代码调试难度的javascript模块化html文件前端加载方法。

为了实现上述的目的，本发明的javascript模块化html文件前端加载方法包括：

读取一个html文件，加载该html文件中的各个模块；

确定所述的各个模块的前置依赖关系；

根据所述的前置依赖关系，依序初始化所述的各个模块。

该javascript模块化html文件前端加载方法中，所述的加载该文件中的各个模块，具体为：

加载该文件中全部的模块，并将各所述模块的状态设定为等待初始化状态。

该javascript模块化html文件前端加载方法中，所述的确定所述的各个模块的前置依赖关系，具体为：

确定对于各所述模块进行初始化是否有前置依赖，若没有，则标记为无依赖，若有，则标记所依赖的前置模块。

该javascript模块化html文件前端加载方法中，所述的根据所述的前置依赖关系，依序初始化所述的各个模块，具体为：

初始化无依赖的模块；

初始化所依赖的前置模块已完成初始化的模块；

完成全部模块的初始化。

该javascript模块化html文件前端加载方法中，所述的确定所述的各个模块的前置依赖关系，具体还包括：

对于有前置依赖的模块，查找其全部的各级前置依赖；

基于各模块的全部各级前置依赖，去除冗余依赖，形成最小化依赖关系。

该javascript模块化html文件前端加载方法中，所述对于有前置依赖的模块，查找其全部的各级前置依赖，具体为：

对于有前置依赖的模块，建立与本模块对应的临时数组和结果数组；

将本模块的直接前置依赖模块写入所述的临时数组和结果数组；

遍历所述的临时数组中的前置模块，若该前置模块的直接前置依赖模块不存在于所述的本模块的临时数组和结果数组中，则将该前置模块的直接前置依赖模块作为间接前置依赖模块写入所述的临时数组和结果数组；

将所述的结果数组中的全部模块作为本模块的全部各级前置依赖。

该javascript模块化html文件前端加载方法中，所述基于各模块的全部各级前置依赖，去除冗余依赖，形成最小化依赖关系，具体为：

对于存在于本模块的结果数组中的前置模块，读取与该前置模块对应的结果数组，判断该前置模块结果数组中是否有与本模块结果数组中重复的模块，将重复的模块从所述的本模块结果数组中的删除。

该javascript模块化html文件前端加载方法中，所述查找其全部的各级前置依赖之后还包括：

基于各模块的全部各级前置依赖，判断所述的有前置依赖的模块的全部各级前置依赖是否有该模块自身，若有，则确定为循环依赖。

本发明还提供一种计算机可读存储介质，其上存储有计算机程序，该计算机程序被处理器执行时，实现上述的javascript模块化html文件前端加载方法。

本发明还提供一种javascript模块化html文件前端加载装置，其包括处理器和存储器，所述的存储器上存储有计算机程序，该计算机程序被所述的处理器执行时，实现上述的javascript模块化html文件前端加载方法。

采用了该发明的javascript模块化html文件前端加载方法，其在读取一个html文件时，可加载该html文件中的多个模块；确定各个模块的前置依赖关系；并根据前置依赖关系依序初始化各个模块，进而可以进行模块依赖最小化及循环依赖检测，从而实现将多个代码模块合并到一个文件中，方便管理模块及模块依赖，提高开发效率，降低代码调试难度的javascript模块化html文件前端加载方法。

附图说明

图1为本发明的javascript模块化html文件前端加载方法的步骤流程图；

图2为本发明的实施例中所加载的文件包括的五个模块的前置依赖示意图；

图3为利用本发明的方法完成模块依赖处理后，文件中各模块的依赖关系示意图；

图4为利用本发明的方法完成模块依赖最小化处理后，文件中各模块的依赖关系示意图；

图5为利用本发明的方法进行依赖循环检测的示意图。

具体实施方式

为了能够更清楚地理解本发明的技术内容，特举以下实施例详细说明。

请参阅图1所示，为本发明的javascript模块化html文件前端加载方法的步骤流程图。

html(hypertextmarkuplanguage，超文本标记语言)是标准通用标记语言下的一个应用，既是一种规范，也是一种标准，它通过在文本文件中添加各种标记符，来告诉浏览器如何显示其中的内容(如：文字如何处理，画面如何安排，图片如何显示等)。浏览器会按顺序阅读html文件，然后根据标记符解释和显示其标记的内容。html通过结合使用其他的web技术(如：脚本语言、公共网关接口、组件等)，开发者可以创造出功能强大的网页。因而，html超级文本标记语言也是万维网(web)的基础。

在一种实施方式中，该javascript模块化html文件前端加载方法包括以下步骤：

读取一个html文件，加载该html文件中的各个模块；

确定所述的各个模块的前置依赖关系；

根据所述的前置依赖关系，依序初始化所述的各个模块。

所述的加载该文件中的各个模块，具体为：

加载该文件中全部的模块，并将各所述模块的状态设定为等待初始化状态。

相应的，所述的确定所述的各个模块的前置依赖关系，具体为：

确定对于各所述模块进行初始化是否有前置依赖，若没有，则标记为无依赖，若有，则标记所依赖的前置模块。

且所述的根据所述的前置依赖关系，依序初始化所述的各个模块，具体为：

初始化无依赖的模块；

初始化所依赖的前置模块已完成初始化的模块；

完成全部模块的初始化。

模块的初始化是指依据所读取的html文件构建相应的模块，全部模块初始化完成后，则完成html文件前端加载。

通过该实施方式所述的javascript模块化html文件前端加载方法，可以建立基于各个代码模块之间的前置依赖关系的初始化顺序，利用这一顺序进行初始化可以保证在当一个模块的初始化开始时，作为其前置条件的其它模块都已经完成了初始化，从而保证全部代码模块初始化均可顺利实现，进而为将所需代码模块合并到一个文件中提供了条件。

在进一步优选的实施方式中，所述的确定所述的各个模块的前置依赖关系，具体还包括：

对于有前置依赖的模块，查找其全部的各级前置依赖；

基于各模块的全部各级前置依赖，去除冗余依赖，形成最小化依赖关系。

通过最小化依赖关系，可以将模块的初始化过程最简化，缩短html文件加载所需时间。

在更进一步优选的实施方式中，所述对于有前置依赖的模块，查找其全部的各级前置依赖，具体为：

对于有前置依赖的模块，建立与本模块对应的临时数组和结果数组；

将本模块的直接前置依赖模块写入所述的临时数组和结果数组；

遍历所述的临时数组中的前置模块，若该前置模块的直接前置依赖模块不存在于所述的本模块的临时数组和结果数组中，则将该前置模块的直接前置依赖模块作为间接前置依赖模块写入所述的临时数组和结果数组；

将所述的结果数组中的全部模块作为本模块的全部各级前置依赖。

所述基于各模块的全部各级前置依赖，去除冗余依赖，形成最小化依赖关系，具体为：

对于存在于本模块的结果数组中的前置模块，读取与该前置模块对应的结果数组，判断该前置模块结果数组中是否有与本模块结果数组中重复的模块，将重复的模块从所述的本模块结果数组中的删除。

通过该实施方式提供了一种将模块前置依赖关系最小化的实现流程，确保模块间的依赖关系和最小化的结果的准确。

在更优选的实施方式中，所述查找其全部的各级前置依赖之后，还包括：基于各模块的全部各级前置依赖，判断所述的有前置依赖的模块的全部各级前置依赖是否有该模块自身，若有，则确定为循环依赖。循环依赖会导致初始化无法完成，因此需要对其进行查找，并避免存在循环依赖。

本发明还提供一种javascript模块化html文件前端加载装置和一种计算机可读存储介质。所述的装置其包括处理器和存储器，该存储器即为所述的可读存储介质，其上存储有计算机程序。该计算机程序被所述的处理器执行时，实现上述实施方式所述的javascript模块化html文件前端加载方法。

以下通过数个实施例说明本发明的javascript模块化html文件前端加载方法在实际应用中的实现方式。

实施例1

以加载一个包括5个模块的javascript模块化html文件为例，包括模块a、b、c、d和e。各模块的前置依赖如图2所示，具体为：

模块a前置依赖bcd；

模块b前置依赖cd；

模块c无前置依赖；

模块d前置依赖e；

模块e无前置依赖。

首先，在进行文件加载时，需要进行模块依赖处理，过程可以包括以下步骤：

步骤一加载模块a，加载完成后，状态默认为等待初始化；

步骤二判断模块a的前置依赖，由于前置依赖bcd，且bcd尚未加载及初始化，模块a状态继续保持为等待初始化；

步骤三加载模块b，加载完成后，状态默认为等待初始化；

步骤四判断模块b的前置依赖，由于前置依赖cd，且cd尚未加载及初始化，模块b状态继续保持为等待初始化；

步骤五加载模块c，加载完成后，状态默认为等待初始化；

步骤六由于模块c无前置依赖，开始执行模块初始化操作，执行完成后，c状态变更为已完成初始化；

步骤七遍历其他未完成初始化操作的模块；

步骤八将模块a标记为前置模块c已加载，并检查是否全部前置依赖模块均已全部完成初始化，由于剩余模块b和d尚未完成初始化，因此不能执行模块初始化操作；

步骤九将模块b标记为前置模块c已加载，并检查是否全部前置依赖模块均已全部完成初始化，由于剩余模块d尚未完成初始化，因此不能执行模块初始化操作；

步骤十加载模块d，加载完成后，状态默认为等待初始化；

步骤十一判断模块d的前置依赖，由于前置依赖e，且e尚未加载及初始化，模块d状态继续保持为等待初始化；

步骤十二加载模块e，加载完成后，状态默认为等待初始化；

步骤十三由于模块e无前置依赖，开始执行模块初始化操作；执行完成后，将e状态变更为已完成初始化；

步骤十四遍历其他未完成初始化操作的模块；

步骤十五由于模块a不依赖模块e，跳过；

步骤十六由于模块b不依赖模块e，跳过；

步骤十七将模块d标记为前置模块e已加载，由于全部前置依赖模块均已全部完成初始化，因此开始执行模块初始化操作；执行完成后，将d状态变更为已完成初始化；

步骤十八遍历其他未完成初始化操作的模块；

步骤十九将模块a标记为前置模块d已加载，并检查是否全部前置依赖模块均已全部完成初始化，由于剩余模块b尚未完成初始化，因此不能执行模块初始化操作；

步骤二十将模块b标记为前置模块d已加载，由于全部前置依赖模块均已全部完成初始化，因此开始执行模块初始化操作；执行完成后，将b状态变更为已完成初始化；

步骤二十一遍历其他未完成初始化操作的模块；

步骤二十二将模块a标记为前置模块b已加载，由于全部前置依赖模块均已全部完成初始化，因此开始执行模块初始化操作；执行完成后，将a状态变更为已完成初始化；

步骤二十三所有模块均已完成初始化，结束处理。

模块依赖处理完成后，该html文件中各模块的依赖关系如图3所示。

上述步骤可以大体概括为：

1、加载该文件中全部的模块，并将各所述模块的状态设定为等待初始化状态；

2、确定对于各所述模块进行初始化是否有前置依赖，若没有，则标记为无依赖，若有，则标记所依赖的前置模块；

3、首先初始化无依赖的模块；

4、而后初始化有依赖的模块，此时，优先将前置模块已完成初始化的模块初始化，而后根据随着新的模块完成初始化，又可以作为其它有依赖的模块的前置模块，进行剩余模块的初始化；

5、完成全部模块的初始化。

上述的例子中，为了步骤描述的简化仅描述了文件包括5个模块。以一个有50个以上模块的web页面为例，在html文件加载完成的情况下，加载每一个模块要用100ms，在串行加载的情况下，有可能需要5s以上才能加载完所有模块。利用本发明的方法，把所有模块放在一个文件中，就相当于一次性并发加载50多个模块，时间大约只需要200ms左右。速度可以大大加快，减少用户等待时间，提升用户体验。另一方面，开发人员在调试时，通常在不同文件间切换需要2s，同文件切换不同代码行之间切换需要0.3s，那么一个涉及到20个文件的调试流程，仅切换文件的时间就需要消耗40s，采用本技术将所有模块放在一个文件中，则完成全部切换操作只需要6s，大大节约调试时间，减少开发人员调试成本。

实施例2

与实施例1的区别在于，方法还可以包括模块依赖最小化过程。

同样以图2所示的包括5个模块的javascript模块化html文件为例。

模块依赖最小化过程主要包含两个主要的子过程：查找全部依赖和冗余依赖关系检测。

查找一个模块a的全部前置依赖项可以包括以下步骤：

步骤a1创建一个临时数组存放临时数据和一个结果数组用于存放模块a的全部前置依赖项；

步骤a2获取模块a的前置依赖bcd，并分别存入步骤一创建的临时数组和结果数组中；

步骤a3从临时数组中取出模块b，获取模块b的前置依赖cd，由于cd在临时数组中均已存在故忽略；

步骤a4从临时数组中取出模块c，由于模块c无前置依赖，因此无需处理，继续后面步骤；

步骤a5从临时数组中取出模块d，获取模块d的前置依赖e，分别存入临时数组和结果数组中；

步骤a6此时临时数组值为e，结果数组为bcde；

步骤a7从临时数组中取出模块e，由于模块e无前置依赖，因此无需处理，继续后面步骤；

步骤a8确认临时数组中所有模块均已处理完毕，并返回结果数组。

重复上述步骤可以完成查找模块b、c、d和e的全部前置依赖项。

冗余依赖关系检测可以包括以下步骤：

步骤b1首先处理模块a，获取模块a的前置依赖bcd；

步骤b2获取模块b的全部前置依赖项；

步骤b3判断下来由于模块c存在于模块b的全部前置依赖项中，因此将模块c从模块a的前置依赖中移除；

步骤b4判断下来由于模块d也存在于模块b的全部前置依赖项中，因此将模块d从模块a的前置依赖中移除；

步骤b5至此模块a处理完毕，继续处理其他模块；

步骤b6接着处理模块b，获取模块b的前置依赖cd；

步骤b7获取模块c的全部前置依赖，由于模块c无前置依赖，因此无需处理，继续后面步骤；

步骤b8获取模块d的全部前置依赖；

步骤b9判断下来由于模块c未出现在模块d的全部前置依赖项中，因此无需处理，继续后面步骤；

步骤b10至此模块b处理完毕，继续处理其他模块；

步骤b11接着处理模块c，由于模块c无前置依赖项，因此无需处理，继续后面步骤；

步骤b12接着处理模块d，由于模块d只有一个前置依赖项，因此也无需处理，继续后面步骤；

步骤b13至此所有模块均已处理完毕。

简而言之，模块依赖最小化过程包括：

对于有前置依赖的模块，要查找其全部的各级前置依赖；

基于各模块的全部各级前置依赖，去除冗余依赖，从而形成最小化依赖关系。

其中，对于有前置依赖的模块，查找其全部的各级前置依赖，具体为：

对于有前置依赖的模块，建立与本模块对应的临时数组和结果数组；

将本模块的直接前置依赖模块写入所述的临时数组和结果数组；

遍历所述的临时数组中的前置模块，若该前置模块的直接前置依赖模块不存在于所述的本模块的临时数组和结果数组中，则将该模块写入所述的临时数组和结果数组；

将所述的结果数组中的全部模块作为本模块的全部各级前置依赖。

而基于各模块的全部各级前置依赖，去除冗余依赖，形成最小化依赖关系，具体为：

对于存在于本模块的结果数组中的前置模块，读取与该前置模块对应的结果数组，判断该前置模块结果数组中是否有与本模块结果数组中重复的模块，将重复的模块从所述的本模块结果数组中的删除。

通过该实施例可以基于各模块间的依赖关系，将各模块基于其前置依赖的数量和现有，整理成如图4所示的分级处理模式，使模块依赖最小化，从而进一步简化html文件的加载过程，节省加载所需时间。

实施例3

本发明的方法还可以实现模块循环依赖检测。以加载一个包括5个模块的javascript模块化html文件为例，包括模块a、b、c、d和e。各模块的前置依赖关系为：

模块a前置依赖bc；

模块b前置依赖cd；

模块c无前置依赖；

模块d前置依赖e；

模块e前置依赖b。

与实施例1、2中的html文件的区别在于：模块a不依赖模块d，而模块e前置依赖b。

所谓循环依赖，就是模块通过依赖关系的一层层传递，最终变成了依赖自身这样一个闭环。循环依赖会导致一个模块永远无法初始化。在该例中，如图5所示，模块b前置依赖d；模块d前置依赖e；而模块e前置依赖b。即形成了一个依赖循环，这会造成模块b永远无法初始化。

以某一个模块为例，检测循环依赖的具体思路是：先找到这个模块的前置依赖模块，再向下查找前置依赖模块的前置依赖模块，像这样一直找下去，直到找到最底层模块(无前置依赖的独立模块)为止。在此过程中如果模块出现在了自己的前置依赖中，则表示模块存在循环依赖；反之则表示不存在循环依赖。

具体检测循环依赖的步骤如下：

步骤c1首先检测模块a，获取模块a的前置依赖bc；

步骤c2获取模块b的全部前置依赖项cd；

步骤c3由于模块c无前置依赖，因此无需处理，继续后面步骤；

步骤c4获取模块d的全部前置依赖项e；

步骤c5获取模块e的全部前置依赖项b；

步骤c6至此模块a处理完毕，解析下来模块a的主要依赖模块bcde，这些模块中并未出现模块a自身，因此模块a不存在循环依赖；

步骤c7接着处理模块b，获取模块b的前置依赖cd；

步骤c8由于模块c无前置依赖，因此无需处理，继续后面步骤；

步骤c9获取模块d的全部前置依赖e；

步骤c10获取模块e的全部前置依赖项b；

步骤c11至此模块b处理完毕，解析下来模块b的主要依赖模块cdeb，这些模块包含了模块b自身，因此模块b存在循环依赖；

步骤c12接着处理模块c，由于模块c无前置依赖项，因此无需处理，继续后面步骤；

步骤c13接着处理模块d，获取模块d的前置依赖e；

步骤c14获取模块e的全部前置依赖项b；

步骤c15获取模块b的全部前置依赖项cd；

步骤c16至此模块d处理完毕，解析下来模块d的主要依赖模块ebcd，这些模块包含了模块d自身，因此模块d存在循环依赖；

步骤c17接着处理模块e，获取模块e的前置依赖b；

步骤c18获取模块b的全部前置依赖项cd；

步骤c19由于模块c无前置依赖，因此无需处理，继续后面步骤；

步骤c20获取模块d的全部前置依赖项e；

步骤c21至此模块e处理完毕，解析下来模块e的主要依赖模块bcde，这些模块包含了模块e自身，因此模块e存在循环依赖；

步骤c22所有模块检测完成，其中模块bde存在循环依赖。

简而言之，可以基于各模块的全部各级前置依赖，判断所述的有前置依赖的模块的全部各级前置依赖是否有该模块自身，若有，则确定为循环依赖。

通过上述各实施例，本发明提供了一套模块化管理解决方案，主要包括模块依赖处理过程、模块依赖最小化过程、模块循环依赖检测。

实施例4

以功能页面需要加载aa、bb、cc三个模块为例，比较现有技术和本发明方法对应的文件的区别。

在现有技术中，aa、bb、cc三个模块需要分别加载aa.js、bb.js、cc.js三个模块文件，且三个模块不能直接简单合并成一个文件。应用本案技术后，可以将上述三个模块合并成一个all.js文件，然后只需要加载一次就能把aa、bb、cc三个乃至更多模块加载完成。

现有技术代码如下：

index.html文件如下：

aa.js文件如下：

importbbfrom'./bb.js'

console.log('thisisaa.')

console.log(bb.kk)

bb.js文件如下：

cc.js文件如下：

console.log('thisiscc.')

对应本发明的方法进行改造后代码如下：

all.js文件如下：

由此可见，利用本发明形成一个包含多个模块的html文件，其代码更简单，编写和调试难度大为降低，有效提高了开发效率。

采用了该发明的javascript模块化html文件前端加载方法，其在读取一个html文件时，可加载该html文件中的多个模块；确定各个模块的前置依赖关系；并根据前置依赖关系依序初始化各个模块，进而可以进行模块依赖最小化及循环依赖检测，从而实现将多个代码模块合并到一个文件中，方便管理模块及模块依赖，提高开发效率，降低代码调试难度的javascript模块化html文件前端加载方法。

在此说明书中，本发明已参照其特定的实施例作了描述。但是，很显然仍可以作出各种修改和变换而不背离本发明的精神和范围。因此，说明书和附图应被认为是说明性的而非限制性的。