線上課程觀課進度管理小工具開發日誌
Day 6:JavaScript 程式碼執行排序:遞迴函數、Call Stack、Task Queue
Call Stack;遞迴函數與 call stack 的關係;Task Queue(非同步的概念再釐清)
Day 9:「修煉圈圈 Practice Rings」Web app 開發日誌 - 2025 六角 AI Vibe Coding 體驗營期末大魔王作業
這份筆記旨在記錄 2025 六角 Vibe Coding 體驗營每日作業 Day 21 的期末專案成果,從一個簡單的個人痛點出發,透過與 AI(在我這個情境中是 Perplexity)協作,在一天內完成了一個包含前後端的全端網頁小工具:「修煉圈圈 Practice Rings」。
<100 subscribers
線上課程觀課進度管理小工具開發日誌
Day 6:JavaScript 程式碼執行排序:遞迴函數、Call Stack、Task Queue
Call Stack;遞迴函數與 call stack 的關係;Task Queue(非同步的概念再釐清)
Day 9:「修煉圈圈 Practice Rings」Web app 開發日誌 - 2025 六角 AI Vibe Coding 體驗營期末大魔王作業
這份筆記旨在記錄 2025 六角 Vibe Coding 體驗營每日作業 Day 21 的期末專案成果,從一個簡單的個人痛點出發,透過與 AI(在我這個情境中是 Perplexity)協作,在一天內完成了一個包含前後端的全端網頁小工具:「修煉圈圈 Practice Rings」。
《單元測試的藝術》3/e 第二章 ~ 2.4 (p. 46)
《JavaScript 概念三明治》第四章完、第五章 p.5-23
測試框架不只是幫你跑測試,它整合了四個關鍵元件: developer.mozilla
測試程式庫:提供組織測試的結構 (如 describe、it)
斷言庫:用 expect 驗證預期結果
測試執行器:自動化執行所有測試
結果報告器:視覺化呈現測試通過/失敗狀態
Jest 與 Vitest 還額外提供隔離設施,確保每個測試獨立運行,不互相干擾 ibraheem
使用測試框架帶來的四大優勢: developer.mozilla
結構明確:程式碼組織清楚,可讀性高
快速迭代:複製測試結構,新測試寫得更快
建立信心:節省手動驗證時間,更敢重構
共同語言:團隊對測試報告有一致理解
⚠️ 使用測試框架 ≠ 寫出好測試
測試框架只是工具,它不保證:
測試程式本身易讀、易維護
測試涵蓋所有想驗證的邏輯
測試具有可信度
關鍵在於如何設計測試,而非只會使用框架語法 ibraheem
已完成:fork kata repo,移除 Jest 改用 Vitest 環境設定
⏳ 待完成:實作測試練習題
判斷原則:除了原始型別,其他都是物件型別 developer.mozilla
原始型別(Primitive Types)共 6 種:
null / undefined
number / string / boolean
symbol (較少用,透過 Symbol() 產生)
物件型別:陣列、物件、函式等
特別注意:函式是「可被呼叫的物件」,既可以當函式執行,也能當物件使用 developer.mozilla
陳述式(Statement):一段描述邏輯的程式碼
表達式(Expression):能被 JavaScript 運算並產生數值的程式碼
// 函式陳述式 - 宣告函式
function greet(name) {
return `Hello, ${name}`;
}
// 函式表達式 - 把函式指派給變數
const greet = function(name) {
return `Hello, ${name}`;
};
函式具有 name 屬性,可以查看函式名稱: developer.mozilla
function calculateTotal() {
// 計算邏輯
}
console.log(calculateTotal.name); // "calculateTotal"
函式的三種用途:
當作參數傳進另一個函式 (高階函式 HOF)
模擬物件導向的「類別」寫法
利用 IIFE 建立獨立作用域
IIFE 的設計目的: developer.mozilla
讓程式碼在全域環境載入後立即執行
利用函式作用域限制變數存取
達到與全域環境隔離的效果
(function() {
const privateVar = '不會污染全域';
console.log('立即執行');
})();
[ ] 完成 kata 測試練習實作
[ ] 繼續閱讀《JavaScript 概念三明治》箭頭函式章節
[ ] 練習撰寫測試,驗證函式概念理解
學習工具: Vitest + Airbnb JavaScript Style Guide
參考文獻: 《單元測試的藝術》3/e、《JavaScript 概念三明治》
《單元測試的藝術》3/e 第二章 ~ 2.4 (p. 46)
《JavaScript 概念三明治》第四章完、第五章 p.5-23
測試框架不只是幫你跑測試,它整合了四個關鍵元件: developer.mozilla
測試程式庫:提供組織測試的結構 (如 describe、it)
斷言庫:用 expect 驗證預期結果
測試執行器:自動化執行所有測試
結果報告器:視覺化呈現測試通過/失敗狀態
Jest 與 Vitest 還額外提供隔離設施,確保每個測試獨立運行,不互相干擾 ibraheem
使用測試框架帶來的四大優勢: developer.mozilla
結構明確:程式碼組織清楚,可讀性高
快速迭代:複製測試結構,新測試寫得更快
建立信心:節省手動驗證時間,更敢重構
共同語言:團隊對測試報告有一致理解
⚠️ 使用測試框架 ≠ 寫出好測試
測試框架只是工具,它不保證:
測試程式本身易讀、易維護
測試涵蓋所有想驗證的邏輯
測試具有可信度
關鍵在於如何設計測試,而非只會使用框架語法 ibraheem
已完成:fork kata repo,移除 Jest 改用 Vitest 環境設定
⏳ 待完成:實作測試練習題
判斷原則:除了原始型別,其他都是物件型別 developer.mozilla
原始型別(Primitive Types)共 6 種:
null / undefined
number / string / boolean
symbol (較少用,透過 Symbol() 產生)
物件型別:陣列、物件、函式等
特別注意:函式是「可被呼叫的物件」,既可以當函式執行,也能當物件使用 developer.mozilla
陳述式(Statement):一段描述邏輯的程式碼
表達式(Expression):能被 JavaScript 運算並產生數值的程式碼
// 函式陳述式 - 宣告函式
function greet(name) {
return `Hello, ${name}`;
}
// 函式表達式 - 把函式指派給變數
const greet = function(name) {
return `Hello, ${name}`;
};
函式具有 name 屬性,可以查看函式名稱: developer.mozilla
function calculateTotal() {
// 計算邏輯
}
console.log(calculateTotal.name); // "calculateTotal"
函式的三種用途:
當作參數傳進另一個函式 (高階函式 HOF)
模擬物件導向的「類別」寫法
利用 IIFE 建立獨立作用域
IIFE 的設計目的: developer.mozilla
讓程式碼在全域環境載入後立即執行
利用函式作用域限制變數存取
達到與全域環境隔離的效果
(function() {
const privateVar = '不會污染全域';
console.log('立即執行');
})();
[ ] 完成 kata 測試練習實作
[ ] 繼續閱讀《JavaScript 概念三明治》箭頭函式章節
[ ] 練習撰寫測試,驗證函式概念理解
學習工具: Vitest + Airbnb JavaScript Style Guide
參考文獻: 《單元測試的藝術》3/e、《JavaScript 概念三明治》
Share Dialog
Share Dialog
No comments yet