一种按需加载模块化前端代码的方法技术

本发明专利技术涉及代码开发技术领域，公开了一种按需加载模块化前端代码的方法，包括以下步骤：首先通过构建前端库代码模块文件，将前端应用代码直接引用到前端代码库，将前端应用代码组织为代码模块文件；接着从前端应用代码中解耦前端库代码，以同样的代码模块结构组织前端应用代码，与前端库代码模块相比，前端库标识被替换为前端应用名，将对前端库代码的直接引用转换为与依赖前端库代码模块文件；然后独立部署前端库代码模块文件，从前端应用代码中解耦前端库代码后，将包含前端库代码的代码模块文件部署至

【技术实现步骤摘要】
一种按需加载模块化前端代码的方法


[0001]本专利技术具体涉及代码开发
，具体是一种按需加载模块化前端代码的方法
。

技术介绍

[0002]大规模软件系统往往有成千上万前端页面，在开发软件系统的过程中，需要有数十个研发团队协作开发，完成软件系统
。
研发团队在协作研发大型软件系统时，需要独立研发前端页面，并在系统中独立部署以便于测试，并且可以复用共享其他研发团队提供的公共库，公共库可以独立部署更新
。
[0003]目前主流的前端框架均提供打包部署前端交付物的实现方案，其方案均以一个前端项目为粒度进行打包，对于具有成千上万前端工程的大型软件系统，默认以前端项目为粒度的打包方式具有局限性
。
[0004]首先，打包粒度过大，难以复用独立的前端代码库
。
当某个前端代码库更新时，需要重新打包包含这个前端库的大粒度文件，即使其他相关库没有变化
。
这种大粒度更新方式，降低了团队整体开发效率
。
[0005]其实，动态性差，难以按需加载前端代码库
。
现有构建前端应用的方式会将与下载依赖库文件的依赖关系构建到主程序中，以静态对象存储
。
这种方式导致追加下载文件必须更新主程序，动态性差，不利于实现真正的按需加载文件
。
[0006]为实现研发团队独立开发
、
独立部署
、
独立运行前端应用，可以在团队间共享复用独立前端库的目标，软件厂商往往需要自己实现打包部署前端交付物的方案
。

技术实现思路

[0007]本专利技术的目的在于提供一种按需加载模块化前端代码的方法，以解决上述
技术介绍
中提出的问题
。
[0008]为实现上述目的，本专利技术提供如下技术方案：一种按需加载模块化前端代码的方法，包括以下步骤：构建前端库代码模块文件，将前端应用代码直接引用到前端代码库，将前端应用代码组织为代码模块文件；从前端应用代码中解耦前端库代码，以同样的代码模块结构组织前端应用代码，与前端库代码模块相比，前端库标识被替换为前端应用名，将对前端库代码的直接引用转换为与依赖前端库代码模块文件；独立部署前端库代码模块文件，从前端应用代码中解耦前端库代码后，将包含前端库代码的代码模块文件部署至
Web
服务器对应目录，同时更新代码模块部署表；根据代码模块依赖关系按需加载前端库代码模块
。
[0009]作为本专利技术进一步的方案：所述代码模块文件结构包括：前端库标识
、
依赖模块关系表和代码模块，其中，前端库标识是以命名空间形式表示前端代码库的字符串，用斜线分
隔命名空间的每一部分；依赖模块关系表以字符串数组形式，记录代码模块内所引用的前端库标识和版本；代码模块内容用于记录前端库的源代码，代码模块内容是一个可以执行的函数，函数返回值为模块对象，模块对象中保存了前端库对外输出的变量和方法
。
[0010]作为本专利技术再进一步的方案：所述代码模块内容包括获取依赖前端库代码模块对象语句
、
前端库代码片段
、
输出自身模块对象语句
。
[0011]作为本专利技术再进一步的方案：在代码模块内容中，获取依赖前端库模块对象语句的方法，包括以下步骤：步骤一
、
分割依赖前端库标识中记录的命名空间字符串，以每段命名空间为对象属性名，声明并初始化存储前端库代码模块对象的变量
。
[0012]步骤二
、
以依赖前端库标识和版本为实参，调用获取依赖前端库代码模块对象函数，获取其模块对象
。
[0013]步骤三
、
将上一步调用函数的返回值赋值给第一步的变量
。
[0014]作为本专利技术再进一步的方案：步骤二中，调用的获取依赖前端库代码模块对象函数，是接受前端库标识和版本，在全局缓存对象中查找前端库代码模块对象的方法；在全局缓存对象中，以每段前端库命名空间为属性名，最后一层以前端库版本号为属性名，存储已经加载的前端库代码模块对象；此外，在代码模块内容中，前端库代码片段，表现为以逐层访问依赖前端库代码模块对象属性的方式，访问依赖前端库对外输出的变量和方法，存储原始前端库代码内容
。
[0015]作为本专利技术再进一步的方案：在代码模块内容中，输出自身模块对象语句的方法为：首先，声明当前前端库代码模块对外输出的模块对象；然后，将当前前端库对外输出的变量和方法，赋值给模块对象的同名属性；最后，对外输出第一步声明的模块对象
。
[0016]作为本专利技术再进一步的方案：解耦前端库代码包括以下步骤：分析源代码文件中引用前端库的语句，匹配代码模块与引用前端库关系表，生成代码模块文件结构中的依赖模块关系表；将源代码文件中引用前端库的语句，转换获取依赖前端库代码模块对象语句
。
[0017]将源代码文件中直接访问前端库对外输出的变量和方法的语句，转换为通过前端库代码模块对象属性访问
。
[0018]作为本专利技术再进一步的方案：代码模块与引用前端库关系表的结构为：以前端库标识为键，以匹配策略为值的对象，所述匹配策略包括：精确匹配前端库包名：缺省采用精确匹配前端库包名策略；正则表达式匹配引用路径：正则表达式匹配引用路径策略；自定义匹配函数
。
[0019]作为本专利技术再进一步的方案：代码模块部署表的结构为包含前端库标识
、
版本
、
部署路径和代码模块文件哈希值的层级对象；代码模块部署表对象第一级属性名为前端库标识，其下级对象的属性名为前端库版本，其值为存储代码模块文件部署路径和代码模块文件哈希值的对象
。
[0020]作为本专利技术再进一步的方案：根据代码模块依赖关系按需加载前端库代码模块的方法，包括以下步骤：加载入口前端代码模块文件后，读取依赖模块关系表中的前端库标识和版本
。
[0021]访问代码模块部署表对象，依据前端库标识和版本访问代码模块部署路径和代码模块文件哈希值
。
[0022]将代码模块文件哈希值以
URLQueryString
参数形式拼接到代码模块部署路径后，形成下载链接；请求创建的下载链接，下载到前端库代码模块文件后，如果依赖模块关系表为空，则执行以可执行函数形式存在的代码模块内容，获取前端代码模块对象，如果存在依赖模块关系表内容项，则递归执行上述步骤，直至下载并获取到所有前端代码模块对象；执行入口前端代码模块文件中的代码模块内容，运行前端应用
。
[0023]与现有技术相比，本专利技术的有益效果是：本专利技术首先通过构建前端库代码模块文件，将前端应用代码直接引用到前端代码库，将前端应用代码组织为代码模块文件；接着从前端应用代码中解耦前端库代码，以同样的代码模块结构组织前端应用代码，与前端库代码模块相比，前端库标识被替换为前端应本文档来自技高网...

【技术保护点】

【技术特征摘要】
1.
一种按需加载模块化前端代码的方法，其特征在于，包括以下步骤：构建前端库代码模块文件，将前端应用代码直接引用到前端代码库，将前端应用代码组织为代码模块文件；从前端应用代码中解耦前端库代码，以同样的代码模块结构组织前端应用代码，其中，前端库标识被替换为前端应用名，将对前端库代码的直接引用转换为与依赖前端库代码模块文件；独立部署前端库代码模块文件，从前端应用代码中解耦前端库代码后，将包含前端库代码的代码模块文件部署至
Web
服务器对应目录，同时更新代码模块部署表；根据代码模块依赖关系按需加载前端库代码模块
。2.
根据权利要求1所述的按需加载模块化前端代码的方法，其特征在于，所述代码模块文件结构包括：前端库标识
、
依赖模块关系表和代码模块，其中，前端库标识是以命名空间形式表示前端代码库的字符串，用斜线分隔命名空间的每一部分；依赖模块关系表以字符串数组形式，记录代码模块内所引用的前端库标识和版本；代码模块内容用于记录前端库的源代码，代码模块内容是一个可以执行的函数，函数返回值为模块对象，模块对象中保存了前端库对外输出的变量和方法
。3.
根据权利要求2所述的按需加载模块化前端代码的方法，其特征在于，所述代码模块内容包括获取依赖前端库代码模块对象语句
、
前端库代码片段
、
输出自身模块对象语句
。4.
根据权利要求3所述的按需加载模块化前端代码的方法，其特征在于，在代码模块内容中，获取依赖前端库模块对象语句的方法，包括以下步骤：步骤一
、
分割依赖前端库标识中记录的命名空间字符串，以每段命名空间为对象属性名，声明并初始化存储前端库代码模块对象的变量；步骤二
、
以依赖前端库标识和版本为实参，调用获取依赖前端库代码模块对象函数，获取其模块对象；步骤三
、
将上一步调用函数的返回值赋值给第一步的变量
。5.
根据权利要求4所述的按需加载模块化前端代码的方法，其特征在于，步骤二中，调用的获取依赖前端库代码模块对象函数，是接收前端库标识和版本，在全局缓存对象中查找前端库代码模块对象的方法；在全局缓存对象中，以每段前端库命名空间为属性名，最后一层以前端库版本号为属性名，存储已经加载的前端库代码模块对象；在代码模块内容中，前端库代码片段，表现为以逐层访问依赖前端库代码模...

【专利技术属性】
技术研发人员：魏代森，陈圣杰，杜晓东，
申请(专利权)人：浪潮通用软件有限公司，
类型：发明
国别省市：