87 lines
2.1 KiB
Markdown
87 lines
2.1 KiB
Markdown
# history_pdf_compare.js 模块拆分方案
|
|
|
|
## 文件结构
|
|
|
|
原文件 (2205行) 拆分为 4 个模块：
|
|
|
|
```
|
|
js/history/
|
|
├── pdf-compare-renderer.js (已创建 - 文本渲染引擎)
|
|
├── pdf-compare-segments.js (待创建 - 分段和懒加载)
|
|
├── pdf-compare-ui.js (待创建 - UI 交互)
|
|
└── history_pdf_compare.js (简化 - 主协调类)
|
|
```
|
|
|
|
## HTML 引用顺序
|
|
|
|
```html
|
|
<!-- 1. 基础依赖 -->
|
|
<script src="../../js/utils/text-fitting.js"></script>
|
|
<script src="../../js/utils/text-fitting-integration.js"></script>
|
|
|
|
<!-- 2. PDF 对照视图模块 (按依赖顺序加载) -->
|
|
<script src="../../js/history/pdf-compare-renderer.js"></script>
|
|
<script src="../../js/history/pdf-compare-segments.js"></script>
|
|
<script src="../../js/history/pdf-compare-ui.js"></script>
|
|
<script src="../../js/history/history_pdf_compare.js"></script>
|
|
|
|
<!-- 3. 页面主逻辑 -->
|
|
<script src="../../js/history/history_detail_show_tab.js"></script>
|
|
```
|
|
|
|
## 模块职责
|
|
|
|
### 1. pdf-compare-renderer.js ✅
|
|
- 文本渲染引擎
|
|
- 白色背景绘制
|
|
- 文本自适应算法
|
|
- 换行处理
|
|
- 暴露: `window.PDFCompareRenderer`
|
|
|
|
### 2. pdf-compare-segments.js (待创建)
|
|
- 分段创建和管理
|
|
- 懒加载逻辑
|
|
- 可见区域检测
|
|
- Canvas 渲染队列
|
|
- 暴露: `window.PDFCompareSegments`
|
|
|
|
### 3. pdf-compare-ui.js (待创建)
|
|
- 事件绑定 (点击、滚动)
|
|
- 高亮显示
|
|
- 滚动同步
|
|
- bbox 交互
|
|
- 暴露: `window.PDFCompareUI`
|
|
|
|
### 4. history_pdf_compare.js (简化主类)
|
|
- 核心数据管理
|
|
- 模块协调
|
|
- PDF 初始化
|
|
- 全局字号预处理
|
|
- 暴露: `window.PDFCompareView`
|
|
|
|
## 通信方式
|
|
|
|
各模块通过主类实例通信：
|
|
|
|
```javascript
|
|
class PDFCompareView {
|
|
constructor() {
|
|
// ... 初始化数据 ...
|
|
|
|
// 创建子模块实例，传入 this
|
|
this.renderer = new PDFCompareRenderer(this);
|
|
this.segments = new PDFCompareSegments(this);
|
|
this.ui = new PDFCompareUI(this);
|
|
}
|
|
}
|
|
```
|
|
|
|
子模块通过 `this.view` 访问主类数据和方法。
|
|
|
|
## 兼容性
|
|
|
|
- ✅ 不使用 ES6 模块 (import/export)
|
|
- ✅ 通过全局变量通信
|
|
- ✅ 浏览器直接可用 (file:// 协议)
|
|
- ✅ 保持原有 API 不变
|