本文將介紹本項(xiàng)目中 文本差異對(duì)比器 (Text Diff Checker) 工具的技術(shù)實(shí)現(xiàn)細(xì)節(jié)。該工具基于 Vue 3 框架開(kāi)發(fā)，核心對(duì)比邏輯采用原生的 JavaScript 實(shí)現(xiàn)，通過(guò)動(dòng)態(tài)加載的方式與 Vue 組件進(jìn)行交互。

在線工具網(wǎng)址：https://see-tool.com/diff-checker

工具截圖：

1. 架構(gòu)設(shè)計(jì)

為了保證核心算法的獨(dú)立性和復(fù)用性，我們將 Diff 算法邏輯封裝在 public/js/diff-checker.js 中，而 Vue 組件 pages/diff-checker.vue 僅負(fù)責(zé) UI 交互和數(shù)據(jù)展示。

• 數(shù)據(jù)層 (Core JS): 負(fù)責(zé)文本的預(yù)處理、Diff 算法計(jì)算、HTML 渲染字符串生成以及統(tǒng)計(jì)信息計(jì)算。
• 視圖層 (Vue): 負(fù)責(zé)用戶(hù)輸入、選項(xiàng)配置、調(diào)用核心方法并展示結(jié)果。

2. 核心算法實(shí)現(xiàn) (diff-checker.js)

核心邏輯是一個(gè)基于 最長(zhǎng)公共子序列 (LCS, Longest Common Subsequence) 的 Diff 算法。

2.1 文本預(yù)處理與并在

根據(jù)用戶(hù)選擇的“對(duì)比模式”，我們將輸入文本分割成不同的單元：

• 行模式 (Line): 使用 split('\n') 按換行符分割。
• 詞模式 (Word): 使用 split(/\s+/) 按空白字符分割。
• 字符模式 (Char): 使用 split('') 逐字符分割。

同時(shí)，根據(jù)配置選項(xiàng)處理“忽略空格”和“忽略大小寫(xiě)”：

if (ignoreWhitespace) {
    processedText1 = processedText1.replace(/\s+/g, ' ').trim();
    processedText2 = processedText2.replace(/\s+/g, ' ').trim();
}
// 忽略大小寫(xiě)則統(tǒng)一轉(zhuǎn)為小寫(xiě)

2.2 LCS 算法與回溯

使用動(dòng)態(tài)規(guī)劃構(gòu)建 DP 表，計(jì)算最長(zhǎng)公共子序列的長(zhǎng)度：

// DP 表構(gòu)建
for (let i = 1; i <= m; i++) {
    for (let j = 1; j <= n; j++) {
        if (arr1[i - 1] === arr2[j - 1]) {
            dp[i][j] = dp[i - 1][j - 1] + 1;
        } else {
            dp[i][j] = Math.max(dp[i - 1][j], dp[i][j - 1]);
        }
    }
}

構(gòu)建完成后，通過(guò)回溯 (Backtrack) 找出具體的 LCS 路徑。

2.3 構(gòu)建 Diff 結(jié)果

根據(jù) LCS 路徑，遍歷原始序列，確定哪些部分是“新增 (added)”、“刪除 (removed)”或“未變 (unchanged)”。

• 如果當(dāng)前元素在 LCS 中，標(biāo)記為 unchanged。
• 如果原序列中有但 LCS 中沒(méi)有，標(biāo)記為 removed。
• 如果新序列中有但 LCS 中沒(méi)有，標(biāo)記為 added。

2.4 結(jié)果渲染

為了提高性能，Diff 的結(jié)果直接由 JS 生成 HTML 字符串，而不是在 Vue 中使用 v-for 渲染成千上萬(wàn)個(gè) DOM 節(jié)點(diǎn)。生成的 HTML 包含了行號(hào)、差異標(biāo)識(shí)（+/-）以及高亮樣式類(lèi)。

/* 生成的 HTML 結(jié)構(gòu)示例 */
<div class="diff-line diff-line-removed">
  <span class="diff-line-number">1</span>
  <span class="diff-line-number"></span>
  <span class="mr-2">-</span>
  Content
</div>

3. Vue 組件實(shí)現(xiàn) (diff-checker.vue)

3.1 動(dòng)態(tài)加載腳本

Vue 組件在掛載或需要使用時(shí)，通過(guò)創(chuàng)建 <script> 標(biāo)簽動(dòng)態(tài)加載核心 JS 文件。為了防止重復(fù)加載，我們通過(guò)檢查 window.DiffChecker 是否存在來(lái)判斷。

const loadDiffCheckerScript = () => {
  if (window.DiffChecker) return Promise.resolve();
  // 創(chuàng)建 script 標(biāo)簽加載 /js/diff-checker.js
  // 監(jiān)聽(tīng) onload 和 onerror 事件
}

3.2 調(diào)用對(duì)比

當(dāng)用戶(hù)點(diǎn)擊“開(kāi)始對(duì)比”時(shí)，組件收集 leftText、rightText 以及 compareMode、ignoreWhitespace 等選項(xiàng)，調(diào)用核心對(duì)象的 compare 方法：

const result = window.DiffChecker.compare(leftText.value, rightText.value, compareMode.value, {
  ignoreWhitespace: ignoreWhitespace.value,
  ignoreCase: ignoreCase.value,
  showLineNumbers: showLineNumbers.value
})

3.3 結(jié)果展示

核心方法返回的 result 對(duì)象中包含了 diffHtml（差異內(nèi)容的 HTML）和 statisticsHtml（統(tǒng)計(jì)信息的 HTML）。Vue 組件直接使用 v-html 指令將其渲染到頁(yè)面上：

<div v-if="statisticsHtml" v-html="statisticsHtml"></div>
<div ref="diffOutput" v-html="diffOutputHtml"></div>

通過(guò)這種 Vue 處理交互 + 原生 JS 處理計(jì)算密集任務(wù)的分離模式，我們既保持了前端框架的開(kāi)發(fā)效率，又保證了對(duì)比功能的性能與靈活性。

以上就是Vue3文本差異對(duì)比器的實(shí)現(xiàn)方案的詳細(xì)內(nèi)容，更多關(guān)于Vue3文本差異對(duì)比器的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章！

最新評(píng)論