Back to Details

dry-refactoring

Compare original and translation side by side

🇺🇸

Original

English
🇨🇳

Translation

Chinese

dry-refactoring

DRY重构

Guided workflow to eliminate copy-paste duplication in source code. Use after running jscpd to detect clones.
用于消除源代码中复制粘贴重复代码的引导式流程。在运行jscpd检测到重复代码块后使用。

Prerequisites

前置条件

First, run jscpd to identify duplications:
bash
npx jscpd --reporters ai <path>
In codebases that mix related formats (e.g. JavaScript and TypeScript), add 
--cross-formats
so clones spanning both are detected too:
bash
npx jscpd --reporters ai --cross-formats "js-ts" <path>
See the jscpd skill for full option reference, including cross-format group syntax.
首先，运行jscpd识别重复代码：
bash
npx jscpd --reporters ai <path>
在混合了相关格式（如JavaScript和TypeScript）的代码库中，添加
--cross-formats
参数，以便检测跨两种格式的重复代码块：
bash
npx jscpd --reporters ai --cross-formats "js-ts" <path>
查看**jscpd**技能文档获取完整选项参考，包括跨格式组语法。

Workflow

流程

  1. Run jscpd with 
    --reporters ai
    on the target path
  2. Parse each clone line to identify the two duplicated locations (file + line range)
  3. Read both code fragments from the source files
  4. Understand what the duplicated code does
  5. Design a refactoring: extract a shared function, class, module, or constant
  6. Apply the refactoring — update both locations and all other usages
  7. Re-run jscpd to confirm the clone is eliminated
  8. Repeat for remaining clones, highest-impact first
  1. 在目标路径上运行带有
    --reporters ai
    参数的jscpd
  2. 解析每一行重复代码记录，确定两个重复位置（文件+行范围）
  3. 从源文件中读取两段重复代码片段
  4. 理解重复代码的功能
  5. 设计重构方案：提取共享函数、类、模块或常量
  6. 实施重构——更新两个重复位置以及所有其他引用处
  7. 重新运行jscpd确认重复代码块已消除
  8. 对剩余重复代码块重复上述步骤，优先处理影响最大的

Refactoring Strategies

重构策略

Extract function — when the duplicate is a block of logic:
ts
// Before: same block in two places
// After: shared function called from both places
Extract module/utility — when the duplicate spans multiple files in different domains:
ts
// Move shared logic to a shared utility file and import it
Extract constant or config — when the duplicate is repeated data or configuration.
Template/base class — when the duplicate is structural (e.g., repeated class shape).
Always ensure:
  • All call sites are updated, not just the two reported by jscpd
  • Tests still pass after refactoring
  • The extracted abstraction has a clear, descriptive name
提取函数——当重复内容是一段逻辑代码块时：
ts
// Before: same block in two places
// After: shared function called from both places
提取模块/工具类——当重复内容跨多个不同领域的文件时：
ts
// Move shared logic to a shared utility file and import it
提取常量或配置——当重复内容是重复的数据或配置时。
模板/基类——当重复内容是结构性的（如重复的类结构）时。
始终确保：
  • 所有调用位置都已更新，而不仅仅是jscpd报告的两个位置
  • 重构后测试仍然通过
  • 提取的抽象内容具有清晰、描述性的名称

Tips

小贴士

  • Start with clones that have the highest line count — they have the most impact
  • A clone between test files may indicate a missing test helper
  • Clones across unrelated modules may signal a missing shared utility
  • A cross-format clone (same logic in a 
    .js
    and a 
    .ts
    file, found with 
    --cross-formats
    ) often means code was ported without deleting the original — consolidate into one implementation (usually the TypeScript one) and update imports, rather than extracting a third shared copy
  • Use 
    --min-lines 10
    to filter noise and focus on meaningful duplications
  • 从行数最多的重复代码块开始处理——它们的影响最大
  • 测试文件之间的重复代码块可能意味着缺少测试辅助工具
  • 跨无关模块的重复代码块可能表明缺少共享工具类
  • 跨格式重复代码块（使用
    --cross-formats
    检测到的
    .js
    和
    .ts
    文件中的相同逻辑）通常意味着代码被移植但未删除原文件——将其合并为一个实现（通常是TypeScript版本）并更新引用，而不是提取第三个共享副本
  • 使用
    --min-lines 10
    过滤无意义的重复，专注于有意义的重复代码