File dynamic loading method and device based on script mode shunting

Abstract

This disclosure presents a method and apparatus for dynamic file loading based on script pattern splitting. One specific implementation of the method includes: initiating an asynchronous network request based on a Uniform Resource Locator (URL) to obtain component source code; performing regular expression matching and decomposition on the component source code to generate independent template block content, script block content, and style block content; performing pattern feature scanning on the script block content to generate splitting markers; and performing the following component configuration object generation steps: wrapping the script block content with common module definitions and registering it with an asynchronous loader; performing module export syntax conversion and secure execution processing on the script block content; merging options and generating a component constructor based on the template block content and the corresponding component configuration object; and performing dynamic style tag creation and document injection. This implementation can achieve on-demand dynamic loading of view components in an existing environment, thereby saving time costs associated with construction and architecture modification.

Description

Technical Field

[0001] The embodiments disclosed herein relate to the field of computer technology, and specifically to a method and apparatus for dynamic file loading based on script-based mode splitting. Background Technology

[0002] Currently, in existing front-end projects that are primarily compatible with the SeaJS Module Specification, global view framework, and fifth-edition script syntax, in order to achieve modular development and use of Vue components, the use of single-file view components in such projects usually adopts a build-time compilation approach. That is, relying on the packaging tool and the corresponding loader plugin, the single-file view is parsed and compiled into a script module artifact before release, and then loaded or packaged into a file package by the module loader for release.

[0003] However, when using the above method for file loading, the following technical problems often occur: the compilation and build process is cumbersome, and the workload of architectural modification is large; it is impossible to achieve asynchronous loading of components on demand, resulting in redundant and wasted resources; different script running modes cannot be adapted to the split processing, the component loading compatibility is poor, and the running stability is low, resulting in a waste of time and computing resources.

[0004] The information disclosed in this background section is only intended to enhance the understanding of the background of the inventive concept, and therefore may contain information that does not constitute prior art known to those skilled in the art. Summary of the Invention

[0005] The summary portion of this disclosure is intended to provide a brief overview of the concepts, which will be described in detail in the detailed description portion. This summary portion is not intended to identify key or essential features of the claimed technical solutions, nor is it intended to limit the scope of the claimed technical solutions.

[0006] Some embodiments of this disclosure propose a method and apparatus for dynamic file loading based on script-mode splitting to solve one or more of the technical problems mentioned in the background section above.

[0007] In a first aspect, some embodiments of this disclosure provide a method for dynamically loading files based on script pattern splitting, including: in response to receiving a Uniform Resource Locator (URL) for a target single-file component, initiating an asynchronous network request based on the URL to obtain the component source code; performing regular expression matching and decomposition processing on the component source code to generate independent template block content, script block content, and style block content; performing pattern feature scanning processing on the script block content to generate a splitting marker; and performing the following component configuration object generation steps for the splitting marker: in response to the splitting marker representing a first pattern, performing common module definition packaging and asynchronous loader registration processing on the script block content to generate a corresponding component configuration object; in response to the splitting marker representing a second pattern, performing module export syntax conversion and secure execution processing on the script block content to generate a corresponding component configuration object; performing option merging and component constructor generation processing based on the template block content and the corresponding component configuration object to generate an instantiable component constructor; and performing dynamic style tag creation and document injection processing based on the style block content to complete the loading of the target single-file component.

[0008] Secondly, some embodiments of this disclosure provide a file dynamic loading apparatus based on script pattern splitting, comprising: an acquisition unit configured to, in response to receiving a Uniform Resource Locator (URL) for a target single-file component, initiate an asynchronous network request based on the URL to acquire the component source code; a matching and decomposition unit configured to perform regular expression matching and decomposition processing on the component source code to generate independent template block content, script block content, and style block content; a generation unit configured to perform pattern feature scanning processing on the script block content to generate a splitting marker; and a first execution unit configured to, for the splitting marker, execute the following component configuration object generation steps: In response to the first mode represented by the aforementioned splitting mark, the script block content is packaged with a common module definition and registered with an asynchronous loader to generate a corresponding component configuration object; in response to the second mode represented by the aforementioned splitting mark, the script block content is processed with module export syntax conversion and secure execution to generate a corresponding component configuration object; the processing unit is configured to perform option merging and component constructor generation based on the template block content and the corresponding component configuration object to generate an instantiable component constructor; the second execution unit is configured to perform dynamic style tag creation and document injection based on the style block content to complete the loading of the aforementioned target single-file component.

[0009] Thirdly, some embodiments of this disclosure provide an electronic device, including: one or more processors; and a storage device having one or more programs stored thereon, such that when the one or more programs are executed by the one or more processors, the one or more processors implement the method as described in any implementation of the first aspect.

[0010] Fourthly, some embodiments of this disclosure provide a computer-readable medium having a computer program stored thereon, wherein the program, when executed by a processor, implements the method as described in any implementation of the first aspect.

[0011] The above embodiments of this disclosure have the following beneficial effects: The script-based dynamic file loading method of some embodiments of this disclosure enables on-demand dynamic loading of view components in existing environments, thereby saving time and costs associated with construction and architecture transformation. Specifically, the reasons why view components are difficult to load dynamically on demand, have cumbersome construction dependencies, and incur high architecture transformation costs in existing environments are: traditional frameworks are incompatible with view component loading modes, lack script-based flow splitting mechanisms, require overall architecture transformation, and have redundant construction processes. Based on this, the script-based dynamic file loading method of some embodiments of this disclosure first, in response to receiving the Uniform Resource Locator (URL) of the target single-file component, initiates an asynchronous network request based on the URL to obtain the component source code. By initiating an asynchronous request through the address to obtain the component source code, the browser can remotely and on-demand retrieve the component's original resources without prior compilation and packaging, supporting dynamic remote loading and deployment of components. Then, the component source code is subjected to regular expression matching and decomposition processing to generate independent template block content, script block content, and style block content. By using regular expression matching to disassemble the component source code, the template, script, and style content are separated into independent components, achieving structured decomposition and providing basic data for subsequent module-based parsing and traffic splitting. Next, the script block content is subjected to pattern feature scanning to generate traffic splitting markers. This feature scanning of the script content generates traffic splitting markers, accurately identifying the script's execution mode and providing a basis for subsequent pattern-based differentiated parsing, improving adaptability. Following this, for the aforementioned traffic splitting markers, the following component configuration object generation steps are performed: In response to the traffic splitting marker representing the first mode, the script block content is packaged into a common module definition and registered with an asynchronous loader to generate the corresponding component configuration object. The script block content is packaged into a common module definition code segment, dynamically registered using a Uniform Resource Locator (URL) as the module identifier, and then asynchronously loaded through the module loader's usage interface. This allows components written in the original imperative module definition style to be loaded on demand at runtime. Simultaneously, the callback to the module loader is encapsulated as a commitment object, achieving unified chained calls in the asynchronous process, facilitating combination with other commitment-based interfaces such as network requests. In response to the second mode represented by the aforementioned splitting marker, the script block content undergoes module export syntax transformation and secure execution processing to generate the corresponding component configuration object. Default export statements in the script block are replaced with module export assignment statements. The transformed code runs in a controlled, isolated execution environment, and the component configuration object is read from the module export variables. This allows scripts that more closely resemble single-file component writing habits to execute directly without additional wrapping. Simultaneously, sandbox isolation avoids global namespace pollution and variable conflicts, ensuring security when multiple components are loaded in parallel. Furthermore, based on the template block content and the corresponding component configuration object, option merging and component constructor generation processing are performed to generate an instantiable component constructor.The template content and component configuration are merged to generate a component builder, integrating view and logic configurations to form a standard component that can be directly instantiated, ensuring normal component rendering and operation. Finally, based on the above style block content, dynamic style tag creation and document injection are performed to complete the loading of the target single-file component. Tags are created for the style content and injected into the document to achieve dynamic style mounting and activation, while avoiding duplicate style loading and global pollution, thus completing the full loading and activation of the entire component set. Attached Figure Description

[0012] The above and other features, advantages, and aspects of the embodiments of this disclosure will become more apparent from the accompanying drawings and the following detailed description. Throughout the drawings, the same or similar reference numerals denote the same or similar elements. It should be understood that the drawings are schematic, and elements are not necessarily drawn to scale.

[0013] Figure 1 This is a flowchart of some embodiments of the script-based dynamic file loading method according to the present disclosure; Figure 2 This is a schematic diagram of the structure of some embodiments of the file dynamic loading device based on script mode splitting according to the present disclosure; Figure 3 This is a schematic diagram of the structure of an electronic device suitable for implementing some embodiments of the present disclosure. Detailed Implementation

[0014] Embodiments of this disclosure will now be described in more detail with reference to the accompanying drawings. While some embodiments of this disclosure are shown in the drawings, it should be understood that this disclosure can be implemented in various forms and should not be construed as limited to the embodiments set forth herein. Rather, these embodiments are provided to provide a more thorough and complete understanding of this disclosure. It should be understood that the accompanying drawings and embodiments of this disclosure are for illustrative purposes only and are not intended to limit the scope of protection of this disclosure.

[0015] It should also be noted that, for ease of description, only the parts relevant to the invention are shown in the accompanying drawings. Unless otherwise specified, the embodiments and features described in this disclosure can be combined with each other.

[0016] It should be noted that the concepts of "first" and "second" mentioned in this disclosure are used only to distinguish different devices, modules or units, and are not used to limit the order of functions performed by these devices, modules or units or their interdependencies.

[0017] It should be noted that the terms "a" and "a plurality of" used in this disclosure are illustrative rather than restrictive, and those skilled in the art should understand that, unless otherwise expressly indicated in the context, they should be understood as "one or more".

[0018] The names of messages or information exchanged between multiple devices in the embodiments of this disclosure are for illustrative purposes only and are not intended to limit the scope of such messages or information.

[0019] This disclosure will now be described in detail with reference to the accompanying drawings and embodiments.

[0020] refer to Figure 1 The diagram illustrates a flow 100 of some embodiments of a script-based dynamic file loading method according to the present disclosure. This script-based dynamic file loading method includes the following steps: Step 101: In response to receiving the Uniform Resource Locator (URL) of the target single-file component, initiate an asynchronous network request based on the URL to obtain the component's source code.

[0021] In some embodiments, the execution entity (e.g., an electronic device) of the above-described script-based dynamic file loading method can be hardware or software. When the computing device is hardware, it can be implemented as a distributed cluster of multiple servers or terminal devices, or as a single server or a single terminal device. When the computing device is software, it can be installed in the hardware devices listed above. It can be implemented as multiple software programs or software modules to provide distributed services, or as a single software program or software module. No specific limitations are made here.

[0022] In other embodiments, the execution entity may, in response to receiving the Uniform Resource Locator (URL) of the target single-file component, initiate an asynchronous network request based on the URL to obtain the component's source code. The target single-file component may be an independent front-end component file containing templates, scripts, and styles; for example, it may be a front-end page functionality encapsulation component file. The URL may be a network resource address locating the component file; for example, it may be a server-stored access path for the component file. The asynchronous network request may be a background resource request method that does not block page rendering; for example, it may be a browser-free request to fetch files in the background. The component source code may be the raw text code content of the single-file component; for example, it may be raw text code containing HTML templates, JavaScript logic, and CSS styles.

[0023] In some optional implementations of certain embodiments, the execution entity may, in response to receiving the Uniform Resource Locator (URL) of the target single-file component, initiate an asynchronous network request based on the URL to obtain the component's source code, which may include the following steps: The first step, in response to receiving the Uniform Resource Locator (URL) of the target single-file component, uses the URL as the request address to invoke the browser's crawling interface to initiate a Hypertext Transfer Protocol (HTTP) request, obtaining the response object. The request address can be a network access address used to locate the resource; for example, it can be the complete network access link corresponding to the component file. The browser's crawling interface can be the browser's built-in network request call interface, which can be the `fetch` function or an `XMLHttpRequest` object. The HTTP request can be a resource request conforming to web page transmission standards; for example, it can be a request to retrieve a standard web page file. The response object can be an object structure returned by the network request that encapsulates the response data; for example, the response object includes attributes such as a status code and a response body. In practice, first, the URL of the target component is used as the request address. Then, the browser's crawling interface is invoked to initiate an HTTP request, and the server's response is awaited. Finally, the returned data is received from the network protocol stack, obtaining a response object containing the status code and response body. For example, using fetch (https: / / example.com / user-card.vue) to make a request, you can get a response object containing an ok property and a text method.

[0024] The second step involves converting the response object into a text format to generate the component source code in text format. In practice, this is done by first reading the raw data stream from the response object, then performing encoding parsing and format transcoding on the data stream, and finally generating the complete plain text component source code.

[0025] Step 102: Perform regular expression matching and decomposition on the component source code to generate independent template block content, script block content, and style block content.

[0026] In some embodiments, the aforementioned execution entity can perform regular expression matching and decomposition processing on the aforementioned component source code to generate independent template block content, script block content, and style block content. Here, the aforementioned regular expression matching can refer to the technique of using regular expressions to find and extract patterns from text. The aforementioned decomposition processing can refer to the operation of breaking down a compound document into independent parts according to tag boundaries; for example, the aforementioned decomposition processing can be splitting a .vue file into three independent text blocks: template, script, and style. The aforementioned template block content can refer to the HTML template text defining the view structure in the component. The aforementioned script block content can refer to the JavaScript code text defining logical interactions in the component. The aforementioned style block content can refer to the CSS code text defining visual styles in the component.

[0027] In some optional implementations of certain embodiments, the execution entity may perform regular expression matching and decomposition on the source code of the aforementioned components to generate independent template block content, script block content, and style block content, which may include the following steps: The first step involves matching and extracting the source code of the aforementioned components based on a pre-defined template block regular expression to generate template block content. This template block regular expression refers to a pattern rule used to match template tags and their intermediate content, represented by a string. For example, the template block regular expression could be: " / <template[^> The template block regular expression above, ]*>([\s\S]*?)<\ / template> / i", means to match any form of... <template> Start tag (may contain attributes) -> Capture all content within the tag (including newline characters) -> Until the corresponding tag is encountered.< / template> The closing tag is case-insensitive. In practice, first, the preset template matching rules are loaded. Then, the rules are used to search and match the component source code. Finally, the text content within the template tags is extracted as the template block content. For example, template rules are used to match the source code and extract the view structure text.

[0028] The second step involves matching and extracting the source code of the aforementioned components based on a predefined script block regular expression to generate script block content. This predefined script block regular expression refers to a pattern rule used to match script tags and their intermediate content, represented by a string. For example, the predefined script block regular expression could be " / <script[^> The regular expression in the script block above, ]*>([\s\S]*?)<\ / script> / i", means to match any form of... <script>开始标签（可能包含属性）->捕获标签内的所有内容（包括换行符）->直到遇到对应的< / script> The closing tag is case-insensitive. The regular expression in this block means matching any form... <script>开始标签（可能包含属性）->捕获标签内的所有内容（包括换行符）->直到遇到对应的< / script> The closing tag is case-insensitive. In practice, first, the preset script matching rules are loaded. Then, the rules are used to search and match the component source code. Finally, the text content within the script tag is extracted as the script block content. For example, script rules are used to match the source code and extract the logic code text.

[0029] The third step involves performing matching and extraction processing on the aforementioned component source code based on a preset style block regular expression to generate style block content. This preset style block regular expression refers to a pattern rule used to match style tags and their intermediate content, represented by a string. For example, the preset style block regular expression could be: " / <style[^> The regular expression above, ]*>([\s\S]*?)<\ / style> / i", means to match any form of... <style>开始标签（可能包含属性）->捕获标签内的所有内容（包括换行符）->直到遇到对应的< / style>The closing tag is case-insensitive. In practice, first, the preset style matching rules are loaded. Then, the rules are used to search and match the component source code. Finally, the text content within the style tags is extracted. For example, the appearance style text is extracted using style rules to match the source code and used as the style block content.

[0030] Step 103: Perform pattern feature scanning on the script block content to generate a split marker.

[0031] In some embodiments, the execution entity may perform pattern feature scanning on the script block content to generate a routing marker. The pattern feature may refer to an identifying string in the script block content used to distinguish processing paths, for example, in Vue's... <script>标签中，是否存在setup这个关键词，就是一个重要的模式特征。上述分流标记可以是指用于指示后续执行路径的枚举值或标志位，例如，上述分流标记可以是一个布尔值或字符串常量。

[0032] 在一些实施例的一些可选的实现方式中，上述执行主体可以对上述脚本块内容进行模式特征扫描处理，以生成分流标记，可以包括以下步骤：第一步，基于预设标记字符串，对上述脚本块内容进行扫描检测处理，以生成模式特征检测结果。其中，上述预设标记字符串可以是指预先约定的用于触发第二模式的特定字符序列，例如，上述预设标记字符串可以是"启用简化写法”或" / / sfc模式”。上述模式特征检测结果可以是指对脚本块内容扫描后得到的标记存在性判定，例如，上述模式特征检测结果可以是"已找到标记”或"未找到标记”。实践中，首先，获取预设标记字符串，例如"启用简化写法”。然后，限定了扫描范围后对脚本块内容进行逐字符或逐行扫描。最后，记录扫描过程中是否发现了该标记字符串，生成模式特征检测结果。例如，扫描脚本块内容开头五行，若发现"启用简化写法”则检测结果为已找到。

[0033] 第二步，响应于上述模式特征检测结果表征在预设位置处存在上述预设标记字符串，生成表征第二模式的分流标记。其中，上述预设位置可以是指脚本块内容中预先约定的特定扫描区域，例如，上述预设位置可以是脚本块内容的前一百个字符或开头第一行。上述表征第二模式的分流标记可以是指示采用简化单文件组件处理方式的标记，例如，上述表征第二模式的分流标记可以是字符串"mode:simple”。第二模式可以是脚本块使用默认导出语法，无需包装即可直接执行的模式。上述第二模式为简化单文件组件模式，适用于采用export default语法定义组件的脚本块实践中，首先，获取第一步生成的模式特征检测结果。然后，判断该检测结果是否表征在预设位置处存在预设标记字符串。最后，若条件满足，则生成表征第二模式的分流标记。例如，检测结果为已找到标记，则生成分流标记值为"第二模式”。

[0034] 第三步，响应于上述模式特征检测结果表征在预设位置处不存在上述预设标记字符串，生成表征第一模式的分流标记。上述表征第一模式的分流标记可以是指示采用命令式模块定义兼容处理方式的标记，例如，上述表征第一模式的分流标记可以是字符串"mode:cmd”。第一模式指脚本块使用CMD / AMD模块定义语法，需包装后异步加载。所述第一模式为命令式模块定义兼容模式，适用于采用传统define函数定义模块的脚本块。实践中，首先，获取模式特征检测结果。然后，判断该检测结果是否表征在预设位置处不存在预设标记字符串。最后，若条件满足，则生成表征第一模式的分流标记。例如，检测结果为未找到标记，则生成分流标记值为"第一模式”。

[0035] 步骤104，针对分流标记，执行以下组件配置对象生成步骤：步骤1041，响应于分流标记表征第一模式，对脚本块内容进行公共模块定义包装与异步加载器注册处理，以生成对应的组件配置对象。

[0036] 在一些实施例中，上述执行主体可以响应于上述分流标记表征第一模式，对上述脚本块内容进行公共模块定义包装与异步加载器注册处理，以生成对应的组件配置对象。其中，上述第一模式可以是被预先定义的组件语法模式，通常指传统的、非setup语法的Vue组件定义方式。上述第一模式为命令式模块定义兼容模式，适用于采用传统define函数定义模块的脚本块上述公共模块定义包装可以是指将脚本块内容封装为符合公共模块定义规范的代码段。其中，上述异步加载器注册可以是指将包装后的模块注册到模块加载器的内部缓存中，例如，上述异步加载器注册可以是调用模块加载器的注册接口。上述对应的组件配置对象可以是指最终生成的视图组件选项对象，例如，上述对应的组件配置对象可以是包含data、methods、template等属性的对象。

[0037] 在采用技术方案来解决上述背景技术的技术问题的过程中，针对所要应用的场景：存量前端项目中，需要在不改造整体构建架构的前提下，实现Vue单文件组件在浏览器端的动态加载与运行，往往又会伴随着如下技术问题：模板与逻辑配置无法合并、组件构造重复生成、加载性能损耗大，浪费了计算资源，增加了响应时间。针对本应用场景需要具备的如下需求特点：在线解析、即拿即用、可缓存复用、兼容原有视图框架，我们决定采用如下解决方案：在一些实施例的一些可选的实现方式中，上述执行主体可以响应于上述分流标记表征第一模式，对上述脚本块内容进行公共模块定义包装与异步加载器注册处理，以生成对应的组件配置对象，可以包括以下步骤：第一步，通过将上述统一资源定位符作为模块标识符，对上述脚本块内容进行公共模块定义函数的包装处理，生成模块定义代码段。其中，上述模块标识符可以是指用于唯一标识一个模块的字符串，例如，上述模块标识符可以是组件的统一资源定位符。上述公共模块定义函数可以是指模块加载器提供的用于定义模块的全局函数，例如，上述公共模块定义函数可以是define函数。上述模块定义代码段可以是指包含模块定义函数调用的完整代码字符串。实践中，首先，获取目标组件的统一资源定位符作为模块标识符。然后，将脚本块内容作为工厂函数体拼接至公共模块定义函数内。最后，生成完整的模块定义代码段字符串。

[0038] 第二步，基于上述模块定义代码段，调用模块定义全局函数执行注册处理，以生成已注册的虚拟模块。其中，上述模块定义全局函数可以是指挂载在全局对象上的模块定义函数，例如，上述模块定义全局函数可以是window.define。上述已注册的虚拟模块可以是指已存入模块加载器缓存但无对应文件的逻辑模块，例如，上述已注册的虚拟模块可以是一个模块标识符与工厂函数的键值对。实践中，首先，获取生成的模块定义代码段。然后，调用挂载在全局的模块定义函数，将代码段作为字符串或函数执行。最后，模块加载器完成注册，生成已注册的虚拟模块。

[0039] 第三步，将上述模块标识符与异步加载器进行绑定处理，生成加载绑定关系。其中，上述加载绑定关系可以是指模块标识符与加载器回调函数之间的关联配置，例如，上述加载绑定关系可以是将模块标识符传递给使用函数并绑定成功回调。上述加载绑定关系通过seajs.use(url, function(module) { ...})实现，其中url为模块标识符，callback为回调函数，用于在模块加载完成后获取组件导出对象。实践中，首先，获取模块标识符。然后，构造一个用于接收模块导出对象的回调函数。最后，将模块标识符与回调函数组合成加载绑定关系配置。

[0040] 第四步，基于上述加载绑定关系发起异步调用请求，生成异步加载进程。其中，上述异步调用请求可以是指向模块加载器发起的非阻塞式模块获取操作，例如，上述异步调用请求可以是调用seajs.use函数。上述异步加载进程可以是指正在执行且等待完成的加载操作实例，例如，上述异步加载进程可以是一个等待模块加载完成的承诺对象。首先，获取第三步生成的加载绑定关系。然后，调用模块加载器的使用接口发起异步调用请求。最后，模块加载器开始执行加载流程，生成异步加载进程。

[0041] 第五步，通过获取上述异步加载进程的完成状态信息，生成回调函数返回的组件导出对象。其中，上述完成状态信息可以是指异步操作结束后的结果数据，例如，上述完成状态信息可以是成功或失败的状态及返回的模块导出值。上述回调函数可以是指异步操作完成后被调用的函数，例如，上述回调函数可以是function(module) { console.log(module)；}。上述组件导出对象可以是指模块定义函数返回或导出的组件配置对象，例如，上述组件导出对象可以是{data：function(){...}；methods:{...}}。实践中，首先，获取第四步生成的异步加载进程。然后，等待进程完成并获取模块加载器返回的结果。最后，从完成状态信息中提取回调函数接收到的组件导出对象。例如，异步加载完成后，回调函数被调用，参数comp即为组件导出对象。

[0042] 第六步，对上述回调函数返回的组件导出对象进行类型检测处理，以生成检测结果。上述检测结果可以是指类型检查操作后得到的判定值，例如，上述检测结果可以是布尔值真或假。实践中，首先，获取第三步生成的加载绑定关系。然后，调用模块加载器的使用接口发起异步调用请求。最后，模块加载器开始执行加载流程，生成异步加载进程。实践中，首先，获取第五步得到的组件导出对象。然后，对组件导出对象执行类型判断操作。最后，生成表征是否为有效对象的检测结果。

[0043] 第七步，响应于上述检测结果表征上述组件导出对象为有效对象，将上述组件导出对象作为对应的组件配置对象。其中，上述有效对象可以是指非空且符合组件配置对象结构的对象，例如，上述有效对象可以是包含template或render选项的对象。实践中，首先，获取检测结果。然后，判断检测结果是否表征组件导出对象为有效对象。最后，若条件满足，将组件导出对象作为对应的组件配置对象返回。

[0044] 上述操作步骤，作为本公开的一个发明点，解决了背景技术提及的技术问题"模板与逻辑配置无法合并、组件构造重复生成、加载性能损耗大，浪费了计算资源，增加了响应时间”。导致上述技术问题的原因如下：传统方式无模板规整合并机制，缺少构造器缓存策略，每次加载都重新生成实例构造器。本发明点通过以统一资源定位符为键值建立构造器缓存，将模板合并、扩展生成后的构造器存入缓存并在命中时直接返回，实现了组件快速构造与一次生成多次复用，节约了重复构造的计算开销与网络加载的等待时间。

[0045] 步骤1042，响应于分流标记表征第二模式，对脚本块内容进行模块导出语法转换与安全执行处理，以生成对应的组件配置对象。

[0046] 在一些实施例中，上述执行主体可以响应于上述分流标记表征第二模式，对上述脚本块内容进行模块导出语法转换与安全执行处理，以生成对应的组件配置对象。其中，上述第二模式可以是指简化单文件组件模式，即脚本块采用默认导出语法编写的处理路径，例如，上述第二模式可以是脚本块中包含export default语句的场景。上述模块导出语法转换可以是指将模块化导出语句改写为普通赋值语句的操作，例如，上述模块导出语法转换可以是将export default {}替换为module.exports = {}。上述安全执行可以是指在隔离环境中运行脚本以避免全局污染的操作，例如，上述安全执行可以是在沙箱对象作用域内执行代码。上述对应的组件配置对象可以是指执行转换后脚本得到的视图组件选项对象，例如，上述对应的组件配置对象可以是包含name、data、methods等属性的对象。

[0047] 在一些实施例的一些可选的实现方式中，上述执行主体可以响应于上述分流标记表征第二模式，对上述脚本块内容进行模块导出语法转换与安全执行处理，以生成对应的组件配置对象，可以包括以下步骤：第一步，对上述脚本块内容进行默认导出语句的扫描定位处理，以生成默认导出语句的位置信息。其中，上述默认导出语句可以是指模块化规范中用于导出默认成员的语句，例如，上述默认导出语句可以是export default {data(){return{count:0}}}。实践中，第一步，首先，获取脚本块内容的完整字符串。然后，对脚本块内容进行逐字符扫描，查找export default关键词。最后，记录该关键词的起始位置和结束位置，生成默认导出语句的位置信息。

[0048] 第二步，基于上述位置信息，将上述默认导出语句替换为模块导出赋值语句，以生成转换后的脚本代码。其中，上述模块导出赋值语句可以是指将值赋给模块导出变量的语句。其中，上述转换后的脚本代码可以是指经过语法替换处理后的完整代码字符串。实践中，首先，获取默认导出语句位置信息。然后，基于该位置信息从原始脚本块中提取默认导出的对象内容。最后，将export default替换为module.exports=，生成转换后的脚本代码。

[0049] 第三步，通过创建受控的脚本执行环境，生成隔离的执行上下文。其中，上述受控的脚本执行环境可以是指限制了全局访问权限的代码运行空间，例如，上述受控的脚本执行环境可以是自定义的沙箱对象作用域。上述隔离的执行上下文可以是指与全局作用域分离的独立执行空间，例如，上述隔离的执行上下文可以是一个函数作用域内的受限环境。实践中，首先，创建一个空对象作为沙箱容器，用于存放模块导出结果。然后，构造一个立即执行函数表达式，将转换后的脚本代码作为函数体。最后，将沙箱容器作为参数传入并绑定函数执行时的this指向该容器，生成隔离的执行上下文。

[0050] 第四步，在上述隔离的执行上下文中执行上述转换后的脚本代码，以生成执行结果。其中，上述执行结果可以是指脚本执行完毕后模块导出变量所持有的值。实践中，首先，获取隔离执行上下文。然后，在该上下文中执行转换后的脚本代码。最后，脚本执行完毕后，从沙箱容器中读取模块导出变量，生成执行结果。

[0051] 第五步，对上述执行结果中的模块导出变量进行读取处理，以生成组件配置对象。实践中，首先，获取执行结果中的模块导出变量。然后，对模块导出变量进行有效性校验。最后，将有效的模块导出变量作为组件配置对象返回。

[0052] 步骤105，基于模板块内容与对应的组件配置对象进行选项合并与组件构造器生成处理，以生成可实例化的组件构造器。

[0053] 在一些实施例中，上述执行主体可以基于上述模板块内容与对应的组件配置对象进行选项合并与组件构造器生成处理，以生成可实例化的组件构造器。其中，上述选项合并可以是指将模板字符串作为选项属性合并至组件配置对象中的操作，例如，上述选项合并可以是将{template:‘...‘}与{data:function(){}}合并为一个对象。其中，上述组件构造器生成处理可以是指调用视图框架接口将选项对象转换为可实例化的构造函数，例如，上述组件构造器生成处理可以是执行Vue.extend(options)。上述可实例化的组件构造器可以是指能够通过new关键字创建组件实例的构造函数。例如，在Vue框架中，通过Vue.extend(options)生成的构造函数，可以直接通过new Constructor()来创建组件实例并进行挂载渲染。上述new关键字是JavaScript中用于创建一个对象实例的操作符。它通常与构造函数一起使用，用于从类或构造函数生成一个新的对象。

[0054] 在采用技术方案来解决上述背景技术的技术问题的过程中，针对所要应用的场景：在微前端、低代码平台或组件库等场景中，需要从远程动态加载Vue单文件组件并进行运行时渲染，往往又会伴随着如下技术问题：模板与逻辑配置无法合并、组件构造重复生成、加载性能损耗大，浪费了计算资源，增加了响应时间。针对本应用场景需要具备的如下需求特点：在线解析、即拿即用、可缓存复用、兼容原有视图框架，我们决定采用如下解决方案：在一些实施例的一些可选的实现方式中，上述执行主体可以基于上述模板块内容与对应的组件配置对象进行选项合并与组件构造器生成处理，以生成可实例化的组件构造器，可以包括以下步骤：第一步，对上述模板块内容进行格式规整处理，以生成标准模板字符串。其中，上述标准模板字符串可以是指经过修剪和格式化处理的干净模板文本。实践中，首先，获取模板块内容的原始字符串。然后，对该字符串执行首尾空白字符修剪操作。最后，对修剪后的字符串进行换行符和多余空格的规范化处理，生成标准模板字符串。

[0055] 第二步，将上述标准模板字符串添加至上述组件配置对象，以生成带模板的组件选项。其中，上述带模板的组件选项可以是指包含模板字段的完整组件配置对象。首先，获取第一步生成的标准模板字符串。然后，获取对应的组件配置对象。最后，将模板字符串作为template属性添加到组件配置对象中，生成带模板的组件选项。例如，组件配置对象为{data:function(){return{count:0}}}，合并后得到{template：‘内容‘，data:function(){...}}。

[0056] 第三步，对上述带模板的组件选项进行完整性校验处理，以生成校验通过标记。其中，上述校验通过标记可以是指组件选项完整性和有效性检查通过后的标志，例如，上述校验通过标记可以是布尔值true。实践中，首先，获取第二步生成的带模板的组件选项。然后，检查该对象是否包含必要的生命周期钩子或数据定义。最后，通过完整性检查后生成校验通过标记。例如，检查发现对象包含template属性和data函数，则生成校验通过标记true。实践中，首先，获取第二步生成的带模板的组件选项。然后，检查该对象是否包含必要的生命周期钩子或数据定义。最后，通过完整性检查后生成校验通过标记。例如，检查发现对象包含template属性和data函数，则生成校验通过标记true。

[0057] 第四步，响应于上述校验通过标记，调用视图框架扩展接口进行实例创建处理，以生成组件基础构造器。其中，上述视图框架扩展接口可以是指视图框架提供的用于创建组件构造器的应用程序接口，例如，上述视图框架扩展接口可以是Vue.extend方法。上述组件基础构造器可以是指直接通过扩展接口生成的初始构造函数，例如，上述组件基础构造器可以是Vue.extend(options)返回的未封装构造器。实践中，首先，获取第四步生成的组件基础构造器。然后，为该构造器挂载通用的挂载辅助方法。最后，完成封装处理后生成标准组件构造器。例如，为标准组件构造器添加mount方法，支持直接挂载到指定页面元素上。

[0058] 第五步，对上述组件基础构造器进行可实例化封装处理，以生成标准组件构造器。其中，上述标准组件构造器可以是指经过统一封装后符合调用规范的最终构造函数，例如，上述标准组件构造器可以是挂载了挂载辅助方法的增强构造器。实践中，首先，获取第四步生成的组件基础构造器。然后，为该构造器挂载通用的挂载辅助方法。最后，完成封装处理后生成标准组件构造器。例如，为标准组件构造器添加mount方法，支持直接挂载到指定页面元素上。

[0059] 第六步，以上述统一资源定位符为键值，查询缓存存储区域，得到缓存命中结果。其中，上述缓存命中结果可以是指查询缓存时是否找到对应键值对的判定结果，例如，上述缓存命中结果可以是true或false。首先，获取目标组件的统一资源定位符作为查询键值。然后，访问缓存存储区域执行查找操作。最后，根据查找结果生成缓存命中结果。例如，以 / user-card.vue为键查询Map对象，若存在则命中结果true，否则false。实践中，首先，获取目标组件的统一资源定位符作为查询键值。然后，访问缓存存储区域执行查找操作。最后，根据查找结果生成缓存命中结果。

[0060] 第七步，响应于上述缓存命中结果表征未命中，将上述标准组件构造器存入上述缓存存储区域，得到已缓存的构造器键值对。其中，上述已缓存的构造器键值对可以是指统一资源定位符与组件构造器的映射条目，例如，上述已缓存的构造器键值对可以是‘ / user.vue‘ ->UserComponentConstructor。实践中，首先，获取第六步生成的缓存命中结果。然后，判断命中结果表征未命中时获取第五步生成的标准组件构造器。最后，将统一资源定位符与构造器作为键值对存入缓存存储区域。例如，缓存命中结果为false，执行cache.set(‘ / user-card.vue‘, constructor)。

[0061] 第八步，响应于上述缓存命中结果表征已命中，返回上述缓存存储区域中已存储的标准组件构造器，以生成可复用的组件构造器。其中，上述可复用的组件构造器可以是指从缓存返回的、可直接使用的组件构造函数，例如，上述可复用的组件构造器可以是之前已加载并存储的UserCardConstructor。实践中，首先，获取第六步生成的缓存命中结果。然后，判断命中结果表征已命中时从缓存存储区域读取对应的构造器。最后，返回读取到的标准组件构造器作为可复用的组件构造器。例如，缓存命中结果为true，执行cache.get(‘ / user-card.vue‘)返回已缓存的构造器。

[0062] 上述操作步骤，作为本公开的一个发明点，解决了背景技术提及的技术问题"模板与逻辑配置无法合并、组件构造重复生成、加载性能损耗大，浪费了计算资源，增加了响应时间”。导致上述技术问题的原因如下：传统方式无模板规整合并机制，缺少构造器缓存策略，每次加载都重新生成实例构造器。本发明点通过以统一资源定位符为键值建立构造器缓存，将模板合并、扩展生成后的构造器存入缓存并在命中时直接返回，实现了组件快速构造与一次生成多次复用，节约重复构造的计算开销与网络加载的等待时间。

[0063] 步骤106，基于样式块内容，执行动态样式标签创建与文档注入处理，以完成上述目标单文件组件的加载。

[0064] 在一些实施例中，上述执行主体可以基于上述样式块内容，执行动态样式标签创建与文档注入处理，以完成上述目标单文件组件的加载。其中，上述动态样式标签可以是指运行时创建并插入文档的样式元素。上述文档注入可以是指将样式标签添加到页面文档头部节点的操作。

[0065] 在采用技术方案来解决上述背景技术的技术问题的过程中，针对所要应用的场景：在单页面应用、微前端或组件化开发中，动态加载带有独立样式的Vue单文件组件，往往又会伴随着如下技术问题：如何将组件自带的CSS样式安全、高效地注入到当前文档中，并避免因同一组件被多次加载而导致样式标签重复注入，造成样式冗余和潜在冲突，以及造成计算成本增加。针对本应用场景需要具备的如下需求特点：样式安全、自动去重、不阻塞渲染、兼容存量页面，我们决定采用如下解决方案：在一些实施例的一些可选的实现方式中，上述执行主体可以基于上述样式块内容，执行动态样式标签创建与文档注入处理，以完成上述目标单文件组件的加载，可以包括以下步骤：第一步，对上述样式块内容进行空白字符修剪处理，得到处理后样式文本。其中，上述处理后样式文本可以是指经过修剪和格式化的干净样式代码字符串。实践中，首先，获取样式块内容的原始字符串。然后，对该字符串执行首尾空白字符修剪操作。最后，对修剪后的字符串进行多余换行符压缩处理，得到处理后样式文本。

[0066] 第二步，获取已注入样式标识符集合，得到历史注入记录。其中，上述已注入样式标识符集合可以是指用于记录已注入样式的组件统一资源定位符集合，例如，上述已注入样式标识符集合可以是一个Set对象。上述已注入样式标识符集合为Set类型，初始化为空，每次注入样式前，通过injectedStyleSet.has(url)检查是否存在当前URL，若不存在则执行注入并将URL添加至Set。上述历史注入记录可以是指过去已注入样式的组件标识符列表。实践中，首先，获取全局的已注入样式标识符集合对象。然后，读取该集合中当前存储的所有标识符。最后，生成包含历史注入记录的集合副本或直接引用。

[0067] 第三步，以上述统一资源定位符为样式标识符，查询上述已注入样式标识符集合，得到标识符存在性检测结果。其中，上述标识符存在性检测结果可以是指查询集合后得到的包含与否的判定结果，例如，上述标识符存在性检测结果可以是true或false。实践中，首先，获取目标组件的统一资源定位符作为样式标识符。然后，以该标识符为参数查询历史注入记录集合。最后，根据查询结果生成标识符存在性检测结果。

[0068] 第四步，响应于上述标识符存在性检测结果表征不存在，创建样式标签节点，以生成样式元素对象。其中，上述样式标签节点可以是指通过文档接口创建的样式元素节点对象。上述样式元素对象可以是指尚未填充内容的空白样式元素，例如，上述样式元素对象可以是创建后未设置文本内容的style节点。实践中，首先，获取生成的标识符存在性检测结果。然后，判断检测结果表征不存在时调用文档创建接口。最后，创建样式标签节点并返回样式元素对象。例如，检测结果为false，执行document.createElement(‘style’)生成一个空的style节点。

[0069] 第五步，将上述处理后样式文本设置为上述样式元素对象的内部文本，以生成填充后的样式标签。其中，上述填充后的样式标签可以是指已设置样式文本内容的样式元素，例如，上述填充后的样式标签可以是内部文本为.box{width:100px}的style节点。实践中，首先，获取第四步生成的样式元素对象。然后，获取第一步生成的处理后样式文本。最后，将样式文本设置为样式元素对象的内部文本内容，生成填充后的样式标签。

[0070] 第六步，对上述填充后的样式标签设置类型属性，生成标准样式标签。其中，上述类型属性可以是指样式标签的type属性，用于标识样式语言类型。上述标准样式标签可以是指设置了完整属性和内容的可注入样式元素，例如，上述标准样式标签可以是已完成属性和文本配置的style节点。实践中，首先，获取填充后的样式标签。然后，为该标签节点设置类型属性。最后，生成属性完整、内容就绪的标准样式标签。

[0071] 第七步，将上述标准样式标签追加至文档的头部节点中，以完成样式动态注入。其中，上述头部节点可以是指文档的<head>根元素容器，例如，上述头部节点可以是document.head。实践中，首先，获取第六步生成的标准样式标签。然后，获取文档的头部节点引用。最后，将标准样式标签追加至头部节点的子节点末尾，完成样式动态注入。例如，执行document.head.appendChild(styleTag)，样式标签被添加到页面头部。

[0072] 第八步，将上述统一资源定位符添加至上述已注入样式标识符集合，以更新上述历史注入记录。实践中，首先，获取目标组件的统一资源定位符作为样式标识符。然后，获取已注入样式标识符集合。最后，将该标识符添加至集合中，更新历史注入记录。例如，执行injectedStyleSet.add(‘ / user-card.vue‘)，后续加载同一组件时检测结果为已存在，不再重复注入。

[0073] 上述操作步骤，作为本公开的一个发明点，解决了背景技术提及的技术问题"如何将组件自带的CSS样式安全、高效地注入到当前文档中，并避免因同一组件被多次加载而导致样式标签重复注入，造成样式冗余和潜在冲突，以及造成计算成本增加”。导致上述技术问题的原因如下：传统加载无样式去重机制，多次加载重复插入样式节点，无法追踪注入历史。本发明点通过维护已注入样式标识符集合，以组件统一资源定位符为唯一标识进行注入前去重检测，实现了样式级别的一次性注入与自动去重，节约了重复样式注入造成的文档头部空间和浏览器样式计算开销。

[0074] 本公开的上述各个实施例具有如下有益效果：通过本公开的一些实施例的基于脚本模式分流的文件动态加载方法，可以实现存量环境下的视图组件按需动态加载，以此节约构建与架构改造的时间成本。具体来说，造成存量环境下视图组件难以按需动态加载、构建依赖繁琐、架构改造成本高的原因在于：传统框架不兼容视图组件加载模式，缺乏脚本模式分流机制，需整体改造架构且构建流程冗余。基于此，本公开的一些实施例的基于脚本模式分流的文件动态加载方法，首先，响应于接收到目标单文件组件的统一资源定位符，基于上述统一资源定位符发起异步网络请求，以获取组件源码。通过地址发起异步请求以获取组件源码，实现浏览器端远程按需拉取组件原始资源，无需提前编译打包，支持组件动态远程加载部署。然后，对上述组件源码进行正则匹配与拆解处理，以生成独立的模板块内容、脚本块内容和样式块内容。通过正则匹配拆解组件源码，分离出模板、脚本、样式独立内容，实现结构化拆分，为后续分模块解析与分流处理提供基础数据。再然后，对上述脚本块内容进行模式特征扫描处理，以生成分流标记。对脚本内容进行特征扫描生成分流标记，精准识别脚本运行模式，为后续分模式差异化解析处理提供判定依据，提升适配性。其次，针对上述分流标记，执行以下组件配置对象生成步骤：响应于上述分流标记表征第一模式，对上述脚本块内容进行公共模块定义包装与异步加载器注册处理，以生成对应的组件配置对象。将脚本块内容包装为公共模块定义代码段，以统一资源定位符作为模块标识符动态注册，再通过模块加载器的使用接口异步加载该虚拟模块，使原有命令式模块定义写法的组件能够在运行时被按需加载，同时将对模块加载器的回调封装为承诺对象，实现异步流程的统一链式调用，便于与网络请求等其他承诺化接口组合。响应于上述分流标记表征第二模式，对上述脚本块内容进行模块导出语法转换与安全执行处理，以生成对应的组件配置对象。将脚本块中的默认导出语句替换为模块导出赋值语句，在受控的隔离执行环境中运行转换后的代码，并从模块导出变量中读取组件配置对象，使更接近单文件组件编写习惯的脚本无需额外包装即可直接执行，同时通过沙箱隔离避免全局命名空间污染和变量冲突，保证多组件并行加载时的安全性。再次，基于上述模板块内容与对应的组件配置对象进行选项合并与组件构造器生成处理，以生成可实例化的组件构造器。将模板内容与组件配置合并生成组件构造器，整合视图与逻辑配置，形成可直接实例化的标准组件，保障组件正常渲染运行。最后，基于上述样式块内容，执行动态样式标签创建与文档注入处理，以完成上述目标单文件组件的加载。对样式内容创建标签并注入文档，实现样式动态挂载生效，同时规避样式重复加载与全局污染，完成整套组件完整加载启用。

[0075] 进一步参考图2，作为对上述各图所示方法的实现，本公开提供了一种基于脚本模式分流的文件动态加载装置的一些实施例，这些装置实施例与图1所示的那些方法实施例相对应，该基于脚本模式分流的文件动态加载装置具体可以应用于各种电子设备中。

[0076] 如图2所示，一种基于脚本模式分流的文件动态加载装置200包括：获取单元201、匹配与拆解单元202、生成单元203、第一执行单元204、处理单元205和第二执行单元206。其中，获取单元201被配置成：响应于接收到目标单文件组件的统一资源定位符，基于上述统一资源定位符发起异步网络请求，以获取组件源码。匹配与拆解单元202被配置成：对上述组件源码进行正则匹配与拆解处理，以生成独立的模板块内容、脚本块内容和样式块内容。生成单元203被配置成：对上述脚本块内容进行模式特征扫描处理，以生成分流标记。第一执行单元204被配置成：针对上述分流标记，执行以下组件配置对象生成步骤：响应于上述分流标记表征第一模式，对上述脚本块内容进行公共模块定义包装与异步加载器注册处理，以生成对应的组件配置对象；响应于上述分流标记表征第二模式，对上述脚本块内容进行模块导出语法转换与安全执行处理，以生成对应的组件配置对象。处理单元205被配置成：基于上述模板块内容与对应的组件配置对象进行选项合并与组件构造器生成处理，以生成可实例化的组件构造器。第二执行单元206被配置成：基于上述样式块内容，执行动态样式标签创建与文档注入处理，以完成上述目标单文件组件的加载。

[0077] 可以理解的是，该基于脚本模式分流的文件动态加载装置200中记载的诸单元与参考图1描述的方法中的各个步骤相对应。由此，上文针对方法描述的操作、特征以及产生的有益效果同样适用于基于脚本模式分流的文件动态加载装置200及其中包含的单元，在此不再赘述。

[0078] 下面参考图3，其示出了适于用来实现本公开的一些实施例的电子设备（例如，电子设备）300的结构示意图。图3示出的电子设备仅仅是一个示例，不应对本公开的实施例的功能和使用范围带来任何限制。

[0079] 如图3所示，电子设备300可以包括处理装置（例如中央处理器、图形处理器等）301，其可以根据存储在只读存储器（ROM）302中的程序或者从存储装置308加载到随机访问存储器（RAM）303中的程序而执行各种适当的动作和处理。在RAM 303中，还存储有电子设备300操作所需的各种程序和数据。处理装置301、ROM 302以及RAM 303通过总线304彼此相连。输入 / 输出（I / O）接口305也连接至总线304。

[0080] 通常，以下装置可以连接至I / O接口305：包括例如触摸屏、触摸板、键盘、鼠标、摄像头、麦克风、加速度计、陀螺仪等的输入装置306；包括例如液晶显示器（LCD）、扬声器、振动器等的输出装置307；包括例如磁带、硬盘等的存储装置308；以及通信装置309。通信装置309可以允许电子设备300与其他设备进行无线或有线通信以交换数据。虽然图3示出了具有各种装置的电子设备300，但是应理解的是，并不要求实施或具备所有示出的装置。可以替代地实施或具备更多或更少的装置。图3中示出的每个方框可以代表一个装置，也可以根据需要代表多个装置。

[0081] 特别地，根据本公开的一些实施例，上文参考流程图描述的过程可以被实现为计算机软件程序。例如，本公开的一些实施例包括一种计算机程序产品，其包括承载在计算机可读介质上的计算机程序，该计算机程序包含用于执行流程图所示的方法的程序代码。在这样的一些实施例中，该计算机程序可以通过通信装置309从网络上被下载和安装，或者从存储装置308被安装，或者从ROM 302被安装。在该计算机程序被处理装置301执行时，执行本公开的一些实施例的方法中限定的上述功能。

[0082] 需要说明的是，本公开的一些实施例上述的计算机可读介质可以是计算机可读信号介质或者计算机可读存储介质或者是上述两者的任意组合。计算机可读存储介质例如可以是但不限于电、磁、光、电磁、红外线、或半导体的系统、装置或器件，或者任意以上的组合。计算机可读存储介质的更具体的例子可以包括但不限于：具有一个或多个导线的电连接、便携式计算机磁盘、硬盘、随机访问存储器（RAM）、只读存储器（ROM）、可擦式可编程只读存储器（EPROM或闪存）、光纤、便携式紧凑磁盘只读存储器（CD-ROM）、光存储器件、磁存储器件、或者上述的任意合适的组合。在本公开的一些实施例中，计算机可读存储介质可以是任何包含或存储程序的有形介质，该程序可以被指令执行系统、装置或者器件使用或者与其结合使用。而在本公开的一些实施例中，计算机可读信号介质可以包括在基带中或者作为载波一部分传播的数据信号，其中承载了计算机可读的程序代码。这种传播的数据信号可以采用多种形式，包括但不限于电磁信号、光信号或上述的任意合适的组合。计算机可读信号介质还可以是计算机可读存储介质以外的任何计算机可读介质，该计算机可读信号介质可以发送、传播或者传输用于由指令执行系统、装置或者器件使用或者与其结合使用的程序。计算机可读介质上包含的程序代码可以用任何适当的介质传输，包括但不限于：电线、光缆、RF（射频）等等，或者上述的任意合适的组合。

[0083] 在一些实施方式中，客户端、服务器可以利用诸如HTTP（HyperText TransferProtocol，超文本传输协议）之类的任何当前已知或未来研发的网络协议进行通信，并且可以与任意形式或介质的数字数据通信（例如，通信网络）互连。通信网络的示例包括局域网（"LAN”），广域网（"WAN”），网际网（例如，互联网）以及端对端网络（例如，ad hoc端对端网络），以及任何当前已知或未来研发的网络。

[0084] 上述计算机可读介质可以是上述电子设备中所包含的；也可以是单独存在，而未装配入该电子设备中。上述计算机可读介质承载有一个或者多个程序，当上述一个或者多个程序被该电子设备执行时，使得该电子设备：响应于接收到目标单文件组件的统一资源定位符，基于上述统一资源定位符发起异步网络请求，以获取组件源码；对上述组件源码进行正则匹配与拆解处理，以生成独立的模板块内容、脚本块内容和样式块内容；对上述脚本块内容进行模式特征扫描处理，以生成分流标记；针对上述分流标记，执行以下组件配置对象生成步骤：响应于上述分流标记表征第一模式，对上述脚本块内容进行公共模块定义包装与异步加载器注册处理，以生成对应的组件配置对象；响应于上述分流标记表征第二模式，对上述脚本块内容进行模块导出语法转换与安全执行处理，以生成对应的组件配置对象；基于上述模板块内容与对应的组件配置对象进行选项合并与组件构造器生成处理，以生成可实例化的组件构造器；基于上述样式块内容，执行动态样式标签创建与文档注入处理，以完成上述目标单文件组件的加载。

[0085] 可以以一种或多种程序设计语言或其组合来编写用于执行本公开的一些实施例的操作的计算机程序代码，上述程序设计语言包括面向对象的程序设计语言—诸如Java、Smalltalk、C++，还包括常规的过程式程序设计语言—诸如"C”语言或类似的程序设计语言。程序代码可以完全地在用户计算机上执行、部分地在用户计算机上执行、作为一个独立的软件包执行、部分在用户计算机上部分在远程计算机上执行、或者完全在远程计算机或服务器上执行。在涉及远程计算机的情形中，远程计算机可以通过任意种类的网络——包括局域网（LAN）或广域网（WAN）——连接到用户计算机，或者，可以连接到外部计算机（例如利用因特网服务提供商来通过因特网连接）。

[0086] 附图中的流程图和框图，图示了按照本公开各种实施例的系统、方法和计算机程序产品的可能实现的体系架构、功能和操作。在这点上，流程图或框图中的每个方框可以代表一个模块、程序段、或代码的一部分，该模块、程序段、或代码的一部分包含一个或多个用于实现规定的逻辑功能的可执行指令。也应当注意，在有些作为替换的实现中，方框中所标注的功能也可以以不同于附图中所标注的顺序发生。例如，两个接连地表示的方框实际上可以基本并行地执行，它们有时也可以按相反的顺序执行，这依所涉及的功能而定。也要注意的是，框图和 / 或流程图中的每个方框、以及框图和 / 或流程图中的方框的组合，可以用执行规定的功能或操作的专用的基于硬件的系统来实现，或者可以用专用硬件与计算机指令的组合来实现。

[0087] 描述于本公开的一些实施例中的单元可以通过软件的方式实现，也可以通过硬件的方式来实现。所描述的单元也可以设置在处理器中，例如，可以描述为：一种处理器包括获取单元、匹配与拆解单元、生成单元、第一执行单元、处理单元和第二执行单元。其中，这些单元的名称在某种情况下并不构成对该单元本身的限定，例如，获取单元还可以被描述为"响应于接收到目标单文件组件的统一资源定位符，基于上述统一资源定位符发起异步网络请求，以获取组件源码的单元”。

[0088] 本文中以上描述的功能可以至少部分地由一个或多个硬件逻辑部件来执行。例如，非限制性地，可以使用的示范类型的硬件逻辑部件包括：现场可编程门阵列（FPGA）、专用集成电路（ASIC）、专用标准产品（ASSP）、片上系统（SOC）、复杂可编程逻辑设备（CPLD）等等。

[0089] 以上描述仅为本公开的一些较佳实施例以及对所运用技术原理的说明。本领域技术人员应当理解，本公开的实施例中所涉及的发明范围，并不限于上述技术特征的特定组合而成的技术方案，同时也应涵盖在不脱离上述发明构思的情况下，由上述技术特征或其等同特征进行任意组合而形成的其它技术方案。例如上述特征与本公开的实施例中公开的（但不限于）具有类似功能的技术特征进行互相替换而形成的技术方案。< / script>

Claims

1. A method for dynamic file loading based on script-based splitting, characterized in that, include: In response to receiving the Uniform Resource Locator (URL) of the target single-file component, an asynchronous network request is initiated based on the URL to obtain the component's source code; The source code of the component is subjected to regular expression matching and decomposition to generate independent template block content, script block content and style block content; The script block content is subjected to pattern feature scanning processing to generate a traffic splitting marker; For the aforementioned traffic splitting marker, perform the following component configuration object generation steps: In response to the first mode represented by the diversion mark, the script block content is wrapped with a common module definition and registered with an asynchronous loader to generate a corresponding component configuration object; In response to the second mode represented by the diversion mark, the content of the script block is subjected to module export syntax conversion and secure execution processing to generate the corresponding component configuration object; Based on the template block content and the corresponding component configuration object, options are merged and component constructors are generated to produce an instantiable component constructor. Based on the content of the style block, dynamic style tag creation and document injection processing are performed to complete the loading of the target single-file component.

2. The method according to claim 1, characterized in that, The step of responding to receiving the Uniform Resource Locator (URL) of the target single-file component and initiating an asynchronous network request based on the URL to obtain the component's source code includes: In response to receiving the Uniform Resource Locator (URL) of the target single-file component, the browser's crawling interface is invoked to initiate a Hypertext Transfer Protocol (HTTP) request using the URL as the request address, and a response object is obtained. The response object is processed to convert its text format, thereby generating text-formatted component source code.

3. The method according to claim 1, characterized in that, The process of performing regular expression matching and decomposition on the component source code to generate independent template block content, script block content, and style block content includes: Based on the preset template block regular expression, the component source code is matched and extracted to generate template block content; Based on the preset script block regular expression, the source code of the component is matched and extracted to generate script block content; Based on the preset style block regular expression, the component source code is matched and extracted to generate style block content.

4. The method according to claim 1, characterized in that, The step of performing pattern feature scanning processing on the script block content to generate a traffic splitting marker includes: Based on a preset marker string, the content of the script block is scanned and detected to generate pattern feature detection results; In response to the pattern feature detection result indicating the presence of the preset marker string at a preset position, a split marker representing the second pattern is generated; In response to the pattern feature detection result indicating that the preset tag string does not exist at the preset position, a diversion tag representing the first pattern is generated.

5. The method according to claim 1, characterized in that, In response to the second mode represented by the diversion marker, the script block content undergoes module export syntax conversion and secure execution processing to generate a corresponding component configuration object, including: The script block content is scanned and located using default export statements to generate the location information of the default export statements. Based on the location information, the default export statement is replaced with a module export assignment statement to generate the converted script code; By creating a controlled script execution environment, isolated execution contexts are generated; The transformed script code is executed in the isolated execution context to generate an execution result; The module exported variables in the execution result are read and processed to generate a component configuration object.

6. A file dynamic loading device based on script-based mode splitting, characterized in that, include: The acquisition unit is configured to, in response to receiving a Uniform Resource Locator (URL) for a target single-file component, initiate an asynchronous network request based on the URL to acquire the component's source code. The matching and decomposition unit is configured to perform regular expression matching and decomposition processing on the component source code to generate independent template block content, script block content and style block content; The generation unit is configured to perform pattern feature scanning processing on the content of the script block to generate a split marker; The first execution unit is configured to perform the following component configuration object generation steps for the traffic splitting marker: In response to the first mode represented by the diversion mark, the script block content is wrapped with a common module definition and registered with an asynchronous loader to generate a corresponding component configuration object; In response to the second mode represented by the diversion mark, the content of the script block is subjected to module export syntax conversion and secure execution processing to generate the corresponding component configuration object; The processing unit is configured to perform option merging and component constructor generation processing based on the template block content and the corresponding component configuration object to generate an instantiable component constructor. The second execution unit is configured to perform dynamic style tag creation and document injection processing based on the style block content in order to complete the loading of the target single-file component.

7. An electronic device, characterized in that, include: One or more processors; Storage device, on which one or more programs are stored, When the one or more programs are executed by the one or more processors, the one or more processors implement the method as described in any one of claims 1-5.

8. A computer-readable medium having a computer program stored thereon, characterized in that, When the program is executed by the processor, it implements the method as described in any one of claims 1-5.

Images