示例 - 文本差异对比工具

代码比较示例

JavaScript 函数更改

文件 A: original.js

function calculateTotal(items) {
  let total = 0;
  for (let i = 0; i < items.length; i++) {
    total += items[i].price;
  }
  return total;
}

文件 B: modified.js

function calculateTotal(items) {
  let total = 0;
  for (const item of items) {
    total += item.price;
  }
  return total;
}

差异结果：

  1   1 | function calculateTotal(items) {
  2   2 |     let total = 0;
- 3     |     for (let i = 0; i < items.length; i++) {
- 4     |         total += items[i].price;
+ 3   3 |     for (const item of items) {
+ 4   4 |         total += item.price;
  5   5 |     }
  6   6 |     return total;
  7   7 | }

统计信息：

新增：2 行
删除：2 行
修改：0 行
未变更：5 行

配置文件更新

文件 A: config.json

{
  "database": {
    "host": "localhost",
    "port": 5432,
    "name": "myapp"
  },
  "server": {
    "port": 3000,
    "debug": false
  }
}

文件 B: config.json

{
  "database": {
    "host": "localhost",
    "port": 5432,
    "name": "myapp",
    "ssl": true
  },
  "server": {
    "port": 3000,
    "debug": true,
    "cors": {
      "origin": "*"
    }
  }
}

差异结果：

  1   1 | {
  2   2 |     "database": {
  3   3 |         "host": "localhost",
  4   4 |         "port": 5432,
  5   5 |         "name": "myapp",
+ 6   6 |         "ssl": true
  6   7 |     },
  7   8 |     "server": {
  8   9 |         "port": 3000,
- 9     |         "debug": false
+ 9  10 |         "debug": true,
+10  11 |         "cors": {
+11  12 |             "origin": "*"
+12  13 |         }
  13  14 |     }
  14  15 | }

文档比较示例

Markdown 文档

文件 A: README.md

# 我的项目

一个用于学习的简单项目。

## 功能

- 基本功能
- 简单界面

## 安装

```bash
npm install
```

使用

运行项目：

npm start


**文件 B: README.md**
```markdown
# 我的项目

一个用于学习和开发的综合项目。

## 功能

- 高级功能
- 现代界面
- 实时更新
- 错误处理

## 安装

```bash
npm install
npm run build

使用

运行项目：

npm start

开发

开发模式：

npm run dev


**差异结果：**

1 1 | # 我的项目 2 2 |

3 | 一个用于学习的简单项目。

3 3 | 一个用于学习和开发的综合项目。 4 4 | 5 5 | ## 功能 6 6 |

7 | - 基本功能
8 | - 简单界面

7 7 | - 高级功能
8 8 | - 现代界面
9 9 | - 实时更新 +10 10 | - 错误处理 11 11 | 12 12 | ## 安装 13 13 | 14 14 | bash 15 15 | npm install +16 16 | npm run build 16 17 | 17 18 | 18 19 | ## 使用 19 20 | 20 21 | 运行项目： 21 22 | 22 23 | bash 23 24 | npm start 24 25 | 25 26 | +26 27 | ## 开发 +27 28 | +28 29 | 开发模式： +29 30 | +30 31 | bash +31 32 | npm run dev +32 33 |


## CSS 样式更改

**文件 A: styles.css**
```css
.button {
    background-color: blue;
    color: white;
    padding: 10px;
    border: none;
    border-radius: 4px;
}

.button:hover {
    background-color: darkblue;
}

文件 B: styles.css

.button {
  background-color: #007bff;
  color: white;
  padding: 12px 24px;
  border: none;
  border-radius: 6px;
  font-size: 16px;
  transition: background-color 0.3s ease;
}

.button:hover {
  background-color: #0056b3;
}

.button:disabled {
  background-color: #6c757d;
  cursor: not-allowed;
}

HTML 结构更改

文件 A: index.html

<!DOCTYPE html>
<html>
  <head>
    <title>我的应用</title>
  </head>
  <body>
    <h1>欢迎</h1>
    <p>这是我的应用。</p>
  </body>
</html>

文件 B: index.html

<!DOCTYPE html>
<html lang="zh">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>我的应用</title>
    <link rel="stylesheet" href="styles.css" />
  </head>
  <body>
    <header>
      <h1>欢迎使用我的应用</h1>
    </header>
    <main>
      <p>这是我的具有新功能的惊人应用。</p>
      <button class="cta-button">开始使用</button>
    </main>
    <footer>
      <p>&copy; 2024 我的应用</p>
    </footer>
  </body>
</html>

YAML 配置更改

文件 A: docker-compose.yml

version: '3.8'
services:
  web:
    image: nginx
    ports:
      - '80:80'
  db:
    image: postgres
    environment:
      POSTGRES_DB: myapp

文件 B: docker-compose.yml

version: '3.8'
services:
  web:
    image: nginx:alpine
    ports:
      - '80:80'
    volumes:
      - ./html:/usr/share/nginx/html
  db:
    image: postgres:13
    environment:
      POSTGRES_DB: myapp
      POSTGRES_USER: user
      POSTGRES_PASSWORD: password
    volumes:
      - postgres_data:/var/lib/postgresql/data

volumes:
  postgres_data:

使用差异选项

忽略空白字符示例

文件 A：

function test() {
    return "hello";
}

文件 B：

function test() {
    return "hello";
}

启用忽略空白字符时，尽管缩进不同，这些文件被视为相同。

忽略大小写示例

文件 A：

DATABASE_HOST=localhost
DATABASE_PORT=5432

文件 B：

database_host=localhost
database_port=5432

启用忽略大小写时，这些配置文件被视为相同。

真实世界用例

1. 代码审查

比较不同版本的代码以：

识别团队成员所做的更改
审查拉取请求
跟踪错误修复和功能添加

2. 配置管理

比较配置文件以：

跟踪环境特定的更改
验证配置更新
记录配置更改

3. 文档更新

比较文档版本以：

跟踪内容更改
审查编辑更新
维护版本历史

4. 数据迁移

比较数据文件以：

验证数据转换
检查数据完整性
跟踪数据更改

有效比较的技巧

1. 使用描述性文件名

config-prod.json vs config-dev.json
README-v1.md vs README-v2.md
script-original.js vs script-updated.js

2. 选择适当的选项

在比较格式不同的代码时启用忽略空白字符
在不区分大小写的比较时启用忽略大小写
为最大灵活性同时使用两个选项

3. 审查统计信息

检查统计信息以了解更改范围
使用统计信息优先考虑审查工作
在统计信息中查找意外更改

4. 保存重要比较

使用历史功能保存重要比较
定期清除历史以保持性能
使用描述性名称便于识别

下一步

现在您已经看到了文本差异对比工具的实际应用，查看常见问题了解常见问题的答案和故障排除技巧。

这个页面对您有帮助吗？

On this page

代码比较示例文档比较示例使用使用开发 HTML 结构更改 YAML 配置更改使用差异选项真实世界用例有效比较的技巧下一步