w
文檔 核心工具 Text Diff

進階功能

Text Diff 工具提供廣泛的進階功能，使其成為專業文字比較的強大工具。

智慧比較演算法

上下文感知差異檢測

工具使用進階演算法來：

  • 語義變更：識別不僅是表面差異
  • 上下文變更：識別影響周圍程式碼的修改
  • 結構變更：追蹤巢狀資料結構中的變更

最佳化行處理

  • 智慧行對應：找到相似行之間的最佳匹配
  • 上下文行：顯示周圍行以提供更好的理解
  • 最小變更：識別可能的最少變更數量

進階比較選項

空白字元處理

// 啟用「忽略空白字元」時
// 這些行被視為相同：
const name = 'John'; // 檔案A
const name = 'John'; // 檔案B

使用案例：

  • 程式碼格式化衝突
  • 不同編輯器設定
  • 自動程式碼格式化

大小寫處理

// 啟用「忽略大小寫」時
// 這些物件被視為相同：
{
  "Name": "John", // 檔案A
  "name": "John" // 檔案B
}

使用案例：

  • 設定檔案
  • 資料庫架構
  • API 回應

檔案格式支援

程式設計語言

語言副檔名語法高亮
JavaScript.js, .mjs✅
TypeScript.ts, .tsx✅
Python.py✅
Java.java✅
C/C++.c, .cpp, .h✅
C#.cs✅
Go.go✅
Rust.rs✅
PHP.php✅

網頁技術

格式副檔名特殊功能
HTML.html, .htm標籤結構分析
CSS.css, .scss, .sass選擇器比較
Vue.vue元件分析
React.jsx, .tsxJSX 語法

資料格式

格式副檔名結構分析
JSON.json物件階層
XML.xml元素結構
YAML.yml, .yaml巢狀結構
TOML.toml設定結構

歷史記錄管理

智慧歷史功能

自動分類

工具自動分類比較：

  • 程式碼比較：開發和除錯階段
  • 設定比較：環境和設定變更
  • 文件比較：內容和結構變更

元資料追蹤

每個歷史記錄包含：

{
  "timestamp": "2024-01-15T10:30:00Z",
  "fileType": "javascript",
  "linesChanged": 15,
  "changeType": "feature-addition",
  "tags": ["frontend", "component", "bugfix"]
}

歷史組織

搜尋功能

  • 文字搜尋：按內容搜尋歷史記錄
  • 日期篩選：按時間段篩選
  • 類型篩選：按檔案類型或變更類型篩選

匯出選項

  • 個別比較：匯出特定比較
  • 批次匯出：同時匯出多個比較
  • 格式：JSON、CSV、HTML、Markdown

效能最佳化

大型檔案

分塊處理

工具將大型檔案分塊處理：

// 基於檔案大小的自動分塊大小
const chunkSize = Math.min(1000, Math.max(100, fileSize / 100));

延遲載入

  • 漸進式顯示：處理期間顯示結果
  • 虛擬滾動：大型 diff 結果的高效顯示
  • 記憶體管理：最佳化記憶體使用

瀏覽器最佳化

Web Workers

// 在獨立執行緒中計算 diff
const worker = new Worker('/diff-worker.js');
worker.postMessage({ fileA, fileB, options });

快取策略

  • Local Storage：歷史記錄快取
  • Session Storage：會話期間的臨時儲存
  • IndexedDB：大型資料的持久儲存

API 整合

程式化存取

// 範例：自動化 diff 建立
const diffResult = await textDiffAPI.compare({
  fileA: {
    content: '原始內容',
    name: 'original.txt',
  },
  fileB: {
    content: '修改內容',
    name: 'modified.txt',
  },
  options: {
    ignoreWhitespace: true,
    ignoreCase: false,
  },
});

Webhook 支援

// 變更的自動通知
const webhook = {
  url: 'https://your-app.com/diff-notifications',
  events: ['diff.created', 'diff.updated'],
  secret: 'your-webhook-secret',
};

安全功能

隱私保護

本地處理

  • 無伺服器傳輸：所有處理在瀏覽器中進行
  • 加密：敏感資料加密儲存
  • 自動清理：臨時資料自動刪除

存取控制

// 範例：基於使用者的存取控制
const accessControl = {
  user: 'developer@company.com',
  permissions: ['read', 'create', 'update'],
  restrictions: {
    maxFileSize: '10MB',
    allowedFormats: ['.js', '.ts', '.json'],
  },
};

稽核日誌

{
  "action": "diff.created",
  "user": "user@example.com",
  "timestamp": "2024-01-15T10:30:00Z",
  "metadata": {
    "fileSize": "2.5KB",
    "changeCount": 15,
    "ipAddress": "192.168.1.100"
  }
}

自訂選項

UI 自訂

主題

  • 淺色主題：明亮專業的外觀
  • 深色主題：夜間工作的深色外觀
  • 高對比：改善的可讀性
  • 自訂主題：使用者定義的顏色和樣式

版面選項

const layoutOptions = {
  orientation: 'horizontal', // 或 "vertical"
  panelSize: '50%', // 面板分割
  showLineNumbers: true, // 顯示行號
  showStatistics: true, // 顯示統計
  compactMode: false, // 緊湊模式
};

進階設定

比較選項

const advancedOptions = {
  contextLines: 3, // 上下文行數
  maxChanges: 1000, // 最大變更數
  timeout: 30000, // 逾時（毫秒）
  algorithm: 'myers', // diff 演算法
  encoding: 'utf-8', // 檔案編碼
};

開發工具整合

IDE 整合

VS Code 擴充功能

{
  "name": "text-diff-tool",
  "version": "1.0.0",
  "engines": {
    "vscode": "^1.60.0"
  },
  "contributes": {
    "commands": [
      {
        "command": "textDiff.compareFiles",
        "title": "Compare with Text Diff Tool"
      }
    ]
  }
}

Git 整合

# 自動 diff 建立的 Git 鉤子
#!/bin/sh
git diff --cached | curl -X POST \
  -H "Content-Type: application/json" \
  -d @- \
  https://text-diff-tool.com/api/compare

CI/CD 管道

# GitHub Actions 範例
name: Text Diff Check
on: [pull_request]
jobs:
  diff-check:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v2
      - name: Compare Files
        run: |
          curl -X POST \
            -H "Content-Type: application/json" \
            -d '{"fileA": "${{ github.event.pull_request.base.sha }}", "fileB": "${{ github.sha }}"}' \
            https://text-diff-tool.com/api/compare

這些進階功能使 Text Diff 工具成為專業開發者和團隊的必備工具。

這個頁面對您有幫助嗎？