CN117111998A - 一种按需加载模块化前端代码的方法 - Google Patents

Abstract

本发明涉及代码开发技术领域，公开了一种按需加载模块化前端代码的方法，包括以下步骤：首先通过构建前端库代码模块文件，将前端应用代码直接引用到前端代码库，将前端应用代码组织为代码模块文件；接着从前端应用代码中解耦前端库代码，以同样的代码模块结构组织前端应用代码，与前端库代码模块相比，前端库标识被替换为前端应用名，将对前端库代码的直接引用转换为与依赖前端库代码模块文件；然后独立部署前端库代码模块文件，从前端应用代码中解耦前端库代码后，将包含前端库代码的代码模块文件部署至Web服务器对应目录，同时更新代码模块部署表；最后根据代码模块依赖关系按需加载前端库代码模块，从而提高前端代码打包效率。

Description

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

技术领域

本发明具体涉及代码开发技术领域，具体是一种按需加载模块化前端代码的方法。

背景技术

大规模软件系统往往有成千上万前端页面，在开发软件系统的过程中，需要有数十个研发团队协作开发，完成软件系统。研发团队在协作研发大型软件系统时，需要独立研发前端页面，并在系统中独立部署以便于测试，并且可以复用共享其他研发团队提供的公共库，公共库可以独立部署更新。

目前主流的前端框架均提供打包部署前端交付物的实现方案，其方案均以一个前端项目为粒度进行打包，对于具有成千上万前端工程的大型软件系统，默认以前端项目为粒度的打包方式具有局限性。

首先，打包粒度过大，难以复用独立的前端代码库。当某个前端代码库更新时，需要重新打包包含这个前端库的大粒度文件，即使其他相关库没有变化。这种大粒度更新方式，降低了团队整体开发效率。

其实，动态性差，难以按需加载前端代码库。现有构建前端应用的方式会将与下载依赖库文件的依赖关系构建到主程序中，以静态对象存储。这种方式导致追加下载文件必须更新主程序，动态性差，不利于实现真正的按需加载文件。

为实现研发团队独立开发、独立部署、独立运行前端应用，可以在团队间共享复用独立前端库的目标，软件厂商往往需要自己实现打包部署前端交付物的方案。

发明内容

本发明的目的在于提供一种按需加载模块化前端代码的方法，以解决上述背景技术中提出的问题。

为实现上述目的，本发明提供如下技术方案：

一种按需加载模块化前端代码的方法，包括以下步骤：

构建前端库代码模块文件，将前端应用代码直接引用到前端代码库，将前端应用代码组织为代码模块文件；

从前端应用代码中解耦前端库代码，以同样的代码模块结构组织前端应用代码，与前端库代码模块相比，前端库标识被替换为前端应用名，将对前端库代码的直接引用转换为与依赖前端库代码模块文件；

独立部署前端库代码模块文件，从前端应用代码中解耦前端库代码后，将包含前端库代码的代码模块文件部署至Web服务器对应目录，同时更新代码模块部署表；

根据代码模块依赖关系按需加载前端库代码模块。

作为本发明进一步的方案：所述代码模块文件结构包括：前端库标识、依赖模块关系表和代码模块，其中，前端库标识是以命名空间形式表示前端代码库的字符串，用斜线分隔命名空间的每一部分；依赖模块关系表以字符串数组形式，记录代码模块内所引用的前端库标识和版本；代码模块内容用于记录前端库的源代码，代码模块内容是一个可以执行的函数，函数返回值为模块对象，模块对象中保存了前端库对外输出的变量和方法。

作为本发明再进一步的方案：所述代码模块内容包括获取依赖前端库代码模块对象语句、前端库代码片段、输出自身模块对象语句。

作为本发明再进一步的方案：在代码模块内容中，获取依赖前端库模块对象语句的方法，包括以下步骤：

步骤一、分割依赖前端库标识中记录的命名空间字符串，以每段命名空间为对象属性名，声明并初始化存储前端库代码模块对象的变量。

步骤二、以依赖前端库标识和版本为实参，调用获取依赖前端库代码模块对象函数，获取其模块对象。

步骤三、将上一步调用函数的返回值赋值给第一步的变量。

作为本发明再进一步的方案：步骤二中，调用的获取依赖前端库代码模块对象函数，是接受前端库标识和版本，在全局缓存对象中查找前端库代码模块对象的方法；在全局缓存对象中，以每段前端库命名空间为属性名，最后一层以前端库版本号为属性名，存储已经加载的前端库代码模块对象；此外，在代码模块内容中，前端库代码片段，表现为以逐层访问依赖前端库代码模块对象属性的方式，访问依赖前端库对外输出的变量和方法，存储原始前端库代码内容。

作为本发明再进一步的方案：在代码模块内容中，输出自身模块对象语句的方法为：首先，声明当前前端库代码模块对外输出的模块对象；然后，将当前前端库对外输出的变量和方法，赋值给模块对象的同名属性；最后，对外输出第一步声明的模块对象。

作为本发明再进一步的方案：解耦前端库代码包括以下步骤：

分析源代码文件中引用前端库的语句，匹配代码模块与引用前端库关系表，生成代码模块文件结构中的依赖模块关系表；

将源代码文件中引用前端库的语句，转换获取依赖前端库代码模块对象语句。

将源代码文件中直接访问前端库对外输出的变量和方法的语句，转换为通过前端库代码模块对象属性访问。

作为本发明再进一步的方案：代码模块与引用前端库关系表的结构为：以前端库标识为键，以匹配策略为值的对象，所述匹配策略包括：

精确匹配前端库包名：缺省采用精确匹配前端库包名策略；

正则表达式匹配引用路径：正则表达式匹配引用路径策略；

自定义匹配函数。

作为本发明再进一步的方案：代码模块部署表的结构为包含前端库标识、版本、部署路径和代码模块文件哈希值的层级对象；代码模块部署表对象第一级属性名为前端库标识，其下级对象的属性名为前端库版本，其值为存储代码模块文件部署路径和代码模块文件哈希值的对象。

作为本发明再进一步的方案：根据代码模块依赖关系按需加载前端库代码模块的方法，包括以下步骤：

加载入口前端代码模块文件后，读取依赖模块关系表中的前端库标识和版本。

访问代码模块部署表对象，依据前端库标识和版本访问代码模块部署路径和代码模块文件哈希值。

将代码模块文件哈希值以 URL Query String 参数形式拼接到代码模块部署路径后，形成下载链接；

请求创建的下载链接，下载到前端库代码模块文件后，如果依赖模块关系表为空，则执行以可执行函数形式存在的代码模块内容，获取前端代码模块对象，如果存在依赖模块关系表内容项，则递归执行上述步骤，直至下载并获取到所有前端代码模块对象；

执行入口前端代码模块文件中的代码模块内容，运行前端应用。

与现有技术相比，本发明的有益效果是：本发明首先通过构建前端库代码模块文件，将前端应用代码直接引用到前端代码库，将前端应用代码组织为代码模块文件；接着从前端应用代码中解耦前端库代码，以同样的代码模块结构组织前端应用代码，与前端库代码模块相比，前端库标识被替换为前端应用名，将对前端库代码的直接引用转换为与依赖前端库代码模块文件；然后独立部署前端库代码模块文件，从前端应用代码中解耦前端库代码后，将包含前端库代码的代码模块文件部署至Web服务器对应目录，同时更新代码模块部署表；最后根据代码模块依赖关系按需加载前端库代码模块，以支持研发团队独立打包前端代码，分离公共库，独立部署和调试，提高前端代码打包效率。

附图说明

图1为按需加载模块化前端代码的方法的流程图；

图2为按需加载模块化前端代码的方法中构建前端代码模块文件的流程图；

图3为按需加载模块化前端代码的方法中解耦前端库代码的流程图；

图4为按需加载模块化前端代码的方法中按需加载前端库代码的流程图。

具体实施方式

下面将结合本发明实施例中的附图，对本发明实施例中的技术方案进行清楚、完整地描述，显然，所描述的实施例仅仅是本发明一部分实施例，而不是全部的实施例。基于本发明中的实施例，本领域普通技术人员在没有做出创造性劳动前提下所获得的所有其他实施例，都属于本发明保护的范围。

请参阅图1-图4，本发明实施例中，一种按需加载模块化前端代码的方法，包括以下步骤：

S10、构建前端库代码模块文件，将前端应用代码直接引用到前端代码库，将前端应用代码组织为代码模块文件，其中，一个代码库为一个文件，以便于独立部署和按需加载前端库代码；

所述代码模块文件结构包括：前端库标识、依赖模块关系表和代码模块内容三部分，其中，前端库标识，是以命名空间形式表示前端代码库的字符串，用斜线分隔命名空间的每一部分；依赖模块关系表，以字符串数组形式，记录代码模块内所引用的前端库标识和版本，字符串数组的每一项是用冒号连接的前端库标识和版本的字符串；代码模块内容，记录前端库的源代码，代码模块内容是一个可以执行的函数，函数返回值为模块对象，模块对象中保存了前端库对外输出的变量和方法。

此外，代码模块内容中，定义了固定的代码模式，存储前端库代码，代码模块内容以模块对象的形式引用其他可按需下载的前端库对外输出的变量和方法，同时以模块对象的形式对外输出自身的变量和方法，模块对象是一个以同名属性记录前端库对外输出变量和方法的对象；

进一步的，在本申请实施例中，所述代码模块内容包括三方面内容：获取依赖前端库代码模块对象语句、前端库代码片段、输出自身模块对象语句。

再进一步的，在本申请实施例中，在代码模块内容中，获取依赖前端库模块对象语句的方法，包括以下步骤：

步骤一、分割依赖前端库标识中记录的命名空间字符串，以每段命名空间为对象属性名，声明并初始化存储前端库代码模块对象的变量。

步骤二、以依赖前端库标识和版本为实参，调用获取依赖前端库代码模块对象函数，获取其模块对象。

步骤三、将上一步调用函数的返回值赋值给第一步的变量。

其中，在步骤二中，调用的获取依赖前端库代码模块对象函数，是接收前端库标识和版本，在全局缓存对象中查找前端库代码模块对象的方法；在全局缓存对象中，以每段前端库命名空间为属性名，最后一层以前端库版本号为属性名，存储已经加载的前端库代码模块对象；此外，在代码模块内容中，前端库代码片段，表现为以逐层访问依赖前端库代码模块对象属性的方式，访问依赖前端库对外输出的变量和方法，存储原始前端库代码内容。

再进一步的，在代码模块内容中，输出自身模块对象语句的方法为：首先，声明当前前端库代码模块对外输出的模块对象；然后，将当前前端库对外输出的变量和方法，赋值给模块对象的同名属性；最后，对外输出第一步声明的模块对象。

S20、从前端应用代码中解耦前端库代码，以同样的代码模块结构组织前端应用代码，与前端库代码模块相比，前端库标识被替换为前端应用名，将对前端库代码的直接引用转换为与依赖前端库代码模块文件。

在本申请实施例步骤S20中，解耦前端库代码包括以下步骤：

S21、分析源代码文件中引用前端库的语句，匹配代码模块与引用前端库关系表，生成代码模块文件结构中的依赖模块关系表；

需要说明的是，代码模块与引用前端库关系表的结构为：以前端库标识为键，以匹配策略为值的对象，有三种类型的匹配策略，分别为：

精确匹配前端库包名：缺省采用精确匹配前端库包名策略，为简化关系表结构，采用缺省配置时，可以为匹配策略赋值空数组；

正则表达式匹配引用路径：正则表达式匹配引用路径策略，是一个匹配前端库包含关键字的正则表达式，可以用来匹配使用绝对路径或者相对路径引用前端库的情况。

自定义匹配函数：自定义匹配函数，是一个匿名函数，其形参为源代码中引用前端库的代码文本，返回值为前端库包名，可用于复杂匹配规则场景。

其中，匹配策略是一个数组，可以同时指定多个匹配策略，顺序执行每个匹配策略，匹配到其中一条则结束匹配过程；在代码模块与引用前端库关系表中匹配到前端库标识后，再读取前端库包版本，以冒号作为分隔符链接前端库标识和版本号，形成依赖模块关系表中的项。

S22、将源代码文件中引用前端库的语句，转换获取依赖前端库代码模块对象语句。

S23、将源代码文件中直接访问前端库对外输出的变量和方法的语句，转换为通过前端库代码模块对象属性访问。

S30、独立部署前端库代码模块文件，从前端应用代码中解耦前端库代码后，将包含前端库代码的代码模块文件部署至Web服务器对应目录，同时更新代码模块部署表。

在本申请实施例步骤S30中，需要说明的是，代码模块部署表的结构为包含前端库标识、版本、部署路径和代码模块文件哈希值的层级对象；代码模块部署表对象第一级属性名为前端库标识，其下级对象的属性名为前端库版本，其值为存储代码模块文件部署路径和代码模块文件哈希值的对象。

此外，将代码模块文件部署至Web服务器对应目录后，系统部署程序遍历代码模块部署表对象，读取到代码模块文件部署路径后，读取其文件内容，计算哈希值后，回写代码模块部署表对象中对应文件的哈希值。

S40、根据代码模块依赖关系按需加载前端库代码模块；

在本申请实施例步骤S40中，根据代码模块依赖关系按需加载前端库代码模块的方法，包括以下步骤：

S41、加载入口前端代码模块文件后，读取依赖模块关系表中的前端库标识和版本。

S42、访问代码模块部署表对象，依据前端库标识和版本访问代码模块部署路径和代码模块文件哈希值。

S43、将代码模块文件哈希值以 URL Query String 参数形式拼接到代码模块部署路径后，形成下载链接。

S44、请求步骤S43中创建的下载链接，下载到前端库代码模块文件后，如果依赖模块关系表为空，则执行以可执行函数形式存在的代码模块内容，获取前端代码模块对象，如果存在依赖模块关系表内容项，则递归执行步骤S41至步骤S44，直至下载并获取到所有前端代码模块对象。

S45、执行入口前端代码模块文件中的代码模块内容，运行前端应用。

实施例

以独立更新前端数据校验库，按需下载库文件，校验页面数据为场景介绍本发明应用效果；Farris是以NPM Package方式发布的前端开发框架，以Farris前端框架为例，本实施例采用Button和Data Grid两个组件绘制页面，点击页面中的Button组件，调用Validation Service 校验页面中Data Grid组件正在编辑的数据。可以使用TextBox组件编辑Data Grid单元各内容，所以Data Grid组件中使用了TextBox组件。ValidationService 执行完校验逻辑后，使用Message Box组件展示校验提示信息。

本实施例共涉及五个前端库，其前端代码库标识，即 NPM Package 包名分别为：@farris/button，@farris/data-grid，@farris/text-box，@farris/message-box，@farris/validation-service版本均为1.0.0。

五个前端库代码模块文件为：

文件名：@farris/button.js

内容：

{

前端库标识: “@farris/button”，

依赖模块关系表：[]，

代码模块内容：function(){

const button = button组件源代码

return {

button: button

}

}

}

文件名：@farris/text-box.js

内容：

{

前端库标识: “@farris/text-box”，

依赖模块关系表：[]，

代码模块内容：function(){

const textBox= text-box组件源代码

return {

textBox: textBox

}

}

}

文件名：@farris/data-grid.js

内容：

{

前端库标识: “@farris/data-grid”，

依赖模块关系表：[“@farris/text-box:1.0.0”]，

代码模块内容：function(){

... // 声明并初始化存储依前端库代码模块对象的变量

farris.textBox= 获取依赖前端库代码模块对象(“@farris/text-box”,”1.0.0”)

const dataGrid = data-grid组件源代码

...

// 通过 farris.textBox 访问text-box组件

...

return {

dataGrid: dataGrid

}

}

}

文件名：@farris/message-box.js

内容：

{

前端库标识: “@farris/message-box”，

依赖模块关系表：[“@farris/text-box:1.0.0”，“@farris/button:1.0.0”]，

代码模块内容：function(){

… // 声明并初始化存储依前端库代码模块对象的变量

farris.textBox= 获取依赖前端库代码模块对象(“@farris/text-box”,”1.0.0”)

farris.button= 获取依赖前端库代码模块对象(“@farris/button”,”1.0.0”)

const messageBox = messageBox组件源代码

...

// 通过 farris.textBox 访问text-box组件展示提示信息

// 通过 farris.button 访问button组件关闭消息窗口

...

return {

messageBox: messageBox

}

}

}

文件名：@farris/validation-service.js

内容：

{

前端库标识: “@farris/validation-service”，

依赖模块关系表：[“@farris/message-box:1.0.0”]，

代码模块内容：function(){

... // 声明并初始化存储依前端库代码模块对象的变量

farris.message-box = 获取依赖前端库代码模块对象(“@farris/message-box”,”1.0.0”)

const validationService = validation-service 前端库源代码

...

// 通过 farris.message-box 访问message-box组件提示验证信息

...

return {

validationService: validationService

}

}

}

代码模块与引用前端库关系表：

{

“@farris/button”:[],

“@farris/data-grid”:[],

“@farris/text-box”:[

“正则表达式”

]，

“@farris/message-box”:[],

“@farris/validation-service”:[

function(importPath){

....

// 自定义匹配源代码中引用前端库的代码文本

// 返回引用前端库

return “@farris/validation-service”

}

]

}

应用代码模块文件为：

文件名：employee-list.js

内容：

{

前端应用名: “employee-list”，

依赖模块关系表：[“@farris/button:1.0.0”，“@farris/data-grid:1.0.0”，“@farris/validation-service:1.0.0”]，

代码模块内容：function(){

... // 声明并初始化存储依前端库代码模块对象的变量

farris.button= 获取依赖前端库代码模块对象(“@farris/button”,”1.0.0”)

farris.dataGrid= 获取依赖前端库代码模块对象(“@farris/data-grid”,”1.0.0”)

...

// 通过 farris.textBox 访问text-box组件

// 通过 farris.dataGrid 访问data-grid组件

...

// 绘制页面代码

farris.button.click = function(){

farris.validationService = 获取依赖前端库代码模块对象(“@farris/validation-service”,”1.0.0”)

// 通过 farris.validationService 访问验证服务，校验前端页面数据

}

}

}

代码模块部署表：

{

“@farris/button”:{

“1.0.0”:{

“部署路径”：“/runtime/assets/@farris/button.1.0.0.js”，

“哈希值”：“”

}

}，

“@farris/data-grid”:{

“1.0.0”:{

“部署路径”：“/runtime/assets/@farris/data-grid.1.0.0.js”，

“哈希值”：“”

}

}，

“@farris/text-box”:{

“1.0.0”:{

“部署路径”：“/runtime/assets/@farris/text-box.1.0.0.js”，

“哈希值”：“”

}

}，

“@farris/validation-service”:{

“1.0.0”:{

“部署路径”：“/runtime/common/@farris/validation-service.1.0.0.js”

“哈希值”：“”

}，

“1.1.0”:{

“部署路径”：“/runtime/common/@farris/validation-service.1.1.0.js”

“哈希值”：“”

}，

}

}

首先，打包前端组件库。“@farris/button”、“@farris/text-box”为原子组件，组件代码中为引用其他前端库，形成的前端库代码模块文件如上所示，其中“依赖模块关系表”的值为空。“@farris/message-box”组件在代码中引用了Button和Text Box组件，经过本发明打包的前端库代码模块文件如上所示，在“依赖模块关系表”中声明依赖““@farris/button”和““@farris/text-box”，同理打包“@farris/validation-service”前端代码库。

接下来，应用前端组件库开源前端应用。在开发前面应用“employee-list”时，前端代码中使用Data Grid组件编辑前端数据，使用Button组件提交前端数据，在点击Button提交数据前，调用Validation Service校验前端数据。该前端功能仅直接依赖三个前端库，经过本发明打包前端应用后，形成的前端库代码模块文件如上所示，在“依赖模块关系表”中声明依赖“@farris/button”、“@farris/data-grid”、“@farris/validation-service”。

然后，按需加载前端文件，初始化“employee-list”应用。初始化“employee-list”应用时，执行渲染页面逻辑，声明并初始化存储前端库代码模块对象的变量button和dataGrid时，本发明按需下载@farris/button和@farris/data-grid两个前端库，此时因为@farris/data-grid依赖了@farris/text-box，最终会下载三个前端库代码文件。当点击button按钮时，在其点击事件方法中会声明并初始化存储依前端库代码模块对象的变量validationService，此时才按需加载@farris/validation-service前端库。因为@farris/validation-service依赖了@farris/message-box前端库，此时会下载这两个库的前端库文件，但是因为已经加载过@farris/button和@farris/text-box，所以下载@farris/message-box前端库文件时，不会重新下载这两个库的文件。

最后，独立更新前端文件。当@farris/validation-service库更新校验规则，增加了新的校验方式时，只需要重新更新此库文件，同步更新代码模块部署表，如上所示，追加部署记录，系统重新计算并更新文件哈希值，完成独立部署。

本领域技术人员还将明白的是，结合这里的公开所描述的各种示例性逻辑块、模块、电路和算法步骤可以被实现为电子硬件、计算机软件或两者的组合。为了清楚地说明硬件和软件的这种可互换性，已经就各种示意性组件、方块、模块、电路和步骤的功能对其进行了一般性的描述。这种功能是被实现为软件还是被实现为硬件取决于具体应用以及施加给整个系统的设计约束。本领域技术人员可以针对每种具体应用以各种方式来实现的功能，但是这种实现决定不应被解释为导致脱离本发明实施例公开的范围。

最后需要说明的是，本文的计算机可读存储介质（例如，存储器）可以是易失性存储器或非易失性存储器，或者可以包括易失性存储器和非易失性存储器两者。作为例子而非限制性的，非易失性存储器可以包括只读存储器（ROM）、可编程ROM（PROM）、电可编程ROM（EPROM）、电可擦写可编程ROM（EEPROM）或快闪存储器。易失性存储器可以包括随机存取存储器（RAM），该RAM可以充当外部高速缓存存储器。作为例子而非限制性的，RAM 可以以多种形式获得，比如同步RAM（DRAM）、动态RAM（DRAM）、同步DRAM（SDRAM）、双数据速率SDRAM（DDRSDRAM）、增强SDRAM（ESDRAM）、同步链路DRAM（SLDRAM）、以及直接Rambus RAM（DRRAM）。所公开的方面的存储设备意在包括但不限于这些和其它合适类型的存储器。

结合这里的公开所描述的各种示例性逻辑块、模块和电路可以利用被设计成用于执行这里功能的下列部件来实现或执行：通用处理器、数字信号处理器（DSP）、专用集成电路（ASIC）、现场可编程门阵列（FPGA）或其它可编程逻辑器件、分立门或晶体管逻辑、分立的硬件组件或者这些部件的任何组合。通用处理器可以是微处理器，但是可替换地，处理器可以是任何传统处理器、控制器、微控制器或状态机。处理器也可以被实现为计算设备的组合，例如，DSP和微处理器的组合、多个微处理器、一个或多个微处理器结合DSP和/或任何其它这种配置。

对于本领域技术人员而言，显然本发明不限于上述示范性实施例的细节，而且在不背离本发明的精神或基本特征的情况下，能够以其他的具体形式实现本发明。因此，无论从哪一点来看，均应将实施例看作是示范性的，而且是非限制性的，本发明的范围由所附权利要求而不是上述说明限定，因此旨在将落在权利要求的等同要件的含义和范围内的所有变化囊括在本发明内。不应将权利要求中的任何附图标记视为限制所涉及的权利要求。

此外，应当理解，虽然本说明书按照实施方式加以描述，但并非每个实施方式仅包含一个独立的技术方案，说明书的这种叙述方式仅仅是为清楚起见，本领域技术人员应当将说明书作为一个整体，各实施例中的技术方案也可以经适当组合，形成本领域技术人员可以理解的其他实施方式。

Claims (10)

1.一种按需加载模块化前端代码的方法，其特征在于，包括以下步骤：

构建前端库代码模块文件，将前端应用代码直接引用到前端代码库，将前端应用代码组织为代码模块文件；

从前端应用代码中解耦前端库代码，以同样的代码模块结构组织前端应用代码，其中，前端库标识被替换为前端应用名，将对前端库代码的直接引用转换为与依赖前端库代码模块文件；

独立部署前端库代码模块文件，从前端应用代码中解耦前端库代码后，将包含前端库代码的代码模块文件部署至Web服务器对应目录，同时更新代码模块部署表；

根据代码模块依赖关系按需加载前端库代码模块。

2.根据权利要求1所述的按需加载模块化前端代码的方法，其特征在于，所述代码模块文件结构包括：前端库标识、依赖模块关系表和代码模块，其中，前端库标识是以命名空间形式表示前端代码库的字符串，用斜线分隔命名空间的每一部分；依赖模块关系表以字符串数组形式，记录代码模块内所引用的前端库标识和版本；代码模块内容用于记录前端库的源代码，代码模块内容是一个可以执行的函数，函数返回值为模块对象，模块对象中保存了前端库对外输出的变量和方法。

3.根据权利要求2所述的按需加载模块化前端代码的方法，其特征在于，所述代码模块内容包括获取依赖前端库代码模块对象语句、前端库代码片段、输出自身模块对象语句。

4.根据权利要求3所述的按需加载模块化前端代码的方法，其特征在于，在代码模块内容中，获取依赖前端库模块对象语句的方法，包括以下步骤：

步骤一、分割依赖前端库标识中记录的命名空间字符串，以每段命名空间为对象属性名，声明并初始化存储前端库代码模块对象的变量；

步骤二、以依赖前端库标识和版本为实参，调用获取依赖前端库代码模块对象函数，获取其模块对象；

步骤三、将上一步调用函数的返回值赋值给第一步的变量。

5.根据权利要求4所述的按需加载模块化前端代码的方法，其特征在于，步骤二中，调用的获取依赖前端库代码模块对象函数，是接收前端库标识和版本，在全局缓存对象中查找前端库代码模块对象的方法；在全局缓存对象中，以每段前端库命名空间为属性名，最后一层以前端库版本号为属性名，存储已经加载的前端库代码模块对象；在代码模块内容中，前端库代码片段，表现为以逐层访问依赖前端库代码模块对象属性的方式，访问依赖前端库对外输出的变量和方法，存储原始前端库代码内容。

6.根据权利要求5所述的按需加载模块化前端代码的方法，其特征在于，在代码模块内容中，输出自身模块对象语句的方法为：首先，声明当前前端库代码模块对外输出的模块对象；然后，将当前前端库对外输出的变量和方法赋值给模块对象的同名属性；最后，对外输出第一步声明的模块对象。

7.根据权利要求1所述的按需加载模块化前端代码的方法，其特征在于，解耦前端库代码包括以下步骤：

分析源代码文件中引用前端库的语句，匹配代码模块与引用前端库关系表，生成代码模块文件结构中的依赖模块关系表；

将源代码文件中引用前端库的语句转换获取依赖前端库代码模块对象语句；

将源代码文件中直接访问前端库对外输出的变量和方法的语句转换为通过前端库代码模块对象属性访问。

8.根据权利要求1所述的按需加载模块化前端代码的方法，其特征在于，代码模块与引用前端库关系表的结构为：以前端库标识为键，以匹配策略为值的对象，所述匹配策略包括：

匹配前端库名包；缺省采用精确匹配前端库包名策略；

正则表达式匹配引用路径；正则表达式匹配引用路径策略；

自定义匹配函数。

9.根据权利要求1所述的按需加载模块化前端代码的方法，其特征在于，代码模块部署表的结构为包含前端库标识、版本、部署路径和代码模块文件哈希值的层级对象；代码模块部署表对象第一级属性名为前端库标识，其下级对象的属性名为前端库版本，其值为存储代码模块文件部署路径和代码模块文件哈希值的对象。

10.根据权利要求1所述的按需加载模块化前端代码的方法，其特征在于，根据代码模块依赖关系按需加载前端库代码模块的方法，包括以下步骤：

加载入口前端代码模块文件后，读取依赖模块关系表中的前端库标识和版本；

访问代码模块部署表对象，依据前端库标识和版本访问代码模块部署路径和代码模块文件哈希值；

将代码模块文件哈希值以 URL Query String 参数形式拼接到代码模块部署路径后，形成下载链接；

请求创建的下载链接，下载到前端库代码模块文件后，如果依赖模块关系表为空，则执行以可执行函数形式存在的代码模块内容，获取前端代码模块对象，如果存在依赖模块关系表内容项，则递归执行上述步骤，直至下载并获取到所有前端代码模块对象；

执行入口前端代码模块文件中的代码模块内容，运行前端应用。