最新文章 第 16 頁

程式碼之外，還有生活的藝術前端工程師 / 攝影 / 生活紀錄

文章334
標籤474

標籤查看更多

分類查看更多

Advanced Web Dev Quiz (27)
Deep JavaScript Foundations v3 (69)
Full Stack Fundamentals (47)
JavaScript Hard Parts v3 (50)
JS地下城 (5)
Testing Fundamentals (27)
TypeScript Fundamentals (28)
Web Performance Fundamentals (41)
You Might Not Need a Framework (32)
學習經歷 (2)
生活亂談 (2)
程式筆記 (4)

最新文章

混合 Dev 和 Life 的所有最新內容

334 篇

2026-07-1315 分鐘閱讀

ProductItem 元件與事件目標判斷：event.target 與 event.currentTarget

建立 ProductItem 元件，處理連結內嵌按鈕的事件衝突，並實作依商品 ID 查找資料的非同步函式。

You Might Not Need a Framework

#JavaScript #frontendMasters #youMightNotNeedAFramework #WebComponents #EventListener

2026-07-1214 分鐘閱讀

響應式渲染：監聽 Store 變動並動態產生選單 DOM

在 MenuPage 元件中監聽 Store 變動事件，實作渲染邏輯：判斷載入狀態、雙層迴圈渲染分類與商品，並透過 data attributes 把資料傳入子元件。

You Might Not Need a Framework

#JavaScript #frontendMasters #youMightNotNeedAFramework #Proxy #ReactiveProgramming #WebComponents

2026-07-1214 分鐘閱讀

Proxy 與響應式程式設計：讓資料變動驅動 UI 更新

介紹 JavaScript Proxy 的概念與 trap 機制，並說明如何用 Proxy 包裝 Store 實現響應式更新，讓資料變動自動廣播事件驅動 UI。

You Might Not Need a Framework

#JavaScript #frontendMasters #youMightNotNeedAFramework #Proxy #ReactiveProgramming

2026-07-1111 分鐘閱讀

為 Web Component 載入外部 CSS：Fetch API 與效能優化

說明如何用 Fetch API 為 Shadow DOM 載入外部 CSS 檔案，以及透過 prefetch/preload 提前下載改善效能的方式。

You Might Not Need a Framework

#JavaScript #frontendMasters #youMightNotNeedAFramework #WebComponents #DOM #Performance

2026-07-1110 分鐘閱讀

為 Custom Element 啟用 Shadow DOM：樣式封裝的實際效果

實際為 Custom Element 啟用 Shadow DOM，觀察樣式封裝的效果，並比較幾種替代的 template HTML 定義方式。

You Might Not Need a Framework

#JavaScript #frontendMasters #youMightNotNeedAFramework #WebComponents #DOM

2026-07-1011 分鐘閱讀

在 Custom Element 中載入 Template：connectedCallback 與 Shadow DOM 的必要性

說明為何必須在 connectedCallback 而非 constructor 中載入 template，並透過實驗展示無 Shadow DOM 時 CSS 洩漏到全域的問題。

You Might Not Need a Framework

#JavaScript #frontendMasters #youMightNotNeedAFramework #WebComponents #DOM

2026-07-1011 分鐘閱讀

建立第一個 Web Component：頁面元件的實作起點

實作 Coffee Masters 的三個頁面元件，說明 Custom Element 的建立流程、import 鏈與元件註冊的關係，以及如何將自訂元素接入 Router。

You Might Not Need a Framework

#JavaScript #frontendMasters #youMightNotNeedAFramework #WebComponents #DOM #Router

2026-07-0911 分鐘閱讀

Web Components 的 CSS 策略與常見問題釐清

補充 Declarative Shadow DOM 的現況、為 Web Component 定義 CSS 的多種方式，以及 template 與 Custom Element 之間連結的建立方式。

You Might Not Need a Framework

#JavaScript #frontendMasters #youMightNotNeedAFramework #WebComponents #DOM

2026-07-0912 分鐘閱讀

Shadow DOM：Web Components 的樣式封裝機制

介紹 Shadow DOM 的隔離機制、open 與 closed 兩種模式，以及為 Custom Element 定義 HTML 內容的多種方式。

You Might Not Need a Framework

#JavaScript #frontendMasters #youMightNotNeedAFramework #WebComponents #DOM

2026-07-0811 分鐘閱讀

HTML Templates：在 DOM 中定義惰性的 HTML 片段

介紹 HTML Templates 的運作方式，說明如何在 Custom Element 中克隆 template 內容，以及 template 內定義 CSS 樣式時的作用範圍問題。

You Might Not Need a Framework

#JavaScript #frontendMasters #youMightNotNeedAFramework #WebComponents #DOM

1...13 14 15 16 17 18 19...34