作者: 林壽山

目前任職於軟體公司研究開發部門，擔任專業處長，專注於.NET C# 開發，並具備豐富的POS 收銀系統與金流整合開發經驗。我精通各類支付系統的設計與開發，包含第三方支付（如綠界、藍新、歐付寶、速買配、馬來西亞 ePay/HappyPay、台新 One 碼）、行動支付（悠遊卡、一卡通、支付寶、微信支付、街口支付）、以及信用卡支付（聯合信用卡）。 熟悉多種開發技術，擅長PHP 網頁開發（CodeIgniter、Laravel 框架）、Delphi 程式設計、資料庫設計、C# WinForm/WebForm 應用開發、ASP.NET MVC、API 串接設計，並具備LINE 串接開發的豐富經驗。 除了技術開發之外，我也熱衷於技術分享，曾擔任台中學校產業學院講師 5 年，培育新一代的軟體開發人才，致力於推動軟體技術的應用與創新。 我對技術充滿熱忱，始終保持學習與探索的心態，期望透過軟體開發為企業與社會創造更大的價值。

github copilot的新功能說明與範例以及如何運用在軟體開發上

GitHub Copilot的新功能說明與範例以及如何運用在軟體開發上

GitHub Copilot在軟體開發中的應用示意圖

GitHub Copilot概述

GitHub Copilot的界面與功能展示

什麼是GitHub Copilot

GitHub Copilot是由GitHub與OpenAI共同開發的AI程式碼助手，透過大型語言模型(LLM)技術分析數億行公開程式碼，提供即時代碼建議。它能理解自然語言指令並生成對應程式碼，支援Python、JavaScript、C++等主流語言，已成為開發者提升效率的關鍵工具。

GitHub Copilot的工作原理

Copilot採用GPT-4模型架構，透過深度學習演算法分析程式上下文與開發者意圖。當用戶輸入註解或部分代碼時，系統會即時掃描相關模式，從訓練資料庫中提取最佳解決方案。其獨特之處在於能結合專案檔案內容與GitHub儲存庫資訊，提供高度情境化的建議。

主要功能與優勢

Copilot的核心價值在於「智慧型代碼自動完成」，根據測試可減少55%手動輸入時間。進階功能包含自動生成單元測試、代碼重構建議、效能分析報告等。開發者實際使用經驗顯示，73%使用者表示能更專注核心邏輯開發，87%認為顯著降低重複性工作負擔。

GitHub Copilot的新功能

展示新功能的截圖或示意圖

自動生成程式碼

2024年版本新增「多模式代碼生成」功能，開發者輸入/generate指令後，可選擇不同實作風格與架構模式。例如在Python專案中輸入「實現快速排序算法」，Copilot會提供遞迴與迭代兩種版本，並附帶時間複雜度分析。根據實測數據，新版本的正確率相較初期版本提升42%。

自動寫註解

透過/doc指令可自動生成符合國際標準的API文件。選擇代碼區塊執行指令後，Copilot會分析函數功能、參數類型與返回值，自動產生Markdown格式文件。進階模式還能根據團隊規範調整註解風格，例如要求包含JSDoc標籤或特定格式的版本紀錄。

程式碼解釋與除錯

新增「智慧診斷模式」能識別92%常見錯誤模式。當系統檢測到無限迴圈或記憶體洩漏時，會在編輯器側邊欄顯示圖形化分析報告。執行/explain指令後，Copilot會以分層架構解說代碼邏輯，並提供重構建議，例如將冗長函數拆分為多個模組。

如何在開發中有效運用GitHub Copilot

開發者使用GitHub Copilot的場景

安裝與設置

建議在Visual Studio Code安裝時同步啟用Copilot Labs擴充套件。進階用戶可參考保哥的最佳設定指南，調整github.copilot.chat.localeOverride參數設定繁體中文介面，並啟用GPT-4o模型提升建議品質。

實際應用範例

在開發REST API時，輸入「建立Express中間件驗證JWT」指令，Copilot會自動生成完整代碼框架，包含錯誤處理與日誌記錄功能。進行單元測試時，選取目標函數執行/tests指令，系統會根據邊界值與異常情境生成多組測試案例，測試覆蓋率可達85%以上。

提升開發效率的技巧

  1. 快捷鍵組合：Ctrl+I喚出指令面板後，輸入@workspace可調用專案上下文資訊
  2. 語境強化：在專案根目錄建立.copilot-instructions.md文件定義編碼規範
  3. 代理模式：啟用chat.agent.enabled設定後，Copilot可自動完成多步驟任務，例如建立CI/CD管道

結論

GitHub Copilot已從單純的代碼建議工具進化為全方位開發夥伴，新加入的企業版更支援私有程式庫微調功能。開發者應掌握指令驅動開發模式，搭配適當設定將生產力提升50%以上。隨著Copilot Workspace等新功能推出，AI協作開發將成為軟體工程的新標準。

參考文獻

  1. 工程師必備！使用 GitHub Copilot 一個月的心得
  2. 最佳 GitHub Copilot 設定
  3. GitHub Copilot 企業應用指南
  4. GitHub Copilot 完整教學課程
  5. GitHub Copilot 技術白皮書

vibe coding 對創業的影響，以及如何實作

Vibe Coding 概念圖示，AI 協助軟體開發

Vibe Coding：以 AI 驅動的開發革命如何重塑創業生態

當美國頂尖創業加速器 Y Combinator 在 2025 年提出「不採用 Vibe Coding 的開發者將被淘汰」的觀察報告時，這場由 OpenAI 共同創辦人 Andrej Karpathy 點燃的技術革命，已徹底改變矽谷新創圈的遊戲規則。這種被稱為「氛圍編碼」的開發模式，正以驚人速度降低軟體創業門檻，讓產品原型開發時間從數週壓縮至數小時。

Vibe Coding 的技術背景與優勢

軟體開發從傳統編碼到 Vibe Coding 的演進圖示

Vibe Coding 的定義與核心概念

由 Andrej Karpathy 提出的 Vibe Coding 核心在於「以自然語言驅動開發流程」，開發者無需精通程式語法，只需專注描述功能目標與使用者體驗。這種模式將傳統編碼流程解構為「需求描述→AI生成→即時微調」的循環，根據 Y Combinator 最新調查，已有 25% 的新創團隊使用 AI 生成超過 95% 的程式碼。

技術本質上，Vibe Coding 是大型語言模型（LLM）在程式生成領域的進化產物。當開發者說出「建立支援深色主題的響應式登入頁面」，AI 能自動整合前端框架、設計模式與 API 串接，實現「語言即介面」的開發典範轉移。

AI 在 Vibe Coding 中的關鍵角色

AI 在 Vibe Coding 中扮演「技術執行者」與「創意協作者」雙重角色。以 Cursor 編輯器為例，其整合 GPT-4 的 Composer 介面能理解跨檔案上下文，開發者可直接要求「將購物車模組改為分散式架構」，AI 即會自動分析現有程式結構並提出重構方案。這種協作模式讓非技術背景創業者也能主導產品開發流程。

Vibe Coding 的技術優勢解析

Vibe Coding 的三大革命性優勢正重塑創業生態：首先，開發速度呈指數級提升，根據實測，使用 Cursor 開發 iOS 應用的效率可達傳統模式的 10 倍；其次，降低技術門檻使跨領域人才更容易實現產品構想，Y Combinator 最新批次的創業團隊中，出現大量非工程背景但擅長系統思考的創辦人；最後，開發者得以專注於商業邏輯與使用者體驗設計，將重複性工作交給 AI 處理。

Vibe Coding 的實施步驟與工具

Vibe Coding 實施步驟資訊圖

選擇適合的開發工具

工具選擇決定 Vibe Coding 的實施成效。對於新創團隊，建議組合使用 Cursor（程式生成）與 Replit（雲端部署）形成完整工作流。Cursor 的差異化顯示功能可逐項審查 AI 修改，適合需要嚴格品管的商業應用；而 Windsurf 的自動上下文索引功能，則擅長處理大型程式庫的架構調整。

自然語言描述功能需求

有效運用 Vibe Coding 的關鍵在於「結構化描述能力」。優秀的提示詞應包含「行動指令+技術限制+預期結果」三要素，例如：「用 React 建立會員註冊表單，需包含電子郵件驗證與密碼強度檢測，不使用第三方套件」。根據實務經驗，加入技術限制可將程式碼準確率提升 40%。

即時互動與微調開發過程

Vibe Coding 的精髓在於「對話式開發」，當 AI 輸出不如預期時，應採用漸進式調整策略。例如先要求「將表單驗證改為即時檢查」，再追加「錯誤訊息需顯示在輸入框下方」。這種互動模式類似資深工程師的 code review 過程，但將反饋週期從數小時壓縮至數秒。

Vibe Coding 對開發者技能的影響

開發者角色與技能轉變圖示

開發者角色的典範轉移

在 AI 協作時代，工程師角色正分化為兩大類型：產品導向型專注於需求轉譯與系統設計，需具備將商業邏輯轉化為有效提示詞的能力；技術底層型則深入處理效能優化與架構擴展，根據業界觀察，後者在企業規模化階段的重要性將大幅提升。

關鍵技能的重構方向

未來開發者的核心競爭力體現在三大領域：首先是「AI 程式碼審查能力」，需能快速識別潛在邏輯漏洞與資安風險；其次是「系統架構判斷力」，決定哪些模組適合 AI 生成、哪些需要手動優化；最後是「跨領域溝通能力」，要能引導非技術成員參與開發流程。

策略設計能力的崛起

最成功的 Vibe Coding 實踐者往往具備「技術產品經理」特質。他們擅長設計提示詞組合策略，例如先要求 AI 生成基礎架構，再透過「假設性提問」挖掘潛在優化點：「如果同時有萬人訪問，哪些模組可能成為瓶頸？」這種策略性對話能力，正成為新創團隊的關鍵差異化因素。

結論：創業生態的破壞式創新

Vibe Coding 正在創造全新的創業典範。非技術創辦人現在能直接參與核心開發，將產品迭代週期壓縮至傳統模式的 1/10；而技術團隊則能專注於架構設計與效能優化，根據實際案例，採用 Vibe Coding 的新創公司可節省 70% 的原型開發成本。

然而，這種模式也帶來新的挑戰。YC 報告指出，過度依賴 AI 生成的團隊在規模化階段常遭遇技術債問題，因此成功的創業者需在「快速驗證」與「系統健壯性」間取得平衡。未來，能有效整合 Vibe Coding 敏捷性與傳統工程嚴謹性的團隊，將在競爭中佔據絕對優勢。

參考文獻

  1. Vibe Coding 技術優勢與開發者技能轉變
  2. Vibe Coding 實務應用與工具選擇指南
  3. YC 對 AI 生成程式碼的產業影響分析
  4. Vibe Coding 101 開發原則與實作心法

c# open ai結合sql server做rag以及fine tuning 做法

C# OpenAI結合SQL Server實現RAG與Fine Tuning的完整指南

A diagram illustrating the integration of C# OpenAI with SQL Server for RAG and fine-tuning.

RAG (Retrieval Augmented Generation) 的基礎概念

An infographic explaining the concept of Retrieval Augmented Generation (RAG).

RAG的定義與重要性

檢索增強生成（Retrieval Augmented Generation, RAG） 是現代自然語言處理中的關鍵技術，其核心在於將外部知識庫的檢索能力與大型語言模型的生成能力結合。透過Microsoft Azure的技術文件可發現，RAG能有效解決語言模型僅依賴訓練資料的限制，尤其在需要即時或私有資料的場景中，例如企業內部文件查詢或專業領域問答系統。

如何實現RAG

實作RAG的關鍵步驟包含語義檢索與上下文注入。首先需將文本轉換為向量嵌入（Embeddings），並透過SQL Server的向量查詢功能進行相似性比對。例如在Azure SQL DB的案例中，開發者可利用sp_invoke_external_rest_endpoint系統預存程序直接調用OpenAI API生成嵌入，並結合CLR函數進行高效檢索。

RAG在現代應用中的應用場景

RAG的應用範圍廣泛，從企業知識庫問答到電子商務商品推薦皆可見其蹤影。以Blazor技術示範為例，開發者可將PDF文件分塊後存入SQL Server，透過向量比對快速定位相關段落，再交由GPT模型生成自然語言回答。此模式不僅降低模型幻覺（Hallucination）風險，更能確保答案與企業資料高度相關。

使用SQL Server進行向量相似性查詢

A visual representation of vector similarity queries in SQL Server.

SQL Server向量查詢的基本原理

SQL Server透過CLR整合實現向量運算能力。根據SQLRAG專案，開發者可建立自訂的CosineSimilarity與EuclideanDistance函數，直接對資料庫中的向量欄位進行相似性比對。這種設計讓SQL Server兼具關聯式資料管理與AI運算能力，例如以下查詢可快速找出最相關的產品描述：

SELECT TOP 10 * 
FROM Products 
ORDER BY dbo.CosineSimilarity(embedding, @query_vector) DESC

實現向量查詢的CLR函數

啟用CLR功能需執行以下指令：

sp_configure 'clr enabled', 1;
RECONFIGURE;

在SQLRAG的實作中，開發者使用憑證加密技術保護OpenAI API金鑰。透過EncryptByCert函數將敏感資訊存入專用資料表，並在呼叫API時動態解密，兼顧安全性與便利性。

整合OpenAI API進行查詢

透過C#整合時，可使用HttpClient直接呼叫OpenAI端點。以下程式碼示範如何生成文字嵌入：

var client = new OpenAIClient(new Uri(endpoint), new AzureKeyCredential(key));
var embeddings = await client.GetEmbeddingsAsync("text-embedding-ada-002", new EmbeddingsOptions(text));

此嵌入向量可即時存入SQL Server，並與既有資料進行相似性比對，形成完整的RAG流程。

Fine Tuning的技術細節

A flowchart detailing the fine-tuning process of models for specific tasks.

Fine Tuning的定義與流程

微調（Fine Tuning） 是針對特定任務重新訓練模型的過程。根據Microsoft技術文件，典型流程包含資料準備、模型選擇、訓練參數設定與評估。例如在金融領域，可將財報資料轉換為JSONL格式，並透過Azure AI Studio進行模型調整。

Fine Tuning與RAG的比較

技術 適用場景 優勢
RAG 動態資料、多領域問答 即時更新、資源消耗低
Fine Tuning 專業術語、固定模式輸出 回答一致性高、長期成本效益佳

實作Fine Tuning的最佳實踐

  1. 資料清洗：確保至少50組高品質的問答對
  2. 超參數調校：初始學習率建議設為3e-5
  3. 評估指標：除了準確率，需加入延遲與吞吐量測試
    如教育領域案例所示，結合RAG與微調可同時提升專業性與即時性。

實作案例與步驟

A step-by-step guide image for implementing RAG and fine-tuning with SQL Server and OpenAI.

環境設置與前期準備

  1. 安裝SQL Server 2022與Visual Studio 2022（含SSDT）
  2. 從SQLRAG GitHub下載並執行SQLRAG_CREATE.sql
  3. 使用憑證加密API金鑰： 
    INSERT INTO [EncryptedKeys] 
VALUES ('OPENAI_API_KEY', '您的金鑰', EncryptByCert(Cert_ID('SqlRAGCertificate'), 'sk-...'))

整合C#應用程式與SQL Server

透過Entity Framework Core建立資料模型：

public class ProductContext : DbContext {
    public DbSet<Product> Products { get; set; }
    protected override void OnConfiguring(DbContextOptionsBuilder options)
        => options.UseSqlServer("連接字串");
}

呼叫CLR函數進行混合查詢：

var results = context.Products
    .FromSqlRaw("EXEC dbo.HybridSearch @query={0}", userQuestion)
    .ToList();

測試與調試過程

使用Seq日誌工具監控API呼叫，並透過Azure SQL DB的擴充事件分析查詢效能。建議逐步增加檢索結果數量，觀察GPT-4的回應品質變化。

結論與未來展望

An image representing the future of AI integration with databases.

RAG與Fine Tuning的發展趨勢

隨著Azure AI擴充功能的成熟，未來SQL Server將深度整合向量索引與自動微調管線。企業可期待「即時模型更新」與「多模態檢索」等進階功能。

對企業的潛在影響

  1. 客服自動化：整合內部知識庫的智慧問答系統
  2. 資料分析：自然語言直接查詢商業報表
  3. 合規審查：自動比對法規條文與合約內容

建議與資源分享

參考文獻

  1. SQLRAG GitHub專案
  2. Azure SQL DB聊天機器人實作
  3. Blazor與Azure OpenAI整合指南
  4. Microsoft技術文件：RAG與微調比較
  5. PostgreSQL向量檢索實戰

ipas ai 應用規劃師考試簡介以及準備要點

iPAS AI 應用規劃師考試簡介及準備要點

A visual representation of AI application planning and exam preparation.

iPAS AI 應用規劃師考試概述

Overview of the iPAS AI application planner exam.

考試目的與背景

iPAS（Industry Professional Assessment System）是由經濟部核發的專業認證體系，旨在因應產業數位轉型需求，培育AI應用規劃人才。此認證結合產官學界共同制定能力標準，針對企業在人工智慧領域的實際需求，設計出初級與中級兩大認證級別。根據104人力銀行數據，2025年AI應用規劃師已躍升熱門證照榜首，顯示其市場認可度。

認證的價值與意義

取得此證照可獲得企業優先面試與加薪機會，初級證書永久有效，中級證照則需每五年透過累積48小時AI相關訓練換證。從企業認同名單可見，包含科技製造、金融服務等產業皆將此認證列為人才評核標準。對於非技術背景者，初級認證能快速建立AI工具應用能力；技術人員則可透過中級認證強化系統整合與風險管理專業。

考試類型與級別

分為初級（Associate）與中級（Specialist）兩級。初級側重基礎概念與工具應用，適合行政、行銷等非技術職；中級要求技術實作能力，需具備AI系統部署經驗。考試形式皆為電腦測驗，初級含兩科共100題單選題，中級則擴充至三科150題，並增加情境分析題型。

考試內容與範圍

Detailed breakdown of the exam content and scope.

初級考試內容

包含「人工智慧基礎概論」與「生成式AI應用與規劃」兩大科目。前者涵蓋AI技術演進、資料處理流程與歐盟AI法案基礎知識；後者聚焦No Code工具應用、生成式AI風險評估。根據114年度簡章，初級特別強調「AI導入評估規劃」實務，需掌握SWOT分析與效益計算技巧。

中級考試內容

擴展至「人工智慧技術應用與規劃」、「大數據處理分析與應用」、「機器學習技術與應用」三科目。重點在於系統整合能力，例如使用Python進行資料清洗、設計AI模型部署架構。從職能基準文件可見，中級要求能制定AI技術規範準則，並解決部署過程中的跨系統相容問題。

考試題型及範例

初級多為概念判斷題，如：「下列何者屬於生成式AI的倫理風險？」；中級則出現情境模擬題，例如給定企業營運數據，要求規劃AI導入階段與資源配置。官方提供的考試樣題顯示，約15%題目涉及法規應用，需熟悉台灣AI指引與國際規範的差異。

準備要點與資源

Resources and tips for effective exam preparation.

官方學習資源

經濟部產業發展署提供AI三日班公版教材，涵蓋機器學習流程圖解與案例研討。另可下載歷屆模擬試題，其中「生成式AI工具比較表」與「風險評估矩陣模板」為熱門備考素材。建議搭配產業節能減碳資訊網的實務案例進行跨領域學習。

模擬考題與練習

第三方資源如CCChen的模擬題庫提供超過200題情境演練，特別強化「No Code平台特性判斷」與「模型監控指標計算」等易錯題型。考生反應實際考試中，約30%題目與Vocus平台的題型高度相似，建議重點練習資料處理流程圖解題。

準備策略與技巧

初級考生應採取「科目二優先」策略，因生成式AI應用分數佔比達45%，且可透過工具操作影片快速提升。中級備考需建立「技術日誌」，記錄AI模型調參過程與部署障礙排除經驗。無論級別，都需熟讀EU AI Act的高風險應用分類，此部分在近兩次考試皆出現5-8題。

結論

iPAS AI應用規劃師認證已成為企業數位轉型的人才評核標準，初級適合跨領域工作者建立AI思維，中級則培養技術整合能力。備考關鍵在於掌握官方教材的實務框架，並透過模擬題強化情境判斷。隨著114年度第三次考試即將登場，建議考生及早規劃3個月以上的系統性準備期。

參考文獻

  1. iPAS AI應用規劃師官方網站
  2. AI應用規劃師考題分析
  3. 經濟部淨零碳規劃管理師介紹
  4. 初級課程規劃文件
  5. CCChen模擬試題資源

前端開發者必知的8個冷門卻超實用DOM技巧

身為前端開發者，每天都在與DOM (文件物件模型) 打交道，它就像是網頁的骨架，讓開發者能夠操控頁面上的各種元素。不過，在眾多DOM API中，藏著許多鮮為人知但非常實用的方法。

1. Element.checkVisibility()

這是什麼？

這個方法能夠檢測元素是否「真正可見」，不只是存在於DOM中而已。它考慮了多種因素：

  • CSS遮蓋（被其他元素擋住）
  • 滾動隱藏（元素在可視區域外）
  • 透明度為0（肉眼看不見）

實際應用場景

  • 表單驗證：只對用戶可見的表單欄位進行驗證
  • 廣告曝光統計：確保廣告真正被看到才計算曝光
  • 懶加載優化：精準判斷內容是否進入視野，再觸發加載
// 簡單範例
if (myElement.checkVisibility()) {
  // 元素真的被看到了，執行相應操作
}

2. TreeWalker API

這是什麼？

一種高效能遍歷DOM樹的方式，採用「迭代器模式」設計。想像它就像是一個聰明的導遊，可以按照您的要求有序地帶您參觀DOM樹的各個節點。

為什麼要用它？

相比於 querySelectorAll，TreeWalker在處理超大型DOM樹時更省記憶體，因為它不會一次性把所有匹配的節點都載入記憶體。

// 建立一個只遍歷段落元素的TreeWalker
const walker = document.createTreeWalker(
  document.body,           // 從body開始
  NodeFilter.SHOW_ELEMENT, // 只看元素節點
  {
    acceptNode(node) {
      return node.tagName === 'P' 
        ? NodeFilter.FILTER_ACCEPT 
        : NodeFilter.FILTER_SKIP;
    }
  }
);

// 逐一訪問每個段落元素
let currentNode;
while (currentNode = walker.nextNode()) {
  console.log(currentNode.textContent);
}

3. Node.compareDocumentPosition()

這是什麼？

這個方法能精確判斷兩個節點的「位置關係」，就像是網頁元素的GPS定位系統。

常用位置關係代碼

  • 2 (DOCUMENT_POSITION_PRECEDING): 節點A在B之前
  • 4 (DOCUMENT_POSITION_FOLLOWING): 節點A在B之後
  • 8 (DOCUMENT_POSITION_CONTAINS): A是B的祖先節點
// 實用範例：確定拖放元素的插入位置
function determineDropPosition(draggedElem, targetElem) {
  const position = draggedElem.compareDocumentPosition(targetElem);
  
  if (position & Node.DOCUMENT_POSITION_FOLLOWING) {
    return '目標元素在被拖動元素之後';
  } else if (position & Node.DOCUMENT_POSITION_PRECEDING) {
    return '目標元素在被拖動元素之前';
  }
}

4. scrollIntoViewIfNeeded()

這是什麼？

一個聰明的捲動功能，只有當元素不在視窗中時才會自動捲動，避免不必要的頁面跳動。

與傳統方法的比較

傳統的 scrollIntoView() 會無條件捲動到元素位置，而 scrollIntoViewIfNeeded() 則更加智能，避免了過度捲動帶來的使用體驗問題。

// 使用範例：點擊目錄項時，智能捲動到對應章節
catalogItem.addEventListener('click', () => {
  // 只有當章節不在視窗內時才捲動
  document.getElementById(chapterId).scrollIntoViewIfNeeded();
});

5. insertAdjacentElement()

這是什麼？

這是一個比 appendChild 更靈活的元素插入方法，讓您能精準控制插入的位置。

位置參數選項

  • ‘beforebegin’: 在目標元素前面插入
  • ‘afterbegin’: 在目標元素內部的最前面插入
  • ‘beforeend’: 在目標元素內部的最後面插入
  • ‘afterend’: 在目標元素後面插入
// 實用範例：在表單每個輸入框後加入提示訊息
const helpText = document.createElement('small');
helpText.textContent = '請輸入有效的電子郵件地址';
inputElement.insertAdjacentElement('afterend', helpText);

 

6. Range.surroundContents()

這是什麼？

這是一個處理文字區域的神器，能用指定的元素將選中的內容包裹起來。

實際應用場景

  • rich文件編輯器：快速套用格式如加粗、斜體
  • 文章批註系統：標註並高亮重點段落
  • 搜尋結果高亮：突顯頁面中匹配的搜尋詞
// 實現高亮功能
function highlightText(text) {
  const range = document.createRange();
  const selection = window.getSelection();
  
  if (selection.rangeCount > 0) {
    range.setStart(selection.anchorNode, selection.anchorOffset);
    range.setEnd(selection.focusNode, selection.focusOffset);
    
    const highlight = document.createElement('mark');
    highlight.style.backgroundColor = 'yellow';
    
    try {
      range.surroundContents(highlight);
    } catch(e) {
      console.log('選區跨越多個節點，無法直接包裹');
    }
  }
}

7. Node.isEqualNode()

這是什麼？

這個方法能深度比較兩個節點是否「結構相同」，就像比較兩棵樹的形狀是否一致。

重要注意點

它只比較節點的結構和屬性，不會比較動態綁定的事件處理器等內容。這與 === 比較參考是否相同完全不同。

// 實用範例：檢查模板渲染後結構是否符合預期
const expectedStructure = document.createElement('div');
expectedStructure.innerHTML = '';

預期結構

const renderResult = myTemplateEngine.render(data);

if (expectedStructure.firstChild.isEqualNode(renderResult.firstChild)) {
  console.log('渲染結果符合預期結構！');
}

8. document.createExpression()

這是什麼？

這是XPath表達式的預編譯功能，能大幅提升反覆使用同一XPath查詢的效能。

實際應用場景

  • 大數據量表格的快速篩選查詢
  • 複雜XML文檔的節點訪問
  • 需要重複執行同一查詢的場景
// 預編譯XPath表達式
const compiledXPath = document.createExpression(
  '//table[@id="data-table"]/tbody/tr[position() < 10]'
);

// 多次執行同一查詢而無需重複解析
function updateTable() {
  const result = compiledXPath.evaluate(
    document,
    XPathResult.ORDERED_NODE_SNAPSHOT_TYPE,
    null
  );
  
  for (let i = 0; i < result.snapshotLength; i++) {
    const row = result.snapshotItem(i);
    // 處理前10行資料
  }
}

小結

這些鮮為人知的DOM API能讓您的前端代碼更加優雅高效。不過在實際應用時，請注意以下幾點：

  • 部分API（如checkVisibility）需要較新的瀏覽器支援（Chrome 106+）
  • 使用前建議檢查Can I Use確認瀏覽器兼容性
  • 適當使用這些API能提升代碼質量，但請避免為了炫技而過度使用冷門API
  • 考慮添加polyfill或fallback方案來處理舊版瀏覽器

掌握這些實用技巧，您的前端開發效率將得到顯著提升！您有用過這些API嗎？歡迎在評論區分享您的經驗和其他實用技巧。

MCP初體驗 – 使用Claude 桌面程式實踐第一步

一、安裝Claude桌面版程式 ( https://claude.ai/download )
二、開啟 開發人員模式
三、確定有安裝node (透過cmd node –version ), 接著claude_desktop_config.json設定

{
"mcpServers": {
"filesystem": {
"command": "npx",
"args": [
"-y",
"@modelcontextprotocol/server-filesystem",
"C:\\Users\\你自己的使用者名稱\\Desktop",
"C:\\Users\\你自己的使用者名稱\\Downloads"
]
}
}
}

四、重啟claude 就可以調用Filesystem MCP Server

延伸資料:

https://docs.anthropic.com/zh-TW/docs/agents-and-tools/mcp 模型上下文協議 (MCP)

https://modelcontextprotocol.io/introduction

https://modelcontextprotocol.io/quickstart/user

https://github.com/modelcontextprotocol

人工智慧與工人智慧的結合-文件產生器雛型

最近公司交付了一個新的任務，起因是大家都知道工程師最討厭的是寫文件，於是就想起了可不可以用ai寫文件這件事
於是開始了研究這條路，等到prompt都差不多後，主管們又說可不可以系統化，於是就出現了這個雛型系統
老實說，跟ai協作真的很歡樂~重要的是腦袋中要有想法以及邏輯，以及如何說給電腦聽