Type Script+Vue.js一氣呵成：前端開發大白到大神 (1版)
類似書籍推薦給您
立即查看
Vue.js 3前端開發不踩雷：Composition API×Vue Router×Pinia，帶你快速升級進階開發者！（iThome鐵人賽系列書）【軟精裝】 (1版)
類似書籍推薦給您
【簡介】
從原生到框架，真正理解 Vue.js 原理
深入淺出 Vue.js，搭配真實案例，帶你避開那些惱人的開發痛點！
★ 掌握 Composition API，開發更彈性、維護更容易
★ 學 Vue.js 不能只知道語法，本書帶你避開雷區、加速學習與開發
本書內容改編自第 14 屆 iThome 鐵人賽 Modern Web 組的佳作系列文章《真的好想離開 Vue 3 新手村 feat. Composition API》。本書以 Vue.js Composition API 風格為主軸，著重於扎實的基礎學習，協助讀者避開的常見雷點，提升學習與開發的效率。書中涵蓋從原生到框架的範疇，帶領讀者從不同角度認識 Vue.js，以及新手學習和開發中容易遇到的問題，並針對讀者可能會踩到的坑，有目的地去探討背後原理，而非為了剖析原始碼而剖析原始碼。即使是前端新手也一定能看懂、更要看，可以對 Vue.js 有更進階的認識。
本書首先從開發環境入門，讓讀者了解環境建置的範疇與重要性，並具備根據專案需求調整的能力。隨後介紹常用的 Vue.js 語法，包含 Vue.js 指令、響應式 API 和樣式處理等等，再來進入元件化開發，認識元件的溝通方式與生命週期。除了 Vue.js 核心之外，本書亦包含 Vue Router 4 和 Pinia，透過 Vue Router 常見的應用情境來認識其語法，學會如何建立單頁式應用程式網站，最後是 Pinia，了解使用狀態管理器的目的，並認識常用情境與語法。書中提供線上範例程式碼，讀者可以在學習後實際操作一遍，加深印象並掌握邏輯要點。期望讀者在學習之後，能具備完成一個 Vue.js 專案的基礎知識與能力。
四大重點
▶ 新手看得懂
說明淺顯易懂，新手也能消化
▶ 常見實戰範例
以常見案例為範例，加速理解使用情境
▶ 避開踩坑
取自真實專案經驗，帶你避開踩坑之處
▶ 提供最新全家桶
涵蓋建立 Vue 專案所需的工具與知識
目標讀者
● 準備要學習 Vue.js 3 的前端新手。
● 已經在學習 Vue.js 3 並掌握基礎語法，卻還是常常踩到雷。
● 已經開始使用 Vue.js 3 進行開發，只知道如何操作，但不知道其原理。
專業推薦
「如果你想要學習前端 Vue 框架，這本書是你的不二之選。透過 Angela 的經驗分享和教學，你將能夠事半功倍地掌握 Vue.js 的精髓，她絕對是學習前端 Vue 框架的最佳引路人。」－－Howard │ 好想工作室 Host
「我特別欣賞本書對於 Vue.js 核心概念的解釋方式，作者 Angela 在書中用淺顯易懂的語言解釋了 Vue.js 的原理，不僅避免了過於深入探討原始碼，而且專注於分析和解決實際開發中遇到的問題。這種方式不僅淺顯易懂，而且緊密結合了自身的開發案例，對於理解並應用這些概念至關重要。」－－Kuro Hsu │ Vue.js Taiwan 社群主辦人
「這本書提供了完整的論證過程，讓我在看完的同時也可以記得很久，完全不用花費什麼時間再去研究，可以直接使用這麼嚴謹的研究成果當作自己的學習成果，實在是一件很幸福的事情。希望每個學習者都可以透過這本書，體會一下好的學習方法，將自己變成好的工程師。」－－王聖凱（Chris）│《從自學到成功轉職軟體工程師：自主學習讓我重拾人生的發球權》作者
（依首字筆畫排序）
【目錄】
推薦序／Howard
推薦序／Kuro Hsu
推薦序／王聖凱（Chris）
第 1 章 認識 Vue 開發環境
1.1 Quick Start
1.2 建立 Vue 專案
1.3 開發利器：ESLint
1.4 開發利器：Prettier
1.5 Vite
1.6 資料夾結構
1.7 番外篇：為什麼要打包？
1.8 在 Vue 專案使用 Sass / SCSS + 共用變數
第 2 章 進入 Vue 的世界觀
2.1 了解 Vue SFC 檔？
2.2 深入了解 script setup 語法糖
2.3 Option API 和 Composition API 比一比
2.4 認識模板語法
2.5 Vue 響應式語法 ref、reactive
2.6 Vue 響應式語法 watch & computed
2.7 認識 nextTick 與 DOM 響應更新時機
2.8 樣式處理
2.9 SFC / .vue 檔會如何被解析？
第 3 章 認識 Vue 指令（Vue Directive）
3.1 什麼是 Vue 指令（Vue Directive）？
3.2 v-show 與 v-if
3.3 v-for
3.4 v-on
3.5 v-model
第 4 章 元件化開發
4.1 元件溝通的方式
4.2 props
4.3 emit
4.4 v-model
4.5 v-slot
4.6 元件的生命週期與鉤子
4.7 等等非同步資料！在 setup 裡面 await？
第 5 章 Vue Router 4
5.1 什麼是 Single-Page Application？
5.2 Vue Router 的作用與歷史模式
5.3 定義路由
5.4 在 Composition API 元件使用 Vue Router
5.5 裝飾匹配的 Link 樣式
5.6 跨路由傳遞參數的方法
5.7 SPA 網站的 Scroll 行為
5.8 導航守衛（Navigation Guards）
5.9 番外篇（一）：從 Vue Router 的動態載入看 Code Split
5.10 番外篇（二）：router-view 遇上 keep-alive
第 6 章 狀態管理器 ── Pinia
6.1 為什麼需要「狀態」管理器？
6.2 Into Pinia：安裝 Pinia
6.3 Store
6.4 State
6.5 Getters
6.6 Actions
6.7 監聽 Pinia Store 變動
6.8 在元件以外使用 Store
立即查看
React 思維進化：一次打破常見的觀念誤解，躍升專業前端開發者（iThome鐵人賽系列書）【平裝】 (1版)
類似書籍推薦給您
【簡介】
佳評如潮！熱銷再版（平裝版）
★☆★ 銷售排行榜冠軍 TOP 1 ★☆★
思想、脈絡與觀念理解是真正的專業技術門檻，
也是鑑別出實力強大或平庸工程師的關鍵區別之一。
書籍簡介
本書內容改編自第 14 屆 iThome 鐵人賽 Modern Web 組的冠軍系列文章《一次打破 React 常見的學習門檻與觀念誤解》。本書以循序漸進的脈絡帶讀者從頭理解 React 技術的核心觀念、運作原理與設計思維。
React 本身的設計基於了許多程式領域的設計模式，而這些設計模式的概念大多都與「還沒有使用前端框架時的程式運作思維與習慣」相去甚遠。因此當你沒有真正理解這些設計模式時，你會覺得 React 的許多設計與行為都很不直覺甚至莫名其妙。並且，如果你不熟悉這些觀念或原理的話，則非常容易在實際開發時寫出有問題但卻不自知的程式碼，為專案的程式碼品質和軟體產品的可靠性埋下巨大的隱患。
有別於市面上充斥的各種「教你如何呼叫語法」以及「帶你實戰範例」的 React 學習資源，本書會著重於技術理解的基本功累積，讓你對於 React 的觀念不再一知半解，以避免「跟著寫了很多 React 範例練習卻還是不懂這些程式碼是如何運作的，無法真正掌握這門技術」這種常見的學習瓶頸，帶你朝向真正的專業 React 開發者邁出紮實且關鍵的一大步。
目標讀者
本書並不是一本關於如何開發 React 專案的手把手實戰教學手冊。相較於大量的案例實作練習，本書會更聚焦於 React 的核心設計思維以及最常被誤解的觀念進行透徹的解析，希望能夠幫助大家一次打破 React 的學習門檻與觀念誤解，成為真正的專業 React 開發者。這本書適合所有「希望將 React 作為專業技術能力」的人學習：
❏ 適合有 JavaScript 的基礎，但對 React是完全新手的人。你可以透過本書從零建立相當穩固的 React 核心觀念理解與思維的基本功，對於後續繼續學習其他實戰類型的學習資源也能有更好的基礎進行銜接。
❏ 也適合已經在學習 React 中的人。這本書將可以讓你對於許多觀念的理解茅塞頓開，學習成效事半功倍。
❏ 也適合對 React 有一定程度的認識或實作經驗，但對於核心觀念與原理還沒深度掌握的人（應該有蠻多人是處於這個階段）。這本書會是你突破瓶頸、邁向資深 React 開發者的關鍵助力。
專業推薦
「這本書使 React 初學者能夠打破「只會跟著寫範例但不理解背後原理」的惡性循環，進而成為真正的專業 React 開發者。我強烈推薦這本書給所有希望在未來軟體開發市場中保持競爭力的前端開發者。」——Richard Lee │ 愛料理共同創辦人＆技術長，Google Developer Expert - Firebase
「它適合那些在調試 React 應用時遇到困難，或者對 React 的運作原理、組件和 Hooks 的封裝不太明白的開發者。對於那些渴望將自己的技能提升到更高層次的人來說，這絕對是一本必讀書籍。」——Caesar Chi 戚務漢 │ JavaScript Developer Conference Taiwan 主辦群
「透過這本書，你會發現 React 不只是一個工具，它更是一門程式藝術，值得我們去探索、去體會。這本書將伴隨你在 React 的旅途中，一步步成長為更優秀的開發者。」——莫力全 Kyle Mo │ Full Stack Web Engineer @Netskope，《今晚來點 Web 前端效能優化大補帖》作者
【目錄】
| 第一篇 暖身準備 |
1-1 React 是什麼
1-2 學好 React 所需要的 JavaScript 基本功
1-3 React 開發環境建置的門檻
1-3-1 安裝 Node.js
1-3-2 Create React App
1-3-3 基於 React 的進階框架
| 第二篇 React 的畫面管理機制 |
2-1 DOM 與 Virtual DOM
2-1-1 DOM
2-1-2 Virtual DOM
2-2 建構畫面的最小單位：React element
2-2-1 什麼是 React element
2-2-2 React element 的子元素
2-2-3 React element 在建立後是不可被修改的
2-2-4 React element 與 DOM element 的屬性對應和差異
2-3 Render React element
2-3-1 React DOM 與 root
2-3-2 React 只會去操作那些真正需要被更新的 DOM element
2-3-3 瀏覽器環境以外的 React 畫面繪製
2-4 JSX 根本就不是在 JavaScript 中寫 HTML
2-4-1 什麼是 JSX 語法
2-4-2 以 Babel 來進行 JSX 語法的轉譯
2-4-3 新版 JSX transformer 與 jsx-runtime
2-5 JSX 的語法規則脈絡與畫面渲染的實用技巧
2-5-1 嚴格標籤閉合
2-5-2 JSX 語法中的資料表達
2-5-3 畫面渲染邏輯
2-5-4 為什麼一段 JSX 語法的第一層只能有一個節點
2-6 單向資料流與一律重繪渲染策略
2-6-1 單向資料流
2-6-2 實現單向資料流的 DOM 渲染策略
2-6-3 React 中的一律重繪渲染策略
2-7 畫面組裝的藍圖：component 初探
2-7-1 什麼是 component
2-7-2 定義 component
2-7-3 呼叫 component
2-7-4 Import 與 export component
2-7-5 Props
2-7-6 父 component 與子 component
2-7-7 Component 的 render 與 re-render
2-7-8 為什麼_component 命名中的首字母必須為大寫
2-8 React 畫面更新的發動機：state 初探
2-8-1 什麼是 state
2-8-2 useState 初探
2-8-3 useState 的範例演示
2-8-4 關於 state 的補充觀念
2-9 React 畫面更新的流程機制：reconciliation
2-9-1 Render phase 與 commit phase
2-9-2 Reconciliation
2-9-3 setState 觸發的 re-render 會連帶觸發子 component 的 re-render
| 第三篇 State 資料的管理與維護 |
3-1 如何在子 component 裡觸發更新父 component 的資料
3-1-1 React 並沒有子 component 向上溝通父 component 的專門機制
3-1-2 在子 component 中觸發更新父 component 的 state 資料
3-2 深入理解 batch update 與 updater function
3-2-1 Batch update
3-2-2 Updater function
3-3 維持 React 資料流可靠性的重要關鍵：immutable state
3-3-1 什麼是 mutate
3-3-2 保持 state 的 immutable
3-4 Immutable update
3-4-1 物件資料的 immutable update 方法
3-4-2 陣列資料的 immutable update 方法
3-4-3 巢狀式參考型別的複製誤解
| 第四篇 Component 的生命週期與資料流 |
4-1 Component 的生命週期
4-1-1 Component 的三大生命週期
4-1-2 Function component 沒有提供生命週期 API
4-2 Function component 與 class component 關鍵區別
4-2-1 Class component 的 this.props 在非同步事件中的存取陷阱
4-2-2 Function component 會自動「捕捉」render 時的資料
4-3 每次 render 都有自己的 props、state 與 event handler 函式
4-3-1 每次 render 都有其自己版本的 props 與 state
4-3-2 每次 render 都有其自己版本的 event handler 函式
4-3-3 Immutable 資料使得 closure 函式變得可靠而美好
| 第五篇 Effect 與 hooks |
5-1 React 中的副作用處理：effect 初探
5-1-1 什麼是 effect
5-1-2 React component function 中的副作用
5-1-3 useEffect 初探
5-1-4 每次 render 都有其自己版本的 effect 函式
5-1-5 每次 render 都有其自己版本的 cleanup 函式
5-2 useEffect 其實不是 function component 的生命週期 API
5-2-1 宣告式的同步化，而非生命週期 API
5-2-2 Dependencies 是一種效能優化，而非執行時機的控制
5-3 維護資料流的連動：不要欺騙 hooks 的 dependencies
5-3-1 欺騙 dependencies 會造成什麼問題
5-3-2 讓 effect 函式對於依賴的資料自給自足
5-3-3 函式型別的依賴
5-3-4 以 linter 來輔助填寫 dependencies
5-3-5 Effect dependencies 常見的錯誤用法
5-4 React 18 的 effect 函式在 mount 時為何會執行兩次？
5-4-1 React 18 的 effect 函式在 mount 時為何會執行兩次？
5-4-2 Reusable state
5-5 副作用處理的常見情境設計技巧
5-5-1 Fetch 請求伺服器端 API
5-5-2 控制外部套件
5-5-3 監聽或訂閱事件
5-5-4 不應該是副作用處理：使用者的操作所觸發的事情
5-6 useCallback 與 useMemo 的正確使用時機
5-6-1 useCallback 深入解析
5-6-2 useMemo 深入解析
5-7 Hooks 的運作原理與設計思維
5-7-1 Hooks 的資料本體到底存放在何處
5-7-2 為什麼 hooks 的運作是依賴於固定的呼叫順序
5-7-3 Hooks 的誕生是為了解決什麼問題
5-7-4 Hooks API 的設計思維與脈絡
立即查看
前端開發測試入門: 現在知道也還不遲的自動化測試策略必備知識 (1版)
類似書籍推薦給您
【簡介】
你有這些煩惱嗎？
「雖然知道測試很重要，但遲遲尚未著手進行」
「雖然有一定的開發經驗，但沒寫過測試」
「不確定目前採用的測試方法是不是最合適的選擇」
想要就自信滿滿地寫下測試程式碼，然後暢快地說出
「會寫測試真是太好了！」
這本書就是專門為您所寫的教戰手冊
立刻就能派上用場的測試工具應用技巧！
現在的Web應用程式都需要在畫面上提供越來越高階的功能，而為了要確保品質跟易於維護與否，前端自動化測試就扮演著相當重要的角色。
本書是針對Web應用程式開發「前端測試」基本知識與具體實務執行方式的書籍。
透過真實的程式碼來進行教學，講解基本的測試程式碼寫法，更分享了前端特有的測試方法與工具該如何應用。
‧UI元件測試
‧視覺回歸測試
‧E2E測試
‧提升無障礙性
‧在持續整合環境執行測試
有系統地學習前端測試，做到高品質、好維護！
還不只這些，就連「顧及無障礙性」跟「在持續整合環境執行測試」的議題也都跟上趨勢，相信各位可以紮實地學會開發現場第一線人員必備的測試知識與技巧。
適用對象：
‧完全沒有建構過前端軟體的讀者
‧完全沒有寫過測試程式碼的讀者
‧沒有寫過囊括資料庫在內的E2E測試的讀者
【目錄】
前言
本書適用對象
本書軟體執行環境
第 1 章 測試的目的與障礙
1-1本書的內容編排
1-2 寫測試的目的
1-3 寫測試的障礙
第 2 章 測試方法與測試策略
2-1 以範圍與目的來思考測試
2-2 前端測試的範圍
2-3 前端測試的目的
2-4 測試策略模型
2-5 測試策略計畫
第 3 章 單元測試入門
3-1 建構環境
3-2 組成測試的元素
3-3 實施測試的方法
3-4 條件判斷
3-5 臨界值與例外處理
3-6 比對器
3-7 非同步測試
第 4 章 模擬（Mock）
4-1 模擬的目的
4-2 運用模擬模組的 Stub
4-3 Web API 的模擬基礎
4-4 Web API 模擬生成函式
4-5 使用模擬函式的 Spy
4-6 Web API 的細部模擬
4-7 依賴當前時間的測試
第 5 章 UI 元件測試
5-1 UI 元件基本知識
5-2 安裝需要的函式庫
5-3 開始 UI 元件測試
5-4 項目清單 UI 元件測試
5-5 互動式 UI 元件測試
5-6 使用公用函式進行測試
5-7 含有非同步處理的 UI 元件測試
5-8 UI 元件的快照測試（snapshot testing）
5-9 原生角色與無障礙名稱（accessible name）
第 6 章 怎麼看程式碼覆蓋率報告（Coverage Report）
6-1 程式碼覆蓋率報告簡介
6-2 怎麼解讀程式碼覆蓋率報告
6-3 選擇喜歡的報表產生器
第 7 章 Web 應用程式整合測試
7-1 Next.js 應用程式開發與整合測試
7-2 React Context 整合測試
7-3 Next.js Router 的畫面顯示整合測試
7-4 Next.js Router 系統操作整合測試
7-5 使用React Hook Form 讓表單更好操作
7-6 表單驗證測試
7-7 模擬 Web API 回應的 MSW（Mock Service Worker）
7-8 Web API 整合測試
7-9 圖片上傳整合測試
第 8 章 UI 元件總管
8-1 Storybook 基本介紹
8-2 Storybook 必要的附加元件（Add-on）
8-3 註冊依賴 Context API 的 Story
8-4 註冊依賴 Web API 的 Story
8-5 註冊依賴 Next.js Router 的 Story
8-6 用 Play function 進行互動測試
8-7 運用 addon-a11y 進行無障礙性測試
8-8 Storybook 的測試執行器
8-9 將 Story 作為整合測試加以運用
第 9 章 視覺回歸測試
9-1 為什麼需要視覺回歸測試
9-2 使用 reg-cli 比較圖片
9-3 導入 Storycap
9-4 導入 reg-suit
9-5 準備外部儲存服務
9-6 讓 reg-suit 與 GitHub Actions 連動
9-7 運用視覺回歸測試來積極進行重構
第 10 章 E2E 測試
10-1 E2E測試簡介
10-2 Playwright 的安裝與基本講解
10-3 簡介測試目標的應用程式
10-4 在開發環境中執行E2E測試
10-5 簡介 Prisma 以及如何準備測試
10-6 登入功能的 E2E 測試
10-7 個人資訊功能的 E2E 測試
10-8 使用 E2E 測試確認按讚（Like） 功能
10-9 建立新文章頁面的 E2E 測試
10-10 文章編輯頁面的 E2E 測試
10-11 文章清單頁面的 E2E 測試
10-12 面對 Flaky 測試
結語
索引
附錄 A 使用 GitHub Actios執行 UI 元件測試（PDF 電子書，請線上下載）
附錄 B 使用 GitHub Actios 執行 E2E 測試（PDF 電子書，請線上下載）
立即查看
前端三十：從 HTML 到瀏覽器渲染的前端開發者必備心法
類似書籍推薦給您
立即查看
華通書坊
