Lightweight real-time development and debugging methods, frameworks, devices, and readable storage media for front-end fragmented file resources.

Abstract

This invention proposes a lightweight real-time development and debugging method, framework, device, and readable storage medium for front-end fragmented file resources, belonging to the field of front-end development and debugging technology. By constructing a development and debugging framework including a main entry page, configuration files, and dependency libraries, and based on a hot reload mechanism, it achieves asynchronous loading, dynamic merging, and real-time previewing of front-end fragmented file resources. Specifically, the framework defines the path, type, and lifecycle hooks of fragmented files through configuration files; dependency libraries complete asynchronous file loading, DOM parsing, and mounting; and a hot reload tool monitors file modifications and automatically refreshes the preview page, eliminating the need for manual file merging or splitting, and supporting cross-platform and remote operation. This invention features agile response, lightweight efficiency, ease of use, and flexible extensibility, effectively improving the development and debugging efficiency of front-end fragmented file resources, and is suitable for scenarios such as mini-program page fragments, HTML modules, and user scripts.

Description

Technical Field

[0001] This invention relates to the field of computer software technology, specifically to web front-end development tools and real-time debugging technology, which are particularly suitable for the development and debugging of front-end fragmented file resources (such as page fragments and code fragments). Background Technology

[0002] In the process of front-end development, there are a large number of "sporadic front-end file resources", including but not limited to: individual page structure files (such as the page files index.wxml, index.js, etc. of WeChat / Alipay / Douyin mini programs), code snippet files (such as HTML rich text modules, UserScripts, code snippets in online code editors, custom development snippets, etc.). These files usually only contain a part of the front-end tag structure, rather than a complete HTML page.

[0003] Currently, the development and debugging of the aforementioned scattered front-end file resources mainly rely on the following methods:

[0004] 1. Purely manual operation: It requires manually creating a complete HTML file, repeatedly copying and pasting fragmented file content into the HTML file, saving and refreshing the browser preview. When making modifications, the above steps must be repeated, which is extremely inefficient and prone to errors.

[0005] 2. Semi-automated tools / command preview: Online code editors (codesandbox.io, etc.) rely on the network, which poses service risks and privacy issues, and require manual synchronization of local and online code; local tools (such as the LiveServer plugin for VS Code) require manual integration of scattered file content into complete HTML, cannot respond automatically throughout the entire process, and are highly dependent on the environment and system.

[0006] 3. Local Composition-Preview-Split: First, use tools to merge the scattered files into a complete HTML preview, then debug and split it back into the original format. This process is cumbersome and can easily generate redundant cached files.

[0007] 4. Build your own real-time monitoring service: If you build a service based on Python, Node.js or Nginx, you need to invest a lot of manpower, time and hardware costs, and the maintenance is complicated and the scalability is poor.

[0008] 5. Integrated Development Environment (IDE): Such as a dedicated IDE for mini-programs, which is bound to a specific platform, has poor portability, high resource consumption, and cannot be deployed across platforms.

[0009] The aforementioned existing technologies suffer from problems such as low efficiency, reliance on manual operation, redundant processes, high costs, and poor compatibility, making it difficult to meet the needs of rapid development and real-time debugging of fragmented front-end file resources. Summary of the Invention

[0010] This invention provides a lightweight real-time development and debugging method, framework, device, and readable storage medium for front-end scattered file resources. It addresses the common problems in existing technologies for developing and debugging front-end scattered file resources, such as low efficiency, reliance on manual operation or specific environments, cumbersome processes, high costs, and poor compatibility and scalability, which prevent the achievement of lightweight, real-time, and automated development and debugging.

[0011] The core technology of this invention is based on the hot reload function of the VS Code Live Server plugin. By building a development and debugging framework (DDF), it integrates the scattered front-end file resources into a complete page at runtime using asynchronous loading and dynamic merging technology, realizing real-time development and debugging without the need for manual merging or splitting of files, and supporting cross-platform and remote operation.

[0012] In a first aspect, the present invention provides a lightweight real-time development and debugging method for front-end fragmented file resources, the method comprising the following steps:

[0013] Build a local directory structure, including a development and debugging framework directory and a development and debugging project directory. The development and debugging framework directory includes the main entry page file and configuration files, while the development and debugging project directory includes miscellaneous file resources.

[0014] Modify the configuration file, which includes a two-dimensional array structure containing the paths and types of scattered front-end file resources;

[0015] Start the main entry page file, use the hot reload plugin to start the local server, and load the main entry page file in the browser;

[0016] Parse and render the main entry page file, and process the tags and emulations according to the standard HTML execution flow;

[0017] Load the configuration file asynchronously and initialize settings through concurrent asynchronous operations, including asynchronously loading the configuration file and waiting for the DOM to finish rendering;

[0018] Global storage initialization data, including scattered file resource data extracted from configuration files;

[0019] Asynchronously load scattered file resources in groups, and load file content in groups according to a two-dimensional array structure;

[0020] Read the contents of scattered file resources and parse them into DOM nodes according to their type;

[0021] The parsed DOM nodes are mounted to the corresponding tag modules of the main entry page file according to their type, so as to dynamically merge them into a complete page;

[0022] Use the hot reload plugin to monitor file changes in real time and automatically refresh the browser after saving for real-time preview and debugging.

[0023] Furthermore, the configuration file also includes an array of hook events to simulate page lifecycle events, including creation, loading, and ready events; when parsing and mounting scattered file resources, hook event code is injected into script-type resources to ensure event responsiveness.

[0024] Furthermore, the types of scattered file resources include style types, header types, body types, script types, and complete HTML types;

[0025] Type-based parsing and mounting include: for header and body types, using a DOM parser to parse the text content into DOM objects; for style types, creating text nodes as style sheets; and for script types, directly assigning inline scripts and injecting event code.

[0026] Furthermore, asynchronous group loading is implemented using a file loading module, which supports loading files sequentially in groups and provides callbacks when each group is completed, all groups are completed, or an error occurs, supporting error interruption or continued loading.

[0027] Furthermore, it also includes setting pre-runtime scripts and post-runtime scripts in the tags of the main entry page file for framework initialization and destruction operations, including global variable settings, debugging tool references, and page unload event listeners.

[0028] Secondly, this invention provides a lightweight real-time development and debugging framework for fragmented front-end file resources, including:

[0029] The directory structure module is used to build a local directory that includes a development and debugging framework directory and a development and debugging project directory. The development and debugging framework directory includes the main entry page file and configuration files, while the development and debugging project directory includes miscellaneous file resources.

[0030] The configuration module is used to modify the configuration file, which includes a two-dimensional array structure of the paths and types of scattered front-end file resources;

[0031] The startup module is used to launch the main entry page file, start the local server using the hot reload plugin, and load the main entry page file in the browser.

[0032] The parsing and rendering module is used to parse and render the main entry page file, and process tags and labels according to the standard HTML execution flow;

[0033] The asynchronous initialization module is used to asynchronously load configuration files and initialize settings through concurrent asynchronous operations, including asynchronously loading configuration files and waiting for DOM rendering to complete.

[0034] The data storage module is used to globally store initialization data, including scattered file resource data extracted from configuration files;

[0035] The file loading module is used to asynchronously load scattered file resources in groups, and load file content in groups according to a two-dimensional array structure.

[0036] The resource reading module is used to read the content of scattered file resources and parse them into DOM nodes according to their type;

[0037] The mounting module is used to mount the parsed DOM nodes to the corresponding tag modules of the main entry page file according to their type, so as to dynamically merge them into a complete page;

[0038] The hot reload module is used to monitor file changes in real time and automatically refresh the browser for real-time preview and debugging after saving;

[0039] Among them, the lightweight real-time development and debugging framework supports cross-platform deployment and remote debugging, and enables multi-terminal operation through integrated debugging tools.

[0040] Furthermore, it also includes a hook event module, which is used to set an array of hook events in the configuration file, simulate page lifecycle events, and inject event code when mounting script type resources.

[0041] Furthermore, it also includes public library modules, including a log processing module, an interface request module, a file operation module, and a node element operation module, to support asynchronous loading, DOM manipulation, and log management.

[0042] Thirdly, the present invention provides an electronic device including a memory and a processor, wherein the memory stores a computer program and the processor is configured to run the computer program to execute the aforementioned lightweight real-time development and debugging method for front-end fragmented file resources.

[0043] Fourthly, the present invention provides a readable storage medium storing a computer program, the computer program including program code for controlling a process to execute the process, the process including a lightweight real-time development and debugging method based on the aforementioned front-end fragmented file resources.

[0044] The main contributions and innovations of this invention are as follows:

[0045] 1. Agile Response: Inheriting the Live Server hot reload function, local operation has no network latency, and file modifications can be previewed in real time, improving development efficiency.

[0046] 2. Lightweight and efficient: It does not rely on large packaging tools or complex compilation processes, starts up quickly, consumes few resources, requires no redundant configuration, and is easy to integrate into existing projects.

[0047] 3. Remote and Cross-Platform Operation: Supports remote development and debugging across multiple devices (mobile phones, computers, etc.) via LAN, compatible with different operating systems and device types. Beyond simply providing remote preview, it expands to include remote development and debugging: debugging tools such as Google Chrome DevTools, Tencent vConsole, and Eruda can be referenced within the framework. This comprehensive functionality greatly improves work efficiency.

[0048] 4. Simple and easy to use: No need to modify editor or plugin settings, one-click start, and scattered files can be used directly after debugging without additional splitting operations.

[0049] 5. Flexible Expansion: Supports custom configurations (such as lifecycle hooks), integration with third-party debugging tools, compatibility with various types of scattered files (including non-standard file extensions), and solves the problem of hidden files not being able to be hot-reloaded.

[0050] 6. Low cost: Reuse existing tools (VS Code + Live Server), eliminating the need to build your own service and reducing development and maintenance costs.

[0051] Details of one or more embodiments of the present invention are set forth in the following drawings and description, so that other features, objects and advantages of the invention will be more readily understood. Attached Figure Description

[0052] The accompanying drawings, which are included to provide a further understanding of the invention and form part of this invention, illustrate exemplary embodiments of the invention and are used to explain the invention, but do not constitute an undue limitation of the invention. In the drawings:

[0053] Figure 1 This is a flowchart of a lightweight real-time development and debugging method for front-end fragmented file resources according to an embodiment of the present invention;

[0054] Figure 2 This is a directory tree structure diagram according to an embodiment of the present invention;

[0055] Figure 3 This is a schematic diagram of the hardware structure of an electronic device according to an embodiment of the present invention. Detailed Implementation

[0056] Exemplary embodiments will now be described in detail, examples of which are illustrated in the accompanying drawings. When the following description relates to the drawings, unless otherwise indicated, the same numerals in different drawings denote the same or similar elements. The embodiments described in the following exemplary embodiments do not represent all embodiments consistent with one or more embodiments of this specification. Rather, they are merely examples of apparatuses and methods consistent with some aspects of one or more embodiments of this specification as detailed in the appended claims.

[0057] It should be noted that the steps of the corresponding methods are not necessarily performed in the order shown and described in this specification in other embodiments. In some other embodiments, the methods may include more or fewer steps than described in this specification. Furthermore, a single step described in this specification may be broken down into multiple steps in other embodiments; and multiple steps described in this specification may be combined into a single step in other embodiments.

[0058] Existing technologies generally suffer from drawbacks such as low efficiency, cumbersome operation, strong environment dependence, limited scalability, or huge resource consumption when dealing with the development and debugging of scattered front-end file resources. They cannot provide a lightweight, efficient, and fully automated real-time development and debugging experience.

[0059] Based on this, the present invention addresses the problems of existing technologies by utilizing the hot reload function of the Live Server plugin in the Visual Studio Code editor (the core function of the Live Server plugin is hot reload, but this plugin only supports complete single-page web pages (HTML) and their related files (CSS, JavaScript), does not support scattered front-end file resources, does not support code files of other formats and other suffixes, and does not support hot reload of hidden files, i.e., hidden files / folders with the "." prefix cannot be automatically refreshed after modification), and combining the asynchronous loading and splicing characteristics of native HTML pages to dynamically merge scattered front-end file resources to achieve lightweight real-time development and debugging out of the box.

[0060] Example 1: Real-time development and debugging of custom fragmented development files

[0061] This embodiment uses a custom, fragmented development snippet file as an example to illustrate the specific implementation process of a lightweight real-time development and debugging framework for front-end fragmented file resources according to the present invention. Assume the original file resources include four fragmented code snippet files:

[0062] style.css (containing CSS style code such as " / * Similar to userscripts like Tampermonkey, Greasemonkey, etc. * / .btn - button1 {display: block; color:yellow;}");

[0063] script.js (containing JavaScript code such as " / / Similar to userscripts like Tampermonkey, Greasemonkey, etc. console.log(\"Here starts to load - main\", window.DDF);");

[0064] head.html (containing tag content such as " <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> ");

[0065] body.html (containing tag content such as "Hello World!").

[0066] Step 1, Build the local directory structure:

[0067] Create a blank folder on the local device as the root directory (path " / "), which also serves as the root directory when the Live Server plugin runs.

[0068] Copy the Development & Debug Framework (DDF for short) to the root directory, with the path " / _DDF". This framework directory includes:

[0069] The app.html file (path / _DDF / app.html): As the main entry when the project runs, its content is a standard HTML page template, including <>, <>, and <> tags, and contains <script type="module" id="ddf-runtime">标签，用于承载开发调试项目的运行时核心逻辑（如导入依赖库、异步加载零散文件资源、解析并动态合并DOM节点等）。

[0070] app.json文件（路径 / _DDF / config / app.json）：用于自定义配置，初始内容包括框架名称、版本、图标、环境和pages二维数组。

[0071] library目录（路径 / _DDF / library）：包含公共模块，如console.js（日志单例类）、api.js（接口请求单例类）、file.js（文件单例类）和node.js（节点元素操作单例类）。

[0072] 在根目录下新建 / pages目录作为开发调试项目目录，用于放置零散文件资源。新建子目录 / snippet（路径 / pages / snippet），将上述四个文件放置其中： / pages / snippet / style.css、 / pages / snippet / script.js、 / pages / snippet / head.html、 / pages / snippet / body.html。

[0073] 可选：在根目录下新建 / public目录，放置程序图标favicon.ico（路径 / public / favicon.ico）。

[0074] 如此，得到的目录树状结构如图2所示。

[0075] 步骤2、修改配置文件：

[0076] 使用Visual Studio Code编辑器打开 / _DDF / config / app.json文件。

[0077] 修改"icon"字段的"path"为" / public / favicon.ico"。

[0078] 修改"pages"二维数组为：

[0079] "pages": [[

[0081] { "type": "style", "path": " / pages / snippet / style.css"},

[0082] { "type": "head", "path": " / pages / snippet / head.html"},

[0083] {

[0084] "type": "body",

[0085] "path": " / pages / snippet / body.html",

[0086] "hooks": [

[0087] { "name": "OnCreate", "message": "OnStructureCreate!"},

[0088] { "name": "OnLoad", "message": "OnDOMContentLoaded!"},

[0089] { "name": "OnReady", "message": "OnWindowLoad!"}]

[0091] },

[0092] { "type": "script", "path": " / pages / snippet / script.js"}]]

[0095] 保存文件。其中，type字段根据文件内容判断：style对应CSS样式，head对应标签内容，body对应标签内容，script对应JavaScript代码；hooks数组模拟生命周期事件。

[0096] 步骤3、启动框架程序：

[0097] 安装Visual Studio Code编辑器，并通过扩展市场安装Live Server插件。

[0098] 使用Visual Studio Code打开根目录下的 / _DDF / app.html文件。

[0099] 单击编辑器状态栏上的"Go Live”按钮，或右键选择"Open with Live Server”，启动本地开发服务器。浏览器自动打开app.html页面。

[0100] 步骤4、解析并渲染主入口页面：

[0101] 浏览器按照标准HTML执行流程解析app.html：先处理标签（设置字符编码、视口自适应等），然后处理标签（渲染节点元素）。

[0102] 在标签内，执行<script type="module" id="ddf-runtime">标签内的脚本：导入公共库（import CONSOLE from ". / library / console.js"; 等），并发异步初始化（Promise.all处理API请求、加载app.json、DOMContentLoaded事件）。

[0103] 步骤5、全局数据初始化存储：

[0104] 从异步加载的app.json中提取数据，存储到window.DDF对象：window.DDF.Pages= CONFIGS.pages; 等。

[0105] 存储DOM对象：window.DDF.Document = DOMCUMENT;。

[0106] 步骤6、页面初始化渲染：

[0107] 使用NODE公共库设置标签：NODE.SetHead({ document: window.DDF.Document});。

[0108] 设置标题：NODE.SetTitle({ document: window.DDF.Document, name:window.DDF.AppName});。

[0109] 设置图标：NODE.SetFavicon({ document: window.DDF.Document, path:window.DDF.AppIcon.path, type: window.DDF.AppIcon.type});。

[0110] 添加注释：NODE.SetComment({ document: window.DDF.Document, before: "Injected by DDF", after: Injected by ${window.DDF.AppName}});。

[0111] 步骤7、异步按组加载零散文件资源：

[0112] 使用FILE.LoadGroups({ groups: window.DDF.Pages, ...})按pages数组分组异步加载文件内容。

[0113] 每组加载完成后回调处理结果，添加"data"字段存储文本内容（如style.css的"data"为CSS代码）。

[0114] 步骤8、读取、解析与挂载文件资源：

[0115] 读取results数组中的"data"字段。

[0116] 按type解析：

[0117] 对于style类型：NODE.CreateStyle({ document: window.DDF.Document, data:presult.data}); 创建<style>标签并挂载到。

[0118] 对于head类型：NODE.CreateHead({ document: window.DDF.Document, data:presult.data}); 解析DOM并挂载<meta> / <title>等，按顺序处理优先级（如<title>置顶）。

[0119] 对于body类型：NODE.CreateBody({ document: window.DDF.Document, data:presult.data, hooks: presult.hooks}); 解析DOM并挂载到，注入hooks事件。

[0120] 对于script类型：NODE.CreateScript({ document: window.DDF.Document,data: presult.data, hooks: presult.hooks}); 注入IIFE代码和UUID，确保钩子响应（如OnCreate事件输出"OnStructureCreate!"）。

[0121] 步骤9、开发与调试：

[0122] 修改 / pages / snippet下的文件（如在body.html添加新），保存后Live Server热重载自动刷新浏览器，实时预览变化。

[0123] 使用浏览器控制台查看日志（通过CONSOLE.Log），或集成vConsole进行调试。

[0124] 支持远程操作：在局域网设备上输入开发机IP+端口访问预览页面。

[0125] 步骤10、完成开发：

[0126] 开发完成后，移除 / _DDF框架目录。最终使用 / pages / snippet下的四个文件，无需拆分或额外处理。

[0127] 本实施例实现了零散文件资源的动态合并和实时调试，响应敏捷、轻量高效。实际测试中，修改保存后浏览器立即刷新，预览效果与完整HTML页面一致，支持跨设备远程调试。

[0128] 实施例二：小程序页面文件的实时开发调试

[0129] 本实施例以微信小程序页面文件为例，说明本发明的另一种实现。假设零散文件资源包括index.wxml（body类型，包含节点元素如）、index.js（script类型，JavaScript代码）和index.wxss（style类型，CSS样式）。

[0130] 步骤1、构建本地目录结构：

[0131] 类似实施例一，创建根目录和 / _DDF框架。

[0132] 新建 / pages / miniprogram目录，放置文件： / pages / miniprogram / index.wxml、 / pages / miniprogram / index.js、 / pages / miniprogram / index.wxss（建议修改后缀为.html / .js / .css以兼容）。

[0133] 步骤2、修改配置文件：

[0134] 在app.json的"pages"数组中设置：

[0135] "pages": [[

[0137] { "type": "style", "path": " / pages / miniprogram / index.wxss"},

[0138] { "type": "body", "path": " / pages / miniprogram / index.wxml"},

[0139] { "type": "script", "path": " / pages / miniprogram / index.js"}]]

[0142] 步骤3、后续步骤：

[0143] 与实施例一相同：启动app.html、异步加载、解析挂载等。

[0144] 修改index.wxml保存后，热重载实时预览小程序页面效果，无需专用IDE。

[0145] 本实施例解决了小程序文件平台绑定的问题，实现跨平台实时调试。

[0146] 通过以上实施例，本发明的技术方案在实际应用中表现出响应敏捷、扩展灵活的优点，可根据不同零散文件类型灵活调整。

[0147] 为了方便理解，以下对本发明的核心属于进行解释说明：

[0148] 1.热重载：自动检测本地文件的改动，达到实时修改、实时刷新、实时预览的技术。其核心特点是实时更新、状态保留（保留应用程序的当前状态，如用户输入、页面导航状态，避免因重启丢失上下文）、快速反馈，它允许开发者在不重新启动整个应用程序的情况下更新代码并立即查看效果，从而避免频繁重启和重新编译整个应用，这样可以极大提升开发效率。

[0149] 2.异步加载：开发中广泛使用的一种不阻塞主线程，通过异步方式加载数据或资源，用以提高用户体验和性能的优化技术。其中异步方式是指在程序发起某个操作后，不需要等待该操作完成就可以继续执行后续的任务，等该操作完成时，再通过回调函数、事件等方式返回执行结果。在前端开发中，它允许浏览器在不阻塞网页渲染的情况下，并行请求数据、下载资源和处理多个任务等，提高了性能的同时，避免了界面卡顿以提升用户交互，还增强了高并发处理能力。

[0150] 3.动态合并：指在程序运行时，使用代码动态地将零散的文件资源合并成一个完整的页面并渲染的技术。此技术遵循"解析”、"比较”、"合并”、"预览”等步骤，再搭配"热重载”技术，可以达到绝佳的实时修改、刷新并预览的过程效果。待程序终止时，内存释放，资源如初，无需再操作文件资源。相对于"静态合并”技术的持久序列化文件资源，"动态合并”技术生成的临时缓存文件相对较少，且更加灵活和智能，不用使用各种命令或操作，减少了手动干预的需求，提高了开发效率。

[0151] 实施例三

[0152] 基于相同的构思，为了更方便理解本发明的实施例过程，本实施例对实施例一的方法进行详细解释：

[0153] 本发明大致流程是借助"Live Server”插件唤起主入口HTML页面，在其<script>标签运行块中通过异步加载各种前端零的散文件资源，初始化设置后再按需求按类型解析成相应的DOM节点挂载至主入口页面对应的标签模块内，从而动态合并成完整的实时预览页面。

[0154] 本发明技术主要使用及运行流程为：

[0155] S0、构建本地目录结构：

[0156] 本发明技术框架主要是前端程序运行时的功能，由于前端页面的系统权限极低，通常是因为前端运行在浏览器环境中，受限于浏览器的安全沙箱机制，故无法执行比如扫描本地目录、读写本地文件等，故需此步骤均需手动操作：先将手动收集前端零散文件资源，再按"S1、修改本地序列化配置文件”步骤来人工识别文件资源内的代码内容的类型，最后按照如图2所示的技术目录树状图手动整理成相应的项目结构。

[0157] S1、修改本地序列化配置文件：

[0158] 可只需修改前端零散文件资源的文件路径。本框架配置文中数据当作全局数据存储和使用。本框架配置文件app.json文件（路径为： / _DDF / config / app.json）支持高度客制化自定义（需修改框架源码，并解析对应内容），其中包含：框架名称（name）、框架版本(version)，以供版本记录和回溯、框架图标（icon）、框架环境（environment），前端零散文件资源的路径的二维文件数组结构等。

[0159] 其中二维文件数组结构（pages[][]）数组是按照一维类型数组(pages[])组成，一维类型数组中包含文件对象数据(page)。将配置文件设计为二维数组，使配置文件更加清晰明了，大致结构如下，可自由增加删减：

[0160] "pages": [[

[0162] { "type": "style", "path": " / pages / snippet / style.css"},

[0163] { "type": "head", "path": " / pages / snippet / head.html"},

[0164] {

[0165] "type": "body",

[0166] "path": " / pages / snippet / body.html",

[0167] "hooks": [

[0168] {"name":"OnCreate","message":"OnStructureCreate!"},

[0169] {"name":"OnLoad","message":"OnDOMContentLoaded!"},

[0170] {"name":"OnReady","message":"OnWindowLoad!"}]

[0172] },

[0173] {

[0174] "type": "script",

[0175] "path": " / pages / snippet / script.js"

[0176] }

[0177] ],

[0178] …]

[0180] 文件对象包含类型（type）、路径(path)、钩子(hooks)等。

[0181] 由于如何判断类型（type）属于前端HTML5开发基础理论知识，现简单描述如下："style - 只包含css样式”"head – 只包含<head>标签或不包含<head>标签但包含其子标签元素，如<meta>、<title>标签等”"body – 只包含<body>标签或不包含<body>标签但包含其子Node Elements节点元素及标签，如、<script>标签等”"script – 只包含JavaScript代码”"html – 完整的html页面，包含<head>、<body>等标签”等数值，此类型对应不同的前端零散文件资源形式，很多文件都可以按类型进行对应：即如果只包含<head>标签页内的文件，本发明当作"head”类型；如果是只包含css样式的文件，本发明当作"style”类型；如果只包含JavaScript代码，则本发明把此文件当作"script”类型等。

[0182] 具体举例形如微信小程序页面index.wxml、index.js、index.wxss，对应的type类型为"body”（只包含了Node Elements节点元素及标签）、"script”"style”。

[0183] 而路径（path）一般写相对于根目录下的绝对路径，即起始于" / ”，而非本机设备上的根目录或本机绝对路径。例如pages目录下的structure2目录内有个style.css文件，此文件路径为" / pages / structure2 / style.css”。

[0184] 钩子（hooks）可模拟并响应正常页面加载事件，如OnCreate、OnLoad、OnReady、OnLeave、OnDestroy等，以便使每个页面都拥有一个完整的生命周期，让前端零散的文件资源在运行时合并之后更加完整，无需额外监听流程事件。

[0185] S2、添加框架主入口页面设置（可选）：

[0186] 相比S1步骤中的修改本地化配置文件，此处主页面中节点设置更加可视化和高效。

[0187] 由于本框架是将一个完整的HTML页面app.html文件（路径为： / _DDF / app.html）作为程序的主入口，因此如图1所示，遵循标准的HTML执行流程，本发明通过对主入口app.html的页面节点元素标签中直接插入框架设置，可以达到更加灵活地自定义化框架。

[0188] 比如在<meta>标签中新增框架字符编码、框架视口自适应、框架浏览器 / 平台兼容等；添加<title>标签内容，可以修改框架名称；在<head>标签内的<script>标签内引用本地自定义或外部通用库、引用第三方调试工具 / 插件 / 模块，如Google Chrome DevTools、Tencent vConsole、Eruda等，更加丰富调试工具；在<body>标签内新增Node Element节点，可以自定义任何界面显示；在<body>标签内的<script>标签内可以新增框架初始化设置、全局变量的存储、资源的预处理；在<body>标签内的<script>标签内可以同步或异步响应程序销毁事件，完善整个开发和调试流程等等。

[0189] 框架设置的权重顺序为：最低为框架的基本设置，其次是框架的配置文件，最后是各个前端零散文件资源的先后加载顺序设置。后面的设置覆盖前面的设置。打个比方，如果设置了框架app.html中<head>内的<title>标签内容，如果再设置了配置文件中的name字段，如果再设置了某些前端零散文件资源中包含<head>标签内的<title>标签内容，那么最后框架标题为最后设置的<title>标签内容。

[0190] S3、启动框架程序：

[0191] 单击一下"Visual Studio Code”编辑器状态栏上的"Go Live”按钮，或在HTML文件上右键选择相应选项即可启动app.html。此时，"Live Server”插件会唤起浏览器，并打开app.html页面。

[0192] S4、解析并渲染框架主入口页面：

[0193] 打开app.html主入口页面后，程序会按照标准的HTML执行流程依次执行：开始解析<head>标签 → 如果包含有<meta>标签则解析并设置字符编码、视口自适应、浏览器 / 平台兼容等，否则跳过 → 如果包含有<title>标签则解析并设置页面标题，否则跳过 → 如果包含有<link>标签则加载本机的图标、外部通用样式、通用库、加载第三方调试工具 / 插件 / 模块，否则跳过 → 如果包含有<script>标签则执行脚本内容，比如全局变量的存储、第三方调试工具 / 插件 / 模块异步加载等，否则跳过 → 如果包含有<style>标签则存储全局样式表，否则跳过 → 完成解析<head>标签 → 开始解析<body>标签 → 如果包含有各种Node Elements节点元素及标签，如<section>、、<button>、<input>等则解析并渲染，否则跳过 → 如果包含额外的<script>标签，则处理框架初始化设置、资源的预处理、第三方调试工具 / 插件 / 模块实例化及其设置、页面的生成与销毁等，否则跳过 → 进入子入口<script type="module" id="ddf-runtime">标签内 →…

[0194] S5、开发调试框架前置运行时（可选）：

[0195] 在app.html主入口页面的<body>标签内，本发明可选地添加一个<script type="module" id="ddf-before">标签，用于"开发调试框架”的前置运行时。

[0196] 在此标<script>签脚本块内，本发明可以增加全局或临时变量、设置框架结构、引用本地自定义或外部通用库、引用第三方调试工具 / 插件 / 模块、资源预加载等。

[0197] 此处单独设置，使框架结构清晰明了，临时数据不会冲突混乱，且会让资源或工具提前加载，亦可操作S2步骤"添加框架主入口页面设置”中已在主入口页面app.html的<body>标签内添加了Node Elements等节点元素，使之增删改查、事件响应等操作。

[0198] 比如，全局引入移动端调试工具vConsole，并对其设置：

[0199] / / 添加 vConsole 调试工具。

[0200] const vConsole = new window.VConsole();

[0201] / / 设置 vConsole 工具显示。

[0202] vConsole.setOption({ theme: 'dark'});

[0203] / / 全局调试按钮显示。

[0204] document.getElementById("id_ddf_button").addEventListener("click", ()=>{

[0205] CONSOLE.Log("点击了My Development&Debug Framework按钮！");

[0206] });

[0207] S6、开发调试框架后置运行时（可选）：

[0208] 在app.html主入口页面的<body>标签内，本发明可选地在上述步骤S5的开发调试框架前置运行时的<script type="module" id="ddf-before">标签之后添加一个<scripttype="module" id="ddf-after">标签，用于"开发调试框架”的后置运行时。

[0209] 在此<script>标签脚本块内，本发明可以监听页面的生成与销毁、页面返回挽留弹窗、音乐播放的停止、计时器的重置等操作，避免内存泄漏，形成一个完整的运行生命周期。

[0210] 比如添加页面卸载和销毁事件：

[0211] / / 监听页面卸载事件。

[0212] window.addEventListener("beforeunload", OnLeave);

[0213] / / 监听页面销毁事件。

[0214] window.addEventListener("unload", OnDestroy);

[0215] / **

[0216] * 生命周期函数—响应页面卸载事件：触发浏览器的离开确认弹窗。

[0217] * /

[0218] function OnLeave(event) {

[0219] console.log("事件已捕获：OnWindowBeforeUnload!", event);

[0220] / / 取消默认行为，添加离开确认弹窗。

[0221] event.preventDefault();

[0222] event.returnValue = "";

[0223] }

[0224] / **

[0225] * 生命周期函数—响应页面销毁事件：可以执行清理任务。

[0226] * /

[0227] function OnDestroy() {

[0228] console.log("事件已捕获：OnWindowUnload!");

[0229] / / 清除动画定时器。

[0230] if (animationTimer != null) {

[0231] clearTimeout(animationTimer);

[0232] animationTimer = null;

[0233] }

[0234] }

[0235] S7、开发调试框架运行时主分支流程（必须）：

[0236] 在app.html主入口页面的<body>标签内，本发明必须添加一个<script type="module" id="ddf-runtime">标签，此处用于"开发调试项目”的运行时的子入口。

[0237] 注意：尽量不在或者少在app.html主入口页面的<body>标签内添加额外的<script>标签，避免执行分支过多，以至于流程混乱，建议只添加一个id为"ddf-runtime"的主分支<script>标签，要么再添加最多两个id为"ddf-before"、id为"ddf-after"的次分支<script>标签。在添加<script>标签时，均启用模块化（ES Modules）功能，在<script>标签内使用type="module"属性来隔离模块代码，不会污染 / 冲突 / 干扰全局作用域、可以导入 / 导出函数 / 变量等、模块默认是延迟执行的（行为类似 defer）、通过 import 声明依赖关系，有助于维护大型项目等优势。最好每个<script>标签内添加唯一id, 除了在浏览器中调试视图上更容易识别和记录，还更方便通过DOM操作方便地索引这个标签元素等优势作用。

[0238] 此<script type="module" id="ddf-runtime">标签必须处于上述步骤S5、开发调试框架前置运行时的<script type="module" id="ddf-before">标签之后（如有步骤S5），处于上述步骤S6的开发调试框架后置运行时的<script type="module" id="ddf-after">标签之前（如有步骤S6）。

[0239] 上述S5、S6步骤为次分支流程，主要处理"开发调试框架”的一些生命周期内框架的可选设置和可选操作，即为可选次分支流程，非本发明技术的主要技术点，不再赘述。

[0240] 故此<script type="module" id="ddf-runtime">标签已为程序主分支流程，相当于重新开辟了"开发调试项目”的运行时的子流程入口，后续流程皆在此<script type="module" id="ddf-runtime">标签内继续执行。

[0241] S8、开发调试框架通用公共库初始化导入：

[0242] 接着本发明在程序主分支流程<script type="module" id="ddf-runtime">标签内，导入"开发调试框架”所需的通用公共库文件。

[0243] 由于遵循ES Modules规则，建议使用import分别进行静态声明 + 异步加载 + 同步执行，导入library目录下的所有文件：

[0244] / / 导入通用库日志单例类CONSOLE。

[0245] import CONSOLE from ". / library / console.js";

[0246] / / 导入通用库接口请求单例类API。

[0247] import API from ". / library / api.js";

[0248] / / 导入通用库文件单例类FILE。

[0249] import FILE from ". / library / file.js";

[0250] / / 导入通用库节点元素操作单例类NODE。

[0251] import NODE from ". / library / node.js";

[0252] S9、开发调试框架并发异步初始化设置：

[0253] 此步骤主要是等待所有并发异步初始化操作完成：包括异步请求数据、异步加载框架配置文件app.json、等待app.html主页面的DOM渲染等一起完成。

[0254] 异步请求用户数据（非必须设置，仅作参考，说明本发明技术框架支持异步接口请求）调用本发明技术框架的通用库libiray中接口请求单例类API.GetUser()方法，基于原生方法await fetch(url)接口异步请求的二次封装，通过返回Promise对象，再解析为json类型的数据，来获取用户的信息，包括用户uid、avatar、nickname等，即let request =API.GetUser()，request为Promise对象。

[0255] 异步加载框架配置文件（必须设置）调用本发明技术框架的通用库libiray中文件单例类FILE.LoadAsync(path, type)方法，基于原生方法await fetch(path)文件异步加载进行的二次封装，根据封装方法中参数type解析并返回不同类型的文本内容，此处通过返回Promise对象，再解析为json类型的文本数据。即let fileloaded = FILE.LoadAsync(path, type)，fileloaded为Promise对象。

[0256] 异步app.html页面的DOM渲染（必须设置）本发明通过监听原生的"DOMContentLoaded”浏览器事件，表示初始 app.html 文档已完全加载并解析完成而无需等待样式表、图片等资源加载后立即响应。接着本发明再通过创建一个新的Promise来将此浏览器事件转为异步操作，具体实现方法如下：

[0257] let domloaded = new Promise((resolve) =>{

[0258] document.addEventListener('DOMContentLoaded', function (event) {

[0259] resolve(event.target);

[0260] });

[0261] })

[0262] 当本发明将上面多个异步操作都转为了Promise之后，可以使用Promise.all来链式调用串联起所有异步操作，即：

[0263] / / 声明临时Promise[]数组。

[0264] let promises = [];

[0265] / / 将上述所有异步操作的promise放入临时Promise[]数组内，串联起来。

[0266] promises.push(request);

[0267] promises.push(fileloaded);

[0268] promises.push(domloaded);

[0269] / / 使用Promise.all来开启异步线程，并返回所有异步操作是否达成。

[0270] Promise

[0271] .all(promises)

[0272] .then(([REQUEST, CONFIGS, DOMCUMENT]) =>{

[0273] / / TODO.

[0274] / / 此处为项目运行时的流程。

[0275] })

[0276] .catch(（error） =>{

[0277] / / 流程中断。

[0278] })

[0279] 现在整个框架流程已至此步骤的Promise.all中的.then成功完成时执行回调函数内，即"项目运行时的流程”处，如果返回.catch则表明整个框架出现了异常，请先排查所有错误，以保证顺利成功执行了.then()回调函数，此为后续正常流程的首要条件。

[0280] S10、开发调试框架全局数据初始化存储：

[0281] 此步骤的全局数据变量存储与S4步骤的"解析并渲染框架主入口页面”中通过app.html中的<head>标签中的<script>标签内，或者<body>标签中的<script>标签内的全局数据变量存储的操作不同，前者是可以存储通过异步加载的app.json的数据结构，方便全局数据文本序列化管理，而后者主要是手动在相应的标签内手动添加全局数据变量，比较零散，不建议。

[0282] 两者存储方式均一样，均使用浏览器提供的全局window对象，在 window 上挂载任意属性或对象来实现全局数据存储。

[0283] 本发明已经通过上一步骤S9的开发调试框架初始化并发异步设置中Promise.all并发处理多个Promise，全部成功异步执行后返回一个数组，其中包含每个Promiseresolve后的结果，返回顺序与传入顺序一致，依次为REQUEST为API.GetUser()返回的数据结果、CONFIGS为FILE.LoadAsync(path, type)返回的数据结果、DOMCUMENT为DOMContentLoaded返回的数据结果等。

[0284] 具体代码详情为：

[0285] / / 右边CONSOLE为导入的公共库日志单例类。

[0286] window.CONSOLE = CONSOLE;

[0287] / / 新建一个框架对象DDF，用于接收app.json中的设置变量。

[0288] window.DDF = {};

[0289] / / 右边REQUEST为从上一步骤异步加载Promise.all中的request返回的后端json数据对象。

[0290] / / 全局存储用户ID。

[0291] window.DDF.UserID = REQUEST.uid;

[0292] / / 全局存储用户头像。

[0293] window.DDF.UserAvatar = REQUEST.avatar;

[0294] / / 全局存储用户昵称。

[0295] window.DDF.UserNickname = REQUEST.nickname;

[0296] / / 右边CONFIGS为从上一步骤异步加载Promise.all中的fileloaded返回的文本数据，即app.json文件中的json数据对象。

[0297] / / 全局存储配置文件中的App名称。

[0298] window.DDF.AppName = CONFIGS.name;

[0299] / / 全局存储配置文件中的App版本。

[0300] window.DDF.AppVersion = CONFIGS.version;

[0301] / / 全局存储配置文件中的App图标。

[0302] window.DDF.AppIcon = CONFIGS.icon;

[0303] / / 全局存储配置文件中的所有前端零散文件资源的数据，二维文件数组结构（pages[][]）。

[0304] window.DDF.Pages = CONFIGS.pages;

[0305] / / 全局存储配置文件中的环境变量，是不是开发者模式。

[0306] window.DDF.IsDevelop = CONFIGS.environment == "develop";

[0307] / / 右边DOMCUMENT为从上一步骤异步加载Promise.all中的domloaded返回的整个主页面DOM对象。

[0308] window.DDF.Document = DOMCUMENT;

[0309] 至此，本发明将异步返回的结果进行了初始化全局数据存储，以供后续流程"开发调试项目”使用，在使用全局数据时直接调用window.DDF.xxx即可。

[0310] S11、开发调试框架页面初始化渲染：

[0311] 经过步骤S10的开发调试框架初始化全局数据存储的步骤，已全局存储了本发明技术框架的配置文件app.json中的设置数据和本框架主入口页面app.html的DOM对象。

[0312] 此步骤中，使用已导入的通用公共库NODE来处理"开发调试框架”的一些页面初始化渲染设置：

[0313] / / 设置页面<head>标签。

[0314] NODE.SetHead({ document: window.DDF.Document});

[0315] / / 将app.json中的name设置为主页面标题。

[0316] NODE.SetTitle({ document: window.DDF.Document, name:window.DDF.AppName});

[0317] / / 将app.json中的icon设置为主页面图标。

[0318] NODE.SetFavicon({ document: window.DDF.Document, path:window.DDF.AppIcon.path, type: window.DDF.AppIcon.type});

[0319] / / 为主页面插入本框架注释信息，使框架页面清晰。

[0320] NODE.SetComment({ document: window.DDF.Document, before: "Injected byDDF", after: `Injected by ${window.DDF.AppName}`});

[0321] 以上NODE通用库中的方法是使用原生JavaScript来添加、修改、删除已获得的主入口页面app.hmtl中DOM元素或属性，即window.DDF.Document。例如以下NODE.SetTitle()方法中，通过查询页面包含的所有的<title>标签，如果包含多个相同的<title>标签，则直接取其第一个，因为此标题渲染只有最顶端的<title>标签有效，并按需求设置其显示权重；如果完全不包含任何<title>标签，则创建新的<title>标签节点元素，将app.json中的name赋值，并挂载至主页面：

[0322] / **

[0323] * @author Candy

[0324] * @time 2024年05月25日

[0325] * @description 设置<title>标签。

[0326] * /

[0327] static SetTitle = function ({ document, name} = {}) {

[0328] let titles = document.head.querySelectorAll(NODE.#ETag.eTitle);

[0329] if (titles.length>0&&!!titles[0]) {

[0330] / / app.html中<title>标签内内容权重>config中的AppName。

[0331] / / 若app.html中<title>标签内没内容，则设置为config中的AppName；有内容则保留app.html中的<title>内容。

[0332] if (!titles[0].textContent) {

[0333] titles[0].textContent = name;

[0334] }

[0335] } else {

[0336] / / 创建新的<title>标签节点元素。

[0337] let title = document.createElement(NODE.#ETag.eTitle);

[0338] / / 将app.json中的name设置至<title>标签。

[0339] title.textContent = name;

[0340] / / 挂载<title>标签节点元素至主页面。

[0341] document.head.appendChild(title);

[0342] }

[0343] };

[0344] 其他诸如NODE.SetHead()、NODE.SetFavicon()、NODE.SetComment()等初始化设置与NODE.SetTitle()实现原理均大同小异。但是有个别需要单独处理，因为步骤S4的解析并渲染框架主入口页面中部分框架设置操作涉及手动处理，本发明需要移除一些人工处理形成的一些误操作，避免显示异常，如在NODE.SetHead()中，需要移除<head>无效标签：无节点换行有空白换行符：

[0345] if (document.head.childNodes.length == 1&&document.head.childNodes[0].data.includes("\n") == true) {

[0346] / / 移除<head>无效标签：无节点换行有空白换行符。

[0347] document.head.remove();

[0348] / / 新增<head>空白标签。

[0349] let head = document.createElement(NODE.#ETag.eHead);

[0350] / / 挂载<head>标签节点元素至主页面。

[0351] document.documentElement.insertBefore(head, document.body);

[0352] }

[0353] 至此，本发明完成了主页面渲染的一些初始化设置。

[0354] S12、开发调试框架文件资源异步按组加载（核心步骤）：

[0355] 经过步骤S10的开发调试框架初始化全局数据存储的步骤，已全局存储了本发明技术框架的配置文件app.json中的所有前端零散文件资源的路径的二维文件数组结构（pages[][]），即window.DDF.Pages。

[0356] 此步骤中，使用已导入的通用公共库FILE.LoadGroups({groups, perCallback,allCallback, errorCallback})来处理"开发调试框架”异步按组加载文件资源。

[0357] 此方法在FILE.LoadAsync()方法上继续扩展而来，实现了按组依次加载文件，并在每组完成、全部完成或出错时分别回调，回调中返回每个文件资源的文本内容数据，且支持是否中断文件加载：若不支持中断加载，即isAbortOnError=true，遇到异步加载错误，直接抛出错误，整个流程中断；若支持中断继续加载，即isAbortOnError=false，则会跳过失败的异步加载组后继续按剩下的组加载文件资源，并有相关日志输出。

[0358] 本方法兼容了在线和本地文件加载、支持了按组异步加载，让整个配置文件app.json结构清晰明了的同时，也让整个流程更加人性化及顺畅化等。

[0359] 本FILE.LoadGroups()方法实现的具体代码为：

[0360] / **

[0361] * @author Candy

[0362] * @time 2024年05月21日

[0363] * @description 按组依次加载文件，并在每组完成、全部完成或出错时分别回调。

[0364] * @param {object[][]-{..., url / path}} groups二维数组，每个子数组是一组要加载的文件对象，里面一定要包含文件链接地址url。

[0365] * @param {function(number, any[]): void} perCallback每组加载完成后的回调，参数：组索引、该组所有响应结果。

[0366] * @param {function(any[][]): void} allCallback全部组加载完成后的回调，参数：所有组的响应结果组成的二维数组。

[0367] * @param {function(Error, number|null): void} errorCallback统一错误回调，参数：错误对象、出错时所在的组索引（若组外出错则为 null）。

[0368] * @param {boolean} isAbortOnError是否在任意错误时立即中断后续组的加载（`true`：抛出错误；`false`：记录后继续）。

[0369] * /

[0370] static LoadGroups = function ({ groups, perCallback, allCallback,errorCallback, isAbortOnError = false}) {

[0371] let allResults = [];

[0372] let allErrors = [];

[0373] / / 标记是否中断。

[0374] let isAborted = false;

[0375] let promiseChain = groups.reduce((promise, group, gid) =>{

[0376] return promise.then(() =>{

[0377] / / 若中断则跳过后续组的加载。

[0378] if (isAborted == true) {

[0379] return;

[0380] }

[0381] / / 加载文件（兼容在线和本地文件）。

[0382] let loadPromises = group.map((pgroup) =>{

[0383] return FILE.LoadAsync(pgroup.path, FILE.EFetch.eText);

[0384] });

[0385] return Promise.all(loadPromises)

[0386] .then((results) =>{

[0387] / / 拼接结果。

[0388] let perResults = groups[gid].map((result, rid) =>{

[0389] return {

[0390] ...result, / / 拼接原有结构。

[0391] data: results[rid] / / 获取页面数据。

[0392] };

[0393] });

[0394] allResults[gid] = perResults;

[0395] allErrors[gid] = null;

[0396] perCallback(gid, perResults);

[0397] })

[0398] .catch((error) =>{

[0399] allResults[gid] = null;

[0400] allErrors[gid] = error;

[0401] errorCallback(error, gid);

[0402] if (isAbortOnError == true) {

[0403] / / 设置中断标志，阻止后续组执行。

[0404] isAborted = true;

[0405] / / 向外抛出，触发最外层 catch。

[0406] throw error;

[0407] }

[0408] });

[0409] });

[0410] }, Promise.resolve());

[0411] promiseChain

[0412] .then(() =>{

[0413] if (isAborted == false) {

[0414] allCallback(allResults, allErrors);

[0415] }

[0416] })

[0417] .catch((error) =>{

[0418] / / 只有在 isAbortOnError=true 时才会触发。

[0419] / / null 表示流程级错误。

[0420] errorCallback(error, null);

[0421] });

[0422] };

[0423] 本FILE.LoadGroups()方法调用的具体代码为：

[0424] FILE.LoadGroups({

[0425] groups: window.DDF.Pages, / / 配置app.json中的pages[][]数据。

[0426] perCallback: (gid, result) =>{

[0427] CONSOLE.Log(`第${gid + 1}组加载完成~`, result);

[0428] }, / / 每组异步加载回调，即加载pages[]数据。

[0429] allCallback: (results, errors) =>{

[0430] CONSOLE.Log("结果：", results);

[0431] CONSOLE.Log("错误：", errors);

[0432] results.forEach(result =>{

[0433] if (Array.isArray(result) == true) {

[0434] result.forEach(presult =>{

[0435] / / TODO.

[0436] / / 此处进入每个文件的解析流程。

[0437] })

[0438] }

[0439] })

[0440] }, / / 所有文件异步加载回调。

[0441] errorCallback: (error, gid) =>{

[0442] if (gid == null) {

[0443] CONSOLE.Error("加载流程中断：", error);

[0444] } else {

[0445] CONSOLE.Error(`第${gid + 1}组加载出错：`, error);

[0446] }

[0447] }, / / 抛出异步加载错误异常。

[0448] });

[0450] });

[0451] 在上述异步文件资源加载FILE.LoadGroups()调用中，必须响应allCallback参数回调，表示此方法调用中代码已成功执行，流程会继续正常进行；如果在errorCallback回调中抛出异常，则表示流程中断，需要检查app.json配置是否正确、全局数据是否正确存储或读取等。

[0452] 至此，本发明必须保证了allCallback正常响应后，从而完成了各种前端零散文件资源的加载。

[0453] S13、开发调试框架文件资源读取：

[0454] 在保证了上一步骤S12的开发调试框架文件资源异步按组加载的正常响应后，回调函数返回了所有文件资源的文本数据结构，即allCallback的results，此返回结果results在步骤S1的修改本地序列化配置文件中的二维文件数组（windows.DDF.Pages[][]）的结构中新增了一个"data"对象，用于存储异步加载的页面或片段文本内容，具体为：

[0455] "pages": [[

[0457] { "type": "style", "path": " / pages / snippet / style.css", "data": " / * 类似用户脚本（Userscripts），如Tampermonkey、Greasemonkey等 * / .btn-button1{display: block;color: yellow;}"},

[0458] { "type": "head", "path": " / pages / snippet / head.html", "data": "<!--类似用户脚本（Userscripts），如Tampermonkey、Greasemonkey等 --><meta charset="utf-8" / ><meta http-equiv="X-UA-Compatible" content="IE=edge" / >"},

[0459] ……]]

[0462] 至此，本发明已成功读取并保存了各种前端零散文件资源的内容。

[0463] S14、开发调试框架文件资源解析与挂载（核心步骤）：

[0464] 本步骤在获取到了上一步骤S13的开发调试框架文件资源读取返回的文本数据内容结构，对二维数组文件数据结构循环并按类型解析其中的"data"字段后，再进行了挂载、创建、移除等操作。

[0465] 此步骤均为HTML基本理论知识，原生使用JavaScript来操作DOM数据。

[0466] 本发明在步骤S12的开发调试框架文件资源异步按组加载中的allCallback内（"此处进入每个文件的解析流程"）添加如下循环获取代码并按app.json中配置的类型再通过已导入的通用公共库NODE来处理、解析、操作DOM：

[0467] allCallback: (results, errors) =>{

[0468] CONSOLE.Log("结果：", results);

[0469] CONSOLE.Log("错误：", errors);

[0470] results.forEach(result =>{

[0471] if (Array.isArray(result) == true) {

[0472] result.forEach(presult =>{

[0473] / / TODO.

[0474] / / 此处进入每个文件的解析流程。

[0475] / / 按app.json中配置的类型依次解析、创建并挂载等操作。

[0476] if (presult.type == "head") {

[0477] / / 解析并创建再挂载<head>标签内容。

[0478] NODE.CreateHead({ document: window.DDF.Document, data: presult.data});

[0479] } else if (presult.type == "style") {

[0480] / / 解析并创建再挂载<style>标签内容。

[0481] NODE.CreateStyle({ document: window.DDF.Document, data: presult.data});

[0482] } else if (presult.type == "body" || presult.type == "html") {

[0483] / / 解析并创建再挂载<body>标签内容，"html”类型也按照<body>标签进行解析。

[0484] NODE.CreateBody({ document: window.DDF.Document, data: presult.data,hooks: presult.hooks});

[0485] } else if (presult.type == "script") {

[0486] / / 解析并创建再挂载<script>标签内容。

[0487] NODE.CreateScript({ document: window.DDF.Document, data:presult.data, hooks: presult.hooks});

[0488] }

[0489] })

[0490] }

[0491] })

[0492] }, / / 所有文件异步加载回调。

[0493] 其中诸如NODE.CreateHead()、NODE.CreateComment()、NODE.CreateStyle()、NODE.CreateBody()、NODE.CreateScript()等实现方法相同，都是通过HTML原生使用JavaScript方法先解析数据再操作DOM数据实现动态挂载：

[0494] ①首先，不同类型的数据解析：按app.json返回的results结果数据中"type"类来分类解析，如果"type"为"head"或者"body"或者"html"类型，本发明需要将"data"字段通过let parser = new DOMParser()和 let doc = parser.parseFromString(html, "text / html")来解析为可识别的DOM对象；如果是"style"类型，本发明需要使用document.createTextNode()将"data"字段转为css样式；如果是"script"类型，直接将"data"内容赋值至script.innerHTML即可等。

[0495] ②其次，处理已有节点元素标签：使用doc.querySelectorAll()按类别查询整个页面window.DDF.Document中是否有重复或者无效或者可以替换的同标签节点，若有，则进行移除或者修改处理；若无，则略过。

[0496] ③再次，创建新节点元素标签：通过document.createElement(type)来创建新的节点，再将解析后的"data"内容赋值或者设置到新的节点内，这样就创建了可供HTML识别的Node Element节点元素。

[0497] ④最后，挂载新节点元素标签：使用parent.appendChild()方法来将上述转换后可识别的节点元素按不同类型正确地挂载到指定父节点元素标签模块内。

[0498] 注：可能一个类型中包含多个元素标签节点，此时本发明需要按照步骤S4的解析并渲染框架主入口页面中的标准HTML执行流程的顺序依次挂载，特别是"head"类型中包含过多的节点元素标签。再者"script"类型直接挂载到父节点上后，并不会立即响应里面的事件或者钩子（hooks），只是简单地解析后表面上渲染了而已，本发明需要另辟蹊径，往"data"中注入hooks内容events，再将"data"数据叠加后通过赋值操作script.innerHTML =data + events，然后通过appendChild，即可解决钩子事件响应问题。

[0499] 本步骤的核心代码NODE.CreateHead()和NODE.CreateScript()如下，其他的原理大同小异，不再赘述。

[0500] 其中NODE.CreateHead()主要是根据标准HTML执行流程的顺序依次挂载：

[0501] / **

[0502] * @author Candy

[0503] * @time 2024年05月25日

[0504] * @description 分别挂载<head>标签内的内容。

[0505] * /

[0506] static CreateHead = function ({ document, data, path} = {}) {

[0507] let parser = new DOMParser();

[0508] let doc = parser.parseFromString(data, "text / html");

[0509] / / 获取所有的<title>标签，并倒序挂载最顶部。多个<title>标签，只有最顶部一个有效。

[0510] let titles = doc.querySelectorAll(NODE.#ETag.eTitle);

[0511] Array.from(titles)

[0512] .reverse()

[0513] .forEach((title) =>{

[0514] document.head.insertBefore(title, document.head.firstChild);

[0515] });

[0516] / / 获取所有的<meta>标签，并倒序挂载最顶部。尤其是charset属性，必须放置在第一位。

[0517] let metas = doc.querySelectorAll(NODE.#ETag.eMeta);

[0518] Array.from(metas)

[0519] .reverse()

[0520] .forEach((meta) =>{

[0521] document.head.insertBefore(meta, document.head.firstChild);

[0522] });

[0523] / / 增加最顶部的注释。

[0524] if (titles.length>0 || metas.length>0) {

[0525] NODE.CreateComment({ document, data: path, parent: document.head,istop: true});

[0526] }

[0527] / / 获取所有的<link>标签内的favicon，并正序挂载最底部。多个favicon，只有最底部一个有效。

[0528] let favicons = doc.querySelectorAll(NODE.#EAttribute.eFavicon);

[0529] / / 获取所有的<link>标签内的stylesheet，并正序挂载最底部。多个stylesheet全部有效。

[0530] let csses = doc.querySelectorAll(NODE.#EAttribute.eCSS);

[0531] / / 获取所有的<script>标签，分为外部脚本和内联脚本。

[0532] let scripts = doc.querySelectorAll(NODE.#ETag.eScript);

[0533] let exscripts = [];

[0534] let inscripts = [];

[0535] scripts.forEach((script) =>{

[0536] if (!!script.src) {

[0537] exscripts.push(script);

[0538] } else {

[0539] inscripts.push(script);

[0540] }

[0541] });

[0542] / / 获取所有的<style>标签，并正序挂载最底部。多个stylesheet全部有效。

[0543] let styles = doc.querySelectorAll(NODE.#ETag.eStyle);

[0544] / / 增加底部的注释。

[0545] if (favicons.length>0 || csses.length>0 || exscripts.length>0 ||inscripts.length>0 || styles.length>0) {

[0546] NODE.CreateComment({ document, data: path, parent: document.head});

[0547] }

[0548] / / 挂载<link>标签内的favicon。

[0549] Array.from(favicons)

[0550] .reverse()

[0551] .forEach((favicon) =>{

[0552] document.head.appendChild(favicon);

[0553] });

[0554] / / 挂载<link>标签内的stylesheet。

[0555] csses.forEach((css) =>{

[0556] document.head.appendChild(css);

[0557] });

[0558] / / 挂载外部<script>标签（External Scripts）。

[0559] exscripts.forEach((exscript) =>{

[0560] / / 不能直接将exscript挂载到head上，不然不会执行外部脚本里面的代码。

[0561] let script = document.createElement(NODE.#ETag.eScript);

[0562] script.src = exscript.src;

[0563] script.type = "text / javascript";

[0564] document.head.appendChild(script);

[0565] });

[0566] / / 挂载<style>标签。

[0567] styles.forEach((style) =>{

[0568] document.head.appendChild(style);

[0569] });

[0570] / / 挂载内联<script>标签（Inline Scripts）。

[0571] inscripts.forEach((inscript) =>{

[0572] NODE.CreateScript({ document, parent: document.head, data:inscript.innerHTML});

[0573] });

[0574] };

[0575] 其中NODE. CreateScript()主要是根据注入代码来响应内部的钩子及事件：

[0576] / **

[0577] * @author Candy

[0578] * @time 2024年05月25日

[0579] * @description 创建节点的<script>标签。

[0580] * /

[0581] static CreateScript = function ({ document, data, hooks = []} = {}){

[0582] / / 包一层IIFE并手动传入moudleId，使当前的script监听到hooks。

[0583] let alphabet = "useandom-26T198340PX75pxJACKVERYMINDBUSHWOLF_GQZbfghjklqvwyzrict";

[0584] / / 生成UUID唯一标识临时方法。

[0585] let UUID = function (t = 21) {

[0586] let e = "";

[0587] for (var r = crypto.getRandomValues(new Uint8Array((t |= 0))); t--; )e += alphabet[63&r[t]];

[0588] return e;

[0589] };

[0590] / / 创建<script>标签。

[0591] let script = document.createElement(NODE.#ETag.eScript);

[0592] / / 设置标签类型。

[0593] script.type = "module";

[0594] / / 设置标签唯一id，以供方便地查询使用。

[0595] script.dataset.moduleId = UUID(8);

[0596] / / 向"data"数据中注入hooks事件，以能在标签挂载后响应其中的钩子事件。

[0597] let events =

[0598] `\r\n` +

[0599] ` / / =========Injected by hooks=========\r\n` +

[0600] `let id = ${JSON.stringify(script.dataset.moduleId)};\r\n` +

[0601] `let current = document.querySelector(\`script[data-module-id="\${id}"]\`);\r\n` +

[0602] `if(!!current) {\r\n` +

[0603] `${hooks

[0604] .map((item) =>{

[0605] return `if(typeof ${item.name} == "function") {\r\n` + `\t${item.name}(new CustomEvent(\"${item.name}\", { detail: \"${item.message}\"}));\r\n}`;

[0606] })

[0607] .join("\r\n")}

[0608] }

[0609] `;

[0610] / / 对"data"数据叠加后通过赋值操作，以便对"data"+"event"数据进行解析。

[0611] script.innerHTML = data + events;

[0612] / / 将解析后的元素节点挂载至父节点，渲染的同时能够响应对应事件。

[0613] document.body.appendChild(script);

[0614] };

[0615] 至此，本发明完成了各种前端零散文件资源解析成DOM节点，并正确地挂载到的标签模块内。

[0616] S15、开发调试项目的运行：

[0617] "开发调试项目”包含所有的前端零散文件资源，同时也可以包含其对应的依赖库、资源等。

[0618] 以上步骤均为开发调试框架的设置及运行，其实在步骤S14的开发调试框架文件资源解析与挂载完成后开发调试项目已经开始运行：本发明技术框架实际上就是首先运行完整的HTML页面，在"开发调试框架”运行时通过JavaScript代码动态地将前端零散文件资源注入HTML页面中再合并成一个完整的HTML页面，故"开发调试框架”的运行时包含"开发调试项目”的运行时状态，即在app.html中<body>标签内的<script type="module" id="ddf-runtime">标签内已运行了"开发调试项目”。

[0619] S16、开发调试项目的设置：

[0620] "开发调试项目”的设置实际上与"开发调试框架”的设置相同，为标准的HTML编码流程完全一致，故只需要在前端零散文件资源中的代码内相应的位置添加即可。常用的设置包含如通用公共库导入（步骤S8的开发调试框架通用公共库初始化导入）、数据操作（步骤S10的开发调试框架全局数据初始化存储）、页面渲染设置（步骤S11的开发调试框架页面初始化渲染）等。

[0621] 比如本发明在文件script.js（路径 / pages / snippet / script.js）中导入本地库，同时输出全局设置变量：

[0622] / / 类似用户脚本（Userscripts），如Tampermonkey、Greasemonkey等。

[0623] / / 此处导入本地库。

[0624] import { PluginTest} from " / plugins / testplugin.js";

[0625] / / 输出全局设置变量。

[0626] console.log("此处开始加载-main", window.DDF);

[0627] / / 调用本地库方法。

[0628] PluginTest();

[0629] 比如在文件head.html（路径pages / structure2 / head.html）中引入外部第三方库，工具，主题样式等：

[0630] <!-- 引用外部通用库。 -->

[0631] <script src="https: / / share.qupeiyin.org / test.js">< / script>

[0632] <!-- Reference the external UI framework. -->

[0633] <script src="https: / / cdn.jsdelivr.net / npm / @tailwindcss / browser@4" defer>< / script>

[0634] <!-- Customize the UI style. -->

[0635] <style type="text / tailwindcss">

[0636] @theme {

[0637] --color-clifford: #da373d;

[0638] }

[0639] < / style>

[0640] <style>

[0641] .txt-hello {

[0642] color: #ff0000;

[0643] }

[0644] < / style>

[0645] <script>

[0646] / / 运行脚本。

[0647] console.log("script from structure2!");

[0648] < / script>

[0649] At this point, the setup of front-end scattered file resources, i.e., "development and debugging projects", is consistent with the regular HTML coding standard setup, which is basic theoretical knowledge and will not be elaborated on further.

[0650] S17. Modifications, updates, extensions, and preservation of the technology of this invention:

[0651] Because the "Live Server" plugin has hot reload and real-time update capabilities, this invention allows any operation (modification, update, expansion, saving, etc.) to be performed on any file within the entire root directory (described in Example 4) while the technical framework of this invention is running. Then, pressing the "Save" button will provide a real-time update and preview, and the workflow will restart according to the technical process of this invention. Furthermore, since it runs locally, there is no noticeable delay as seen in other online editors; operation is instant preview, making it convenient and fast.

[0652] S18. Lifecycle operations of the present invention:

[0653] The "Development and Debugging Framework" lifecycle initialization operation can be performed in [location]. <script type="module" id="ddf-before">标签（步骤S5的开发调试框架前置运行时）内进行框架初始化操作，在<scripttype="module" id="ddf-after">标签(步骤S6的开发调试框架后置运行时)内进行框架页面销毁操作。

[0654] "开发调试项目”建议通过配置app.json中的hooks钩子事件来添加初始化事件，在前端零散文件资源的脚本文件内，手动添加window.addEventListener("beforeunload", OnLeave);或window.addEventListener("unload", OnDestroy);监听事件来设置页面销毁操作。

[0655] S19、本发明技术的开发调试后续操作：

[0656] 由于是在运行时解析并合并前端零散文件资源，并未对每个文件进行特别处理，故开发完成后不用再将代码按原格式进行拆分，而是直接成型直接使用。

[0657] 本发明框架原样保留前端零散文件资源目录结构和代码风格等，可重复使用，只需将"开发调试框架”结构目录下文件按规定结构（实施例四的目录结构模块的说明）重新复制至新的项目中即可。

[0658] 至此，本发明技术的整个主要流程已完成。

[0659] 实施例四

[0660] 基于相同的构思，本发明还提出了一种前端零散文件资源的轻量级实时开发调试框架，包括：

[0661] 目录结构模块，用于构建包括开发调试框架目录和开发调试项目目录的本地目录，其中开发调试框架目录包括主入口页面文件和配置文件，开发调试项目目录包括零散文件资源；

[0662] 配置模块，用于修改配置文件，配置文件包括前端零散文件资源的路径和类型的二维数组结构；

[0663] 启动模块，用于启动主入口页面文件，利用热重载插件开启本地服务器，并在浏览器中加载主入口页面文件；

[0664] 解析渲染模块，用于解析并渲染主入口页面文件，按照标准HTML执行流程处理<head>标签和<body>标签；

[0665] 异步初始化模块，用于异步加载配置文件，并通过并发异步操作初始化设置，包括异步加载配置文件、等待DOM渲染完成；

[0666] 数据存储模块，用于全局存储初始化数据，包括从配置文件中提取的零散文件资源数据；

[0667] 文件加载模块，用于异步按组加载零散文件资源，根据二维数组结构分组加载文件内容；

[0668] 资源读取模块，用于读取零散文件资源的内容，并按类型解析为DOM节点；

[0669] 挂载模块，用于将解析后的DOM节点按类型挂载到主入口页面文件的相应标签模块中，实现动态合并成完整页面；

[0670] 热重载模块，用于实时监测文件改动，并在保存后自动刷新浏览器进行实时预览和调试；

[0671] 公共库模块，包括日志处理模块、接口请求模块、文件操作模块和节点元素操作模块，用于支持异步加载、DOM操作和日志管理；

[0672] 钩子事件模块，用于在配置文件中设置钩子事件数组，模拟页面生命周期事件，并在挂载脚本类型资源时注入事件代码；

[0673] 其中，轻量级实时开发调试框架支持跨平台部署和远程调试，通过集成调试工具实现多端操作。由于本发明技术基于"Live Server”插件的远程连接功能，允许通过WLAN（局域网）在手机、平板电脑或其他电脑设备、任意操作系统平台上进行预览项目：只需将地址由原先的localhost或者127.0.0.1改为开发设备的IP地址，在其他设备上键入IP+端口+路由地址即可。

[0674] 在本实施例中，本发明目录结构模块的说明如下：

[0675] ①开发调试框架："Development&Debug Framework”(简称"DDF”)。

[0676] app.html文件（路径 / _DDF / app.html）：为项目运行时主入口；

[0677] app.json文件（路径 / _DDF / config / app.json）：为开发调试框架自定义配置；

[0678] library目录（路径 / _DDF / library）：为开发调试框架依赖公共模块及通用库。

[0679] ②开发调试项目：具有一个或多个前端零散的文件资源。

[0680] pages目录（路径 / pages）为项目分的散页面结构或代码片段；

[0681] plugins目录、public目录等为项目自定义扩展功能。

[0682] ③根目录：同时包含"开发调试框架”和"开发调试项目”。

[0683] 优选地，为了提高代码复用性、统一规范、简化开发流程，在框架library目录（路径 / _DDF / library）中重新封装了：

[0684] CONSOLE–日志单例类，日志统一处理和异常统一处理，继承至原生console单例类，包含日志正常输出打印（CONSOLE.Log）、日志错误异常捕获（CONSOLE.Error）、日志警告显示（CONSOLE.Warn）等；

[0685] DATE–日期单例类，包含日期统一格式化处理（DATE.Format）等；

[0686] API–接口请求单例类，包含查询用户信息（API.GetUser）、是否更新升级（API.PostUpgrade）等；

[0687] FILE–文件单例类，包含文件加载枚举类型（FILE.EFetch={eText，eJson，eBlob，eArrayBuffer，eFormData}）、异步加载文件（FILE.LoadAsync）、按组依次加载文件，并在每组完成、全部完成或出错时分别回调（FILE.LoadGroups），此方法用于异步加载app.json中按二维数组配置的pages[][]的文件；

[0688] NODE–节点元素操作单例类，包含私有成员变量标签枚举类型（NODE.#ETag={eHead,eMeta,eBody,eStyle,eTitle,eLink,eScript,eSection,eDiv}）、私有成员变量属性枚举类型（NODE.#EAttribute={'link[rel~="icon"]','link[rel="stylesheet"]'}）、私有成员变量图标枚举类型（NODE.#EFavicon={eICO,ePNG,eGIF,eSVG,eJPG,eWEBP,eBMP}）、设置页面Head标签（NODE.SetHead）、设置标题（NODE.SetTitle）、设置图标（NODE.SetFavicon）、解析Head的文本DOM内容并挂载Head标签（NODE.CreateHead）、挂载自定义注释（NODE.CreateComment）、解析CSS的文本内容并挂载Style样式（NODE.CreateStyle）、解析HTML的文本DOM内容并挂载Body节点（NODE.CreateBody）、新增 / 设置 / 移除指定内容的注释节点（NODE.SetComment）、解析Script的文本DOM内容并挂载脚本节点（NODE.CreateScript）等。

[0689] 实施例五

[0690] 本实施例还提供了一种电子装置，参考图3，包括存储器404和处理器402，该存储器404中存储有计算机程序，该处理器402被设置为运行计算机程序以执行上述任一项方法实施例中的步骤。

[0691] 具体地，上述处理器402可以包括中央处理器（CPU），或者特定集成电路（ApplicationSpecificIntegratedCircuit，简称为ASIC），或者可以被配置成实施本发明实施例的一个或多个集成电路。

[0692] 其中，存储器404可以包括用于数据或指令的大容量存储器404。举例来说而非限制，存储器404可包括硬盘驱动器（HardDiskDrive，简称为HDD）、软盘驱动器、固态驱动器（SolidStateDrive，简称为SSD）、闪存、光盘、磁光盘、磁带或通用串行总线（UniversalSerialBus，简称为USB）驱动器或者两个或更多个以上这些的组合。在合适的情况下，存储器404可包括可移除或不可移除（或固定）的介质。在合适的情况下，存储器404可在数据处理装置的内部或外部。在特定实施例中，存储器404是非易失性（Non-Volatile）存储器。在特定实施例中，存储器404包括只读存储器（Read-OnlyMemory，简称为ROM）和随机存取存储器（RandomAccessMemory，简称为RAM）。在合适的情况下，该ROM可以是掩模编程的ROM、可编程ROM（ProgrammableRead-OnlyMemory，简称为PROM）、可擦除PROM（ErasableProgrammableRead-OnlyMemory，简称为EPROM）、电可擦除PROM（ElectricallyErasableProgrammableRead-OnlyMemory，简称为EEPROM）、电可改写ROM（ElectricallyAlterableRead-OnlyMemory，简称为EAROM）或闪存（FLASH）或者两个或更多个以上这些的组合。在合适的情况下，该RAM可以是静态随机存取存储器（StaticRandom-AccessMemory，简称为SRAM）或动态随机存取存储器（DynamicRandomAccessMemory，简称为DRAM），其中，DRAM可以是快速页模式动态随机存取存储器404（FastPageModeDynamicRandomAccessMemory，简称为FPMDRAM）、扩展数据输出动态随机存取存储器（ExtendedDateOutDynamicRandomAccessMemory，简称为EDODRAM）、同步动态随机存取内存（SynchronousDynamicRandom-AccessMemory，简称SDRAM）等。

[0693] 存储器404可以用来存储或者缓存需要处理和 / 或通信使用的各种数据文件，以及处理器402所执行的可能的计算机程序指令。

[0694] 处理器402通过读取并执行存储器404中存储的计算机程序指令，以实现上述实施例中的任意一种前端零散文件资源的轻量级实时开发调试方法。

[0695] 可选地，上述电子装置还可以包括传输设备406以及输入输出设备408，其中，该传输设备406和上述处理器402连接，该输入输出设备408和上述处理器402连接。

[0696] 传输设备406可以用来经由一个网络接收或者发送数据。上述的网络具体实例可包括电子装置的通信供应商提供的有线或无线网络。在一个实例中，传输设备包括一个网络适配器（Network Interface Controller，简称为NIC），其可通过基站与其他网络设备相连从而可与互联网进行通讯。在一个实例中，传输设备406可以为射频（Radio Frequency，简称为RF）模块，其用于通过无线方式与互联网进行通讯。

[0697] 输入输出设备408用于输入或输出信息。

[0698] 实施例六

[0699] 本实施例还提供了一种可读存储介质，可读存储介质中存储有计算机程序，计算机程序包括用于控制过程以执行过程的程序代码，过程包括根据实施例一的前端零散文件资源的轻量级实时开发调试方法。

[0700] 需要说明的是，本实施例中的具体示例可以参考上述实施例及可选实施方式中所描述的示例，本实施例在此不再赘述。

[0701] 通常，各种实施例可以以硬件或专用电路、软件、逻辑或其任何组合来实现。本发明的一些方面可以以硬件来实现，而其他方面可以由控制器、微处理器或其他计算设备执行的固件或软件来实现，但是本发明不限于此。尽管本发明的各个方面可以被示出和描述为框图、流程图或使用一些其他图形表示，但是应当理解，作为非限制性示例，本文中描述的这些框、装置、系统、技术或方法可以以硬件、软件、固件、专用电路或逻辑、通用硬件或控制器或其他计算设备或其某种组合来实现。

[0702] 本发明的实施例可以由计算机软件来实现，该计算机软件由移动设备的数据处理器诸如在处理器实体中可执行，或者由硬件来实现，或者由软件和硬件的组合来实现。包括软件例程、小程序和 / 或宏的计算机软件或程序(也称为程序产品)可以存储在任何装置可读数据存储介质中，并且它们包括用于执行特定任务的程序指令。计算机程序产品可以包括当程序运行时被配置为执行实施例的一个或多个计算机可执行组件。一个或多个计算机可执行组件可以是至少一个软件代码或其一部分。另外，在这一点上，应当注意，如图1中的逻辑流程的任何框可以表示程序步骤、或者互连的逻辑电路、框和功能、或者程序步骤和逻辑电路、框和功能的组合。软件可以存储在诸如存储器芯片或在处理器内实现的存储块等物理介质、诸如硬盘或软盘等磁性介质、以及诸如例如DVD及其数据变体、CD等光学介质上。物理介质是非瞬态介质。

[0703] 本领域的技术人员应该明白，以上实施例的各技术特征可以进行任意的组合，为使描述简洁，未对上述实施例中的各个技术特征所有可能的组合都进行描述，然而，只要这些技术特征的组合不存在矛盾，都应当认为是本说明书记载的范围。

[0704] 以上实施例仅表达了本发明的几种实施方式，其描述较为具体和详细，但并不能因此而理解为对本发明范围的限制。应当指出的是，对于本领域的普通技术人员来说，在不脱离本发明构思的前提下，还可以作出若干变形和改进，这些都属于本发明的保护范围。因此，本发明的保护范围应以所附权利要求为准。< / script>

Claims

1. A lightweight real-time development and debugging method for front-end fragmented file resources, characterized in that, Includes the following steps: Build a local directory structure, including a development and debugging framework directory and a development and debugging project directory, wherein the development and debugging framework directory includes the main entry page file and configuration files, and the development and debugging project directory includes scattered file resources; Modify the configuration file, which includes a two-dimensional array structure of paths and types of scattered front-end file resources; Start the main entry page file, use the hot reload plugin to start the local server, and load the main entry page file in the browser; Parse and render the main entry page file, and process the tags and < / html> according to the standard HTML execution flow; The configuration file is loaded asynchronously, and settings are initialized through concurrent asynchronous operations, including asynchronously loading the configuration file and waiting for DOM rendering to complete. Global storage initialization data, including scattered file resource data extracted from the configuration file; The scattered file resources are loaded asynchronously in groups, and the file content is loaded in groups according to the two-dimensional array structure. Read the contents of the scattered file resources and parse them into DOM nodes according to their type; The parsed DOM nodes are mounted to the corresponding tag modules of the main entry page file according to their type, so as to dynamically merge them into a complete page; The hot reload plugin is used to monitor file changes in real time and automatically refresh the browser for real-time preview and debugging after saving.

2. The lightweight real-time development and debugging method as described in claim 1, characterized in that, The configuration file also includes an array of hook events to simulate page lifecycle events. The hook events include creation events, loading events, and ready events. When parsing and mounting the scattered file resources, the hook event code is injected into the script type resources to ensure event response.

3. The lightweight real-time development and debugging method as described in claim 1, characterized in that, The types of scattered file resources include style type, header type, body type, script type, and complete HTML type; The type-based parsing and mounting includes, for header and body types, using a DOM parser to parse the text content into DOM objects; for style types, creating text nodes as style sheets. For script types, directly assign the inline script and inject the event code.

4. The lightweight real-time development and debugging method as described in claim 1, characterized in that, The asynchronous group loading is implemented using a file loading module, which supports loading files sequentially in groups and provides callbacks when each group is completed, all groups are completed, or an error occurs. It also supports interruption or continuation of loading due to errors.

5. The lightweight real-time development and debugging method as described in claim 1, characterized in that, It also includes setting pre-runtime scripts and post-runtime scripts in the tags of the main entry page file for framework initialization and destruction operations, including global variable settings, debugging tool references, and page unload event listeners.

6. A lightweight real-time development and debugging system for front-end fragmented file resources, characterized in that, include: The directory structure module is used to build a local directory that includes a development and debugging framework directory and a development and debugging project directory, wherein the development and debugging framework directory includes the main entry page file and configuration files, and the development and debugging project directory includes scattered file resources; A configuration module is used to modify the configuration file, which includes a two-dimensional array structure of the paths and types of scattered front-end file resources; The startup module is used to start the main entry page file, start the local server using the hot reload plugin, and load the main entry page file in the browser. The parsing and rendering module is used to parse and render the main entry page file, and process tags and labels according to the standard HTML execution flow; An asynchronous initialization module is used to asynchronously load the configuration file and initialize settings through concurrent asynchronous operations, including asynchronously loading the configuration file and waiting for DOM rendering to complete. The data storage module is used to globally store initialization data, including scattered file resource data extracted from the configuration file; The file loading module is used to asynchronously load the scattered file resources in groups, and to load file content in groups according to the two-dimensional array structure. The resource reading module is used to read the content of the scattered file resources and parse them into DOM nodes according to their type; The mounting module is used to mount the parsed DOM nodes to the corresponding tag modules of the main entry page file according to their type, so as to dynamically merge them into a complete page; The hot reload module is used to monitor file changes in real time and automatically refresh the browser for real-time preview and debugging after saving; The lightweight real-time development and debugging system supports cross-platform deployment and remote debugging, and enables multi-terminal operation through integrated debugging tools.

7. The lightweight real-time development and debugging system as described in claim 6, characterized in that, It also includes a hook event module, which is used to set an array of hook events in the configuration file, simulate page lifecycle events, and inject event code when mounting script type resources.

8. The lightweight real-time development and debugging system as described in claim 6, characterized in that, It also includes public library modules, including a log processing module, an interface request module, a file operation module, and a node element operation module, to support asynchronous loading, DOM manipulation, and log management.

9. An electronic device comprising a memory and a processor, characterized in that, The memory stores a computer program, and the processor is configured to run the computer program to perform the lightweight real-time development and debugging method according to any one of claims 1 to 5.

10. A readable storage medium, characterized in that, The readable storage medium stores a computer program, the computer program including program code for controlling a process to execute the process, the process including the lightweight real-time development and debugging method according to any one of claims 1 to 5.

Images