Claude Code 動態工作流實戰：用一支 JavaScript 派一群子代理，順便算了筆 token 帳
Claude Code 最近多了一個功能叫動態工作流（dynamic workflows）：讓主代理在執行時，當場寫一支 JavaScript，生成並協調一群子代理——每個子代理有自己獨立的 context window 和一個聚焦的小目標。 我前幾天用它做了件很實際的雜活：評估四個候選部落格選題，看哪個跟我既有文章庫重複、哪個值得寫。這篇把那支 script 整個攤開，講三件事——怎麼寫、parallel 和 pipeline 怎麼選、跑一次燒多少 token。 為什麼不是「開更多分頁」那麼簡單你可能會想，並行做事，開幾個對話視窗不就好了？ 差別在 context。Claude Code 過去是「一個對話、一條 context」，所有東西擠在同一個上下文視窗。長任務這個模式有三個老毛病，官方發布時直接點名：智慧惰性（做到一半宣布完工）、自我偏好偏差（驗證自己的產出時護短）、目標漂移（對話太長、尤其壓縮過後忘了最初目標）。 動態工作流的解法不是把單一 context 養得更肥，而是把活切開：每個子代理拿一塊乾淨的上下文，做一件聚焦的事，彼此不互相汙染。並行只是順帶的好處，真正的價...
深入解析：處理中文數字的自訂排序函數
專案裡有個 AngularJS 畫面，scope.datalist 每筆資料的欄位開頭儲存著 (一)、(二)、(十)、(二十) 這類中文數字前綴。Array.sort 預設按 Unicode 碼位排，(一) 排在 (三) 前面沒問題，但 (十) 和 (二十) 的字元碼比個位數字大，順序就全亂了。 下面這個 customSort 把中文數字轉成阿拉伯數字再比較，支援一到九十九，沒有前綴的項目自動排到最後。 欄位名稱說明： 範例中的 Catacory 是原始資料庫欄位名稱（歷史拼錯沿用至今），不是 typo 建議，直接抄用時請換成你自己的欄位名。 完整程式碼12345678910111213141516171819202122232425262728const getNumber = (str) => { if (!str) return 100; // null / undefined / 空字串全部排到最後 const match = str.match(/^\(([一二三四五六七八九十]+)\)/); if (!match) return 100; ...
JavaScript字串搜索方法比較：indexOf vs includes vs filter
在 JavaScript 中，我們經常需要檢查一個字串是否包含某個特定的字元或子字串。本文比較三種常用方法：indexOf()、includes() 和 filter()，涵蓋語法、可讀性、相容性與效能差異。 1. indexOf() 方法indexOf() 是最古老且支援度最廣的方法之一。 語法1string.indexOf(searchValue[, fromIndex]) 用法123const str = "Hello, World!";const hasO = str.indexOf('o') !== -1; // trueconst hasZ = str.indexOf('z') !== -1; // false 優點 相容性好，支援舊版瀏覽器 可以指定開始搜尋的位置 缺點 返回值不是布林型，需要與 -1 比較 程式碼可讀性較差 2. includes() 方法includes() 是 ES6 引入的方法，專門用於檢查字串是否包含特定子字串。 語法1string.includes(searchStrin...
Promise 和 setTimeout 的深入解析
在 JavaScript 中，Promise 和 setTimeout 是處理非同步操作的兩個重要工具。兩者都用於處理非同步事件，但工作方式和使用場景不同。 PromisePromise 是 JavaScript 用來處理非同步操作的物件，代表一個可能尚未完成、但未來某個時間點會完成的操作。Promise 有三種狀態： Pending（進行中）：初始狀態，既未完成也未拒絕。 Fulfilled（已完成）：操作成功完成。 Rejected（已拒絕）：操作失敗。 Promise 的主要優點： 可以將非同步操作以同步流程的方式表達，避免回呼地獄。 提供 .then()、.catch() 和 .finally() 方法，讓處理非同步結果更直觀。 Promise 的基本用法1234567891011121314const myPromise = new Promise((resolve, reject) => { // 非同步操作 if (/* 操作成功 */) { resolve(result); } else { ...
JS防抖（Debouncing）與節流（Throttling）
JS防抖與節流教學滾動、視窗縮放、鍵盤輸入這類高頻事件，若直接把處理函式綁上去，瀏覽器很快就會喘不過氣。防抖（Debouncing）和節流（Throttling）是兩種常見的解法，差別在於「事件停了才執行」還是「固定間隔最多執行一次」，選錯方向效果會差很多。 防抖 (Debouncing)觸發事件後，等待指定時間才執行處理函式。如果等待期間又觸發了，就重新計時。連續快速觸發的情況下，最終只會執行一次。 使用時機觸發頻率高、但不需要即時響應每次觸發的場景： 搜尋框輸入（使用者停止輸入後再發出請求） 視窗大小調整（調整結束後再重新計算排版） 範例12345678910111213function debounce(func, wait) { let timeout; return function(...args) { const context = this; clearTimeout(timeout); timeout = setTimeout(() => func.apply(context, ...
深入理解 JavaScript 的 async/await
async/await 是 Promise 的語法糖，讓非同步程式碼讀起來像同步。底層仍是 Promise，事件循環沒有改變，只是寫法不同。 async/await 的基本概念async 函式：使用 async 關鍵字宣告，無論函式本身回傳什麼值，呼叫端拿到的一定是 Promise。 await 運算符：等待一個 Promise 決議（resolve 或 reject）。在標準模式下只能用在 async 函式內；ES2022 起，ES 模組的頂層也可以直接使用 await，不需要包一層 async 函式。 與 Promise 的關係async/await 本質上是 Promise 的語法糖。看個對照例子： 使用 Promise： 1234567891011function fetchData() { return fetch('https://api.example.com/data') .then(response => response.json()) .then(data => { console....
setTimeout 和 JavaScript 的 Event Loop 運作原理
JavaScript 是單執行緒語言，一次只能執行一個操作。如果所有事情都同步跑，任何耗時任務都會卡住整個程式——這就是事件循環（Event Loop）存在的原因，也是 setTimeout 能讓你「稍後再執行」的底層機制。 JavaScript 的單執行緒特性單執行緒的意思是：呼叫堆疊只有一條，同時只能有一段程式碼在跑。長時間的同步操作（例如複雜運算或等待 I/O）一旦佔住堆疊，使用者介面就會完全卡死、無法回應任何輸入。 非同步程式設計的核心思路是：把等待的部分交出去，主執行緒繼續跑其他的，等結果回來再接手。 事件循環的四個組件理解事件循環前，先認識它的基本組成： 呼叫堆疊（Call Stack）：記錄目前正在執行的函式，採後進先出（LIFO）結構。 Web API：瀏覽器提供的環境能力，包括計時器（setTimeout、setInterval）、網路請求（fetch）、DOM 事件等。這些操作不在 JS 引擎內跑，而是交給瀏覽器的底層執行緒處理。 回呼佇列（Callback Queue / Task Queue）：Web API 完成後，把回呼函式排進這裡，等待被執行。 事...
JavaScript 深拷貝完整指南：掌握物件複製的關鍵技巧
JavaScript 的物件是傳參考的，稍不注意就會讓原始資料被意外修改。本文整理四種深拷貝方法，說明各自的限制與適用場景。 深拷貝 vs 淺拷貝：關鍵差異 淺拷貝：只複製第一層屬性，內部物件仍然共享參考 深拷貝：遞迴複製所有層級，建立完全獨立的新物件 實作方法 1：使用 JSON 方法最簡單的深拷貝寫法： 123456789function jsonDeepCopy(obj) { return JSON.parse(JSON.stringify(obj));}const original = { name: 'John', info: { age: 25 }};const copy = jsonDeepCopy(original); 優點： 寫法簡單，零依賴 適用於只含字串、數字、布林值、null 的普通物件 缺點： 函式屬性會直接消失 undefined 值會被丟棄 無法處理循環引用（直接拋錯） Date 會被轉成 ISO 字串，JSON.parse 後變成 string 而非 D...
