ResourceShare Demo

# ResourceShare.js - 高性能跨资源共享系统 **版本:** V1.3.7.5 **Copyright:** © 2026 GVSDS Team **License:** MIT License ## 📖 简介 `ResourceShare.js` 是一个专为现代 Web 应用设计的高性能资源管理与共享系统。它通过拦截脚本加载、智能缓存、跨iframe/页面通信以及虚拟源映射技术，解决了复杂 Web 应用中资源加载顺序混乱、重复请求浪费带宽以及内联代码难以调试等问题。 **核心优势：** * **跨域/跨页面资源共享**：顶级页面加载一次资源，同源子页面直接复用，极大减少流量消耗。 * **精准的加载控制**：使用 `` 标签明确定义加载顺序，确保依赖库（如 jQuery）先于业务代码执行。 * **智能调试支持**：自动生成带有 `VM_` 前缀的虚拟 SourceURL，让原本混淆或内联的代码在浏览器开发者工具中拥有清晰的文件路径。 * **可视化管理面板**：内置splash屏、进度条、日志控制台和错误诊断界面，开发体验极佳。 * **健壮的错误处理**：内置自动重试机制和智能诊断系统（如检测 jQuery 缺失、CORS 错误等）。 --- ## 🚀 快速开始 ### 1. 引入脚本将 `ResourceShare.js` 文件放入您的项目目录，并在 HTML 中尽可能早地引入它（建议在 `` 中）。 ```html ResourceShare Demo ... ``` ### 2. 定义资源加载列表使用自定义的 `` 标签来声明需要加载的资源。系统会严格按照标签出现的顺序进行加载。 **示例：** ```html

``` ### 3. 正常编写业务代码除了引入资源的方式改变外，您的业务代码不需要做任何修改。系统会自动拦截 ` ``` --- ## ⚙️ 配置选项 `ResourceShare.js` 提供了一个全局配置对象 `RS_CONFIG`。您可以在引入 `ResourceShare.js` **之前** 定义它来覆盖默认设置。 ```html ``` ### 配置参数详解 | 参数名 | 类型 | 默认值 | 说明 | | :--- | :--- | :--- | :--- | | **VERSION** | String | '1.3.7.4' | 系统版本号（只读） | | **ENABLE_UI** | Boolean | `true` | 是否显示内置的 Splash 加载屏、进度条和日志面板。生产环境建议设为 `false`。 | | **POST_MESSAGE_LIMIT** | Number | 1048576 (1MB) | 使用 postMessage 传输数据的最大阈值。超过此大小将自动使用 Blob URL。 | | **BLOB_LIMIT** | Number | 1073741824 (1GB) | 单个资源允许的最大大小。 | | **SCRIPT_TIMEOUT** | Number | 300000 (5分钟) | 资源加载的超时时间，超时后强制释放被阻塞的脚本。 | | **RETRY.COUNT** | Number | `3` | 网络请求失败时的重试次数。 | | **RETRY.DELAY** | Number | `1500` | 重试间隔（毫秒）。 | | **LOG_LEVEL_UI** | String | `'debug'` | 屏幕日志面板的显示级别 (`'debug'`, `'info'`, `'error'`, `'none'`)。 | | **LOG_LEVEL_DEVTOOLS** | String | `'error'` | 浏览器控制台的日志级别。 | --- ## 🔧 高级用法 ### 1. 跨 Iframe 资源共享这是本系统的核心功能之一。当您的页面包含多个同源 iframe 时，只需在父页面（Top Level）加载一次资源，子页面即可直接读取父页面缓存。 **父页面:** ```html ``` **子页面:** ```html

``` 若父页面并未加载 large-library.js，但有一个子页面加载了 large-library.js，第二个子页面再次尝试加载 large-library.js 时即可直接读取父页面缓存。 ### 2. 虚拟文件名映射 (V1.3.7.4 更新) 系统会自动为加载的脚本生成 SourceURL，以便在 Chrome DevTools 的 Sources 面板中调试。 * **外部资源:** 如果加载 `https://example.com/libs/jquery.min.js`，在 Sources 中将显示为 `https://example.com/libs/VM_jquery.min.js`。这有助于区分这是由 ResourceShare 接管加载的文件。 * **内联脚本:** 如果是页面内直接执行的脚本，将被映射为 `./RS_VM/VM_pageName_index_randomStr.js`。 ### 3. 禁用特定脚本的接管如果您希望某个脚本不被 ResourceShare 阻塞（即希望它立即执行），可以添加 `DisableRS` 属性。 ```html ``` ### 4. 错误诊断系统当发生严重错误（如 jQuery 未定义）导致加载停止时，系统会自动弹出一个诊断模态框。该模态框会根据错误堆栈提供解决建议（例如：“脚本依赖 jQuery，但似乎未加载...”）。 --- ## 🐛 调试与日志 ### 屏幕日志面板默认情况下，页面左下角会出现一个悬浮面板，显示资源加载的实时日志。 * **蓝色:** 普通信息 / 请求 * **绿色:** 加载成功 / 缓存命中 * **黄色:** 警告 / 重试中 * **红色:** 错误 / 加载失败 ### 控制台日志在浏览器控制台中，日志以彩色前缀输出，方便过滤： * `[INFO]` * `[SUCCESS]` * `[WARNING]` * `[ERROR]` * `[CACHE]` - 表示命中了父页面缓存或本地缓存 --- ## 🏗️ 工作原理 1. **初始化**: 脚本加载后，立即覆盖原生的 `appendChild` 和 `insertBefore` 方法，拦截所有 `