20260511214503

code/jsp/.trae/documents/merge_js_files_plan.md

@@ -0,0 +1,155 @@
+# Feegrid 模块合并重构计划
+
+## 1. 现状分析
+
+### 1.1 当前文件结构
+
+| 文件 | 行数 | 职责 |
+|------|------|------|
+| `js/draft-page-manager.js` | 439行 | 草稿态分页核心模块（底层） |
+| `js/feegrid-manager.js` | 772行 | Feegrid 高阶管理模块（依赖上层） |
+
+**问题**：两个文件分离，DraftPageManager 被 FeegridManager 依赖，但业务页面需要同时引入两个文件，增加了复杂性。
+
+### 1.2 用户需求
+
+- 将公共代码统一到一个 JS 文件中
+- 不拆分多个 JS 文件
+- 代码放在一起方便维护
+- 保持单一文件的简单结构
+
+---
+
+## 2. 重构目标
+
+### 2.1 合并方案
+
+将 `draft-page-manager.js` 和 `feegrid-manager.js` 合并为一个文件 `js/feegrid-manager.js`。
+
+合并后文件结构：
+```
+js/feegrid-manager.js
+├── DraftPageManager (内部模块，对外不可见)
+│   ├── 状态管理
+│   ├── 草稿池操作
+│   ├── 选中状态操作
+│   ├── 分页操作
+│   └── 工具方法
+│
+└── createFeegridManager (导出函数)
+    ├── 初始化方法
+    ├── 数据加载方法
+    ├── 草稿池操作方法
+    ├── 选中状态方法
+    └── 配置方法
+```
+
+### 2.2 优势
+
+1. **单一文件**：只需引入一个 JS 文件
+2. **内聚性**：DraftPageManager 作为内部实现细节，不暴露给业务代码
+3. **简化引用**：业务页面只需 `createFeegridManager`
+4. **命名空间干净**：不再污染 window.DraftPageManager
+
+---
+
+## 3. 重构步骤
+
+### 3.1 步骤一：合并文件
+
+将 `draft-page-manager.js` 的内容作为 `js/feegrid-manager.js` 的内部模块，移除 `window.DraftPageManager` 挂载。
+
+### 3.2 步骤二：修改 DraftPageManager 引用
+
+将 `feegrid-manager.js` 中所有 `window.DraftPageManager.createDraftManager` 调用改为内部引用。
+
+### 3.3 步骤三：清理导出
+
+移除 `window.createFeegridManager` 的 UMD 封装，改为直接 `window.createFeegridManager = createFeegridManager`。
+
+### 3.4 步骤四：更新 JSP 引用
+
+将 JSP 页面中的引用从两个文件改为单一文件：
+```html
+<!-- 之前 -->
+<script src="js/draft-page-manager.js"></script>
+<script src="js/feegrid-manager.js"></script>
+
+<!-- 之后 -->
+<script src="js/feegrid-manager.js"></script>
+```
+
+---
+
+## 4. 文件结构设计
+
+### 4.1 合并后的文件
+
+文件路径：`js/feegrid-manager.js`
+
+```js
+/**
+ * Feegrid 公共管理模块
+ * 
+ * 包含：
+ * 1. DraftPageManager - 草稿态分页核心（内部模块）
+ * 2. createFeegridManager - Feegrid 高阶管理器（导出）
+ */
+(function(window) {
+    'use strict';
+
+    // ==================== DraftPageManager（内部模块）====================
+
+    function createDraftManager(config) {
+        // ... draft-page-manager.js 的全部逻辑
+    }
+
+    // ==================== createFeegridManager（导出）====================
+
+    function createFeegridManager(config) {
+        // ... feegrid-manager.js 的全部逻辑
+        // 内部调用 createDraftManager 而非 window.DraftPageManager
+    }
+
+    // 导出到 window
+    window.createFeegridManager = createFeegridManager;
+
+})(window);
+```
+
+---
+
+## 5. 预期成果
+
+### 5.1 文件变化
+
+| 操作 | 文件 |
+|------|------|
+| 删除 | `js/draft-page-manager.js` |
+| 合并+替换 | `js/feegrid-manager.js` |
+| 更新引用 | `editorder_s_cw.jsp` |
+
+### 5.2 引用简化
+
+**之前（JSP 中）**：
+```html
+<script src="js/draft-page-manager.js"></script>
+<script src="js/feegrid-manager.js"></script>
+```
+
+**之后（JSP 中）**：
+```html
+<script src="js/feegrid-manager.js"></script>
+```
+
+### 5.3 业务代码不变
+
+`createFeegridManager` 的 API 保持不变，业务代码无需修改。
+
+---
+
+## 6. 风险与注意事项
+
+1. **保持 API 兼容**：合并后 `createFeegridManager` 的接口不变
+2. **删除源文件**：确认合并成功后删除 `draft-page-manager.js`
+3. **测试验证**：合并后需要测试分页、选中、删除、撤销等功能