Files
workspace/code/jsp/.trae/documents/merge_js_files_plan.md
T
2026-05-11 21:45:04 +08:00

3.9 KiB
Raw Blame History

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 页面中的引用从两个文件改为单一文件:

<!-- 之前 -->
<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

/**
 * 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 中):

<script src="js/draft-page-manager.js"></script>
<script src="js/feegrid-manager.js"></script>

之后(JSP 中):

<script src="js/feegrid-manager.js"></script>

5.3 业务代码不变

createFeegridManager 的 API 保持不变,业务代码无需修改。


6. 风险与注意事项

  1. 保持 API 兼容:合并后 createFeegridManager 的接口不变
  2. 删除源文件:确认合并成功后删除 draft-page-manager.js
  3. 测试验证:合并后需要测试分页、选中、删除、撤销等功能