具體描述
産品特色
編輯推薦
《JavaScript Web應用開發》介紹瞭用於提升軟件質量和改進開發流程的技術:首先教你如何製定能優化産品質量的過程,製定好過程後,每次修改代碼後都會執行一些任務,每次提交後都會運行測試,還能自動部署;其次集中介紹如何設計模塊化的組件,以及如何使用這些組件構建穩定的應用。內容包括自動化開發、測試和部署過程;JavaScript基礎知識和模塊化實踐;開發模塊化、可維護且經過良好測試的應用;掌握異步流程,理解MVC模式,設計REST API。
內容簡介
《JavaScript Web應用開發》是麵嚮一綫開發人員的一本實用教程,對新的Web開發技術與程序進行瞭全麵的梳理和總結,為JavaScript開發人員提供瞭改進Web開發質量和開發流程的新技術。本書主要分兩大塊,首先是以構建為目標實現JavaScript驅動開發,其次介紹如何管理應用設計過程中的復雜度,包括模塊化、MVC、異步代碼流、測試以及API設計原則。
作者簡介
Nicolas Bevacqua,是JavaScript開源社區的活躍成員,自由Web開發者,關注模塊化JavaScript、構建過程和新銳設計理念,偶爾進行公開演講,還是一名充滿激情的作傢。他維護著多個開源項目,還開設瞭一個博客,發錶關於Web、性能、漸進增強和JavaScript開發相關的文章,地址是ponyfoo.com。Nico現在和他的女友瑪麗安一起生活在阿根廷布宜諾斯艾利斯。
內頁插圖
精彩書評
“享受這段改進開發流程的旅程吧。”
——Addy Osmani,就職於榖歌
“JavaScript開發者必讀的一本書!”
——Stephen Wakely,就職於湯森路透公司
“現代JavaScript生態係統這一迷宮的指南。”
——Jonas Bandi,就職於IvoryCode GmbH
目錄
第一部分 構建過程
第1章 構建優先 2
1.1 問題齣現瞭 2
1.1.1 45分鍾內每秒損失17萬美元 3
1.1.2 構建優先 3
1.1.3 繁瑣的前戲 4
1.2 遵守構建優先原則,提前計劃 5
1.3 構建過程 7
1.4 處理應用的復雜度和設計理念 8
1.5 鑽研構建優先原則 12
1.5.1 檢查代碼質量 12
1.5.2 在命令行中使用lint工具 15
1.6 總結 18
第2章 編寫構建任務,製定流程 19
2.1 介紹Grunt 20
2.1.1 安裝Grunt 21
2.1.2 設置第一個Grunt任務 23
2.1.3 使用Grunt管理構建過程 24
2.2 預處理和靜態資源優化 26
2.2.1 詳述預處理 26
2.2.2 處理LESS 28
2.2.3 打包靜態資源 31
2.2.4 簡化靜態資源 32
2.2.5 創建子圖集 34
2.3 檢查代碼完整性 36
2.3.1 清理工作目錄 36
2.3.2 使用lint程序檢查代碼 37
2.3.3 自動運行單元測試 38
2.4 首次自己編寫構建任務 38
2.5 案例分析:數據庫任務 39
2.6 總結 41
第3章 精通環境配置和開發流程 42
3.1 應用的環境 42
3.1.1 配置構建模式 43
3.1.2 環境層麵的配置 47
3.1.3 開發環境有什麼特彆之處 48
3.2 配置環境 48
3.2.1 瀑布式存儲配置的方法 49
3.2.2 通過加密增強環境配置的安全性 50
3.2.3 使用係統級方式設置環境層麵的配置 52
3.2.4 在代碼中使用瀑布式方法閤並配置 53
3.3 自動執行繁瑣的首次設置任務 54
3.4 在持續開發環境中工作 54
3.4.1 監視變動,爭分奪秒 55
3.4.2 監視Node應用的變動 56
3.4.3 選擇一款閤適的文本編輯器 57
3.4.4 手動刷新瀏覽器已經過時瞭 58
3.5 總結 58
第4章 發布、部署和監控 59
4.1 發布應用 60
4.1.1 優化圖像 60
4.1.2 緩存靜態資源 62
4.1.3 內嵌對首屏至關重要的CSS 64
4.1.4 部署前要測試 65
4.2 預部署操作 65
4.2.1 語義化版本 66
4.2.2 使用更改日誌 67
4.2.3 提升版本號時提交更改日誌 67
4.3 部署到Heroku 68
4.3.1 在Heroku的服務器中構建 70
4.3.2 管理多個環境 71
4.4 持續集成 71
4.4.1 使用Travis托管的CI 72
4.4.2 持續部署 73
4.5 監控和診斷 74
4.5.1 日誌和通知 74
4.5.2 調試Node應用 76
4.5.3 分析性能 78
4.5.4 運行時間和進程管理 78
4.6 總結 79
第二部分 管理復雜度
第5章 理解模塊化和依賴管理 82
5.1 封裝代碼 83
5.1.1 理解單一職責原則 84
5.1.2 信息隱藏和接口 86
5.1.3 作用域和this關鍵字 87
5.1.4 嚴格模式 90
5.1.5 提升變量的作用域 91
5.2 JavaScript模塊 92
5.2.1 閉包和模塊模式 92
5.2.2 原型的模塊化 93
5.2.3 CommonJS模塊 94
5.3 管理依賴 95
5.3.1 依賴圖 95
5.3.2 介紹RequireJS 98
5.3.3 Browserify:在瀏覽器中使用CJS 模塊 100
5.3.4 Angular管理依賴的方式 100
5.4 理解包管理 102
5.4.1 Bower 簡介 103
5.4.2 大型庫,小組件 104
5.4.3 選擇閤適的模塊係統 105
5.4.4 學習循環依賴 105
5.5 ECMAScript 6新功能簡介 106
5.5.1 在Grunt任務中使用Traceur 107
5.5.2 Harmony中的模塊 107
5.5.3 創建塊級作用域的let關鍵字 108
5.6 總結 109
第6章 理解JavaScript中的異步流程控製方法 110
6.1 使用迴調 110
6.1.1 跳齣迴調之坑 111
6.1.2 解開混亂的迴調 112
6.1.3 嵌套請求 114
6.1.4 處理異步流程中的錯誤 116
6.2 使用async庫 119
6.2.1 使用瀑布式、串行還是並行 119
6.2.2 異步函數式任務 123
6.2.3 異步任務隊列 124
6.2.4 製定流程和動態流程 125
6.3 使用Promise對象 127
6.3.1 Promise對象基礎知識 127
6.3.2 鏈接Promise對象 130
6.3.3 控製流程 132
6.3.4 處理被拒絕的Promise對象 133
6.4 理解事件 134
6.4.1 事件和DOM 134
6.4.2 自己實現事件發射器 135
6.5 展望:ES6生成器 138
6.5.1 創建第一個生成器 138
6.5.2 生成器的異步性 140
6.6 總結 141
第7章 使用模型-視圖-控製器模式 142
7.1 jQuery力不勝任 142
7.2 在JavaScript中使用MVC模式 145
7.2.1 為什麼使用Backbone 146
7.2.2 安裝Backbone 147
7.2.3 使用Grunt和Browserify編譯Backbone模塊 147
7.3 介紹Backbone 148
7.3.1 Backbone視圖 149
7.3.2 創建Backbone模型 152
7.3.3 使用Backbone集閤組織模型 154
7.3.4 添加Backbone路由器 155
7.4 案例分析:購物清單 157
7.4.1 從靜態購物清單開始 157
7.4.2 添加刪除按鈕 159
7.4.3 把物品添加到購物車中 161
7.4.4 實現行內編輯 164
7.4.5 服務層和視圖路由 170
7.5 Backbone和Rendr:服務器和客戶端共享渲染 172
7.5.1 Rendr簡介 172
7.5.2 理解Rendr 的樣闆代碼 174
7.5.3 一個簡單的Rendr應用 176
7.6 總結 182
第8章 測試JavaScript組件 184
8.1 JavaScript測試速成課 185
8.1.1 隔離邏輯單元 185
8.1.2 使用TAP 186
8.1.3 編寫第一個單元測試 186
8.1.4 在瀏覽器中運行使用Tape編寫的測試 187
8.1.5 籌備、行動和斷言 188
8.1.6 單元測試 188
8.1.7 便利性優於約定 189
8.1.8 案例分析:為事件發射器編寫單元測試 189
8.1.9 測試事件發射器 190
8.1.10 測試.on方法 192
8.1.11 馭件、偵件和代理 193
8.1.12 模擬 194
8.1.13 介紹Sinon.js 195
8.1.14 監視函數的調用情況 195
8.1.15 代理require調用 196
8.2 在瀏覽器中測試 198
8.2.1 僞造XHR請求和服務器響應 198
8.2.2 案例分析:測試DOM交互 200
8.3 案例分析:為使用MVC模式開發的購物清單編寫單元測試 209
8.3.1 測試視圖路由器 209
8.3.2 測試視圖模型的驗證 214
8.4 自動運行Tape測試 216
8.4.1 自動運行瀏覽器中的Tape測試 217
8.4.2 持續測試 218
8.5 集成測試、外觀測試和性能測試 218
8.5.1 集成測試 219
8.5.2 外觀測試 219
8.5.3 性能測試 220
8.6 總結 221
第9章 REST API設計和分層服務架構 222
9.1 規避API設計誤區 222
9.2 學習REST API設計 223
9.2.1 端點、HTTP方法和版本 224
9.2.2 請求、響應和狀態碼 227
9.2.3 分頁、緩存和限流 229
9.2.4 為API編寫文檔 231
9.3 實現分層服務架構 232
9.3.1 路由層 233
9.3.2 服務層 233
9.3.3 數據層 234
9.3.4 路由層 234
9.3.5 服務層 234
9.3.6 數據層 235
9.4 在客戶端使用REST API 235
9.4.1 請求處理層 236
9.4.2 中止舊請求 236
9.4.3 使用一緻的方式處理AJAX錯誤 237
9.5 總結 238
附錄A Node.js的模塊 240
附錄B 介紹Grunt 242
附錄C 選擇閤適的構建工具 249
附錄D JavaScript代碼質量指南 257
前言/序言
《前端架構師之路:從理論到實踐的精進之道》 這是一本關於如何構建、維護和演進復雜前端應用的書。 它不僅僅是一份技術手冊,更是一份通往資深前端開發者的思維指南。在如今瞬息萬變的技術浪潮中,前端開發早已不再是簡單的頁麵搭建,而是上升到瞭架構設計、性能優化、可維護性、團隊協作以及技術選型的戰略層麵。本書將帶領讀者深入剖析前端架構的核心要素,幫助開發者從“碼農”蛻變為能夠引領技術方嚮的“架構師”。 第一部分:夯實基礎,理解架構的基石 在深入探討架構之前,我們必須對構成前端應用的基本單元和與之相關的底層原理有深刻的理解。這一部分將帶領讀者重溫那些看似基礎,實則至關重要的知識點,並從架構的視角去重新審視它們。 精通 JavaScript 生態: 現代 JavaScript 深度剖析: 逃離 ECMAScript 的錶麵,深入理解事件循環、閉包、原型鏈、模塊化(CommonJS, ES Modules, AMD)的底層機製,以及它們的性能影響。掌握 Promise, async/await 的異步編程模式,以及 Generator 的高級用法,為構建可預測、高效的異步係統奠定基礎。 TypeScript 的架構價值: 學習如何利用 TypeScript 的強類型特性,在開發早期捕獲潛在錯誤,提升代碼的可讀性和可維護性。深入理解泛型、裝飾器、條件類型等高級特性,以及如何將其應用於構建大型、健壯的項目。 npm/Yarn 包管理與模塊化策略: 不止於安裝依賴,更要理解模塊解析、版本衝突解決、鎖文件(lock file)的原理,以及如何設計和發布可復用的 npm 包。探討 monorepo(多包倉庫)的優勢與挑戰,以及在大型項目中的應用。 理解瀏覽器渲染原理: 從 HTML 到像素的旅程: 深入剖析 DOM 解析、CSS 解析、樣式計算、布局(Layout/Reflow)、繪製(Paint/Repaint)、閤成(Composite)等關鍵渲染階段。理解瀏覽器是如何將代碼轉化為用戶可見界麵的,並從中提煉齣優化性能的切入點。 JavaScript 對渲染的影響: 探討 JavaScript 在渲染過程中扮演的角色,理解同步腳本、異步腳本、defer、async 的加載和執行時機,以及它們如何影響頁麵的首次加載時間和用戶交互體驗。 關鍵渲染路徑優化: 學習如何通過減少 DOM 節點、優化 CSS 選擇器、使用 CSSOM 和 DOM 的高效組閤、延遲非關鍵資源的加載等策略,縮短頁麵的“白屏”時間,提升用戶感知性能。 掌握網絡通信與協議: HTTP/2 和 HTTP/3 的新特性: 理解 HTTP/2 的多路復用、頭部壓縮、服務器推送等特性如何改善低延遲和高並發場景下的性能。初步瞭解 HTTP/3 在 QUIC 協議上的改進,以及其對實時通信的潛力。 RESTful API 設計原則: 學習如何設計規範、易於理解和維護的 RESTful API,包括資源命名、HTTP 方法的使用、狀態碼的含義、請求與響應的格式等。 GraphQL 的優勢與適用場景: 探索 GraphQL 相對於 REST 的靈活性,理解其查詢語言、類型係統和 resolver 的設計,以及在需要靈活數據獲取的前端應用中的應用。 第二部分:前端架構設計,構建可擴展的係統 擁有堅實的基礎後,我們將進入前端架構的核心領域。這一部分將聚焦於如何設計齣健壯、靈活、易於維護和擴展的前端係統。 模塊化與組件化設計: 超越基礎的組件化: 深入探討組件的生命周期、props/state 管理、事件處理、插槽(slots)和上下文(context)的使用,以及如何設計具有良好封裝性、可組閤性和可復用性的組件。 設計模式在前端的應用: 學習並實踐如觀察者模式、工廠模式、單例模式、高階組件(HOC)、渲染屬性(Render Props)等常見設計模式,並理解它們在解決特定前端問題時的優雅之處。 UI 庫與設計係統的構建: 瞭解如何構建或使用一套統一的 UI 庫和設計係統,以實現代碼的復用、設計的一緻性,並提升團隊協作效率。 狀態管理策略: 從局部狀態到全局狀態: 學習 Redux、Vuex、MobX 等主流狀態管理庫的設計理念和核心概念,理解其在處理復雜應用狀態時的優勢。 React Context API 的高級用法: 探索如何有效地利用 React 的 Context API 來管理應用狀態,並瞭解其與 Redux 等庫的權衡。 GraphQL 與狀態管理: 學習如何結閤 GraphQL 客戶端(如 Apollo Client, Relay)來管理服務端數據,並將其與本地狀態管理相結閤。 狀態管理的最佳實踐: 探討如何組織和劃分狀態、避免狀態膨脹、以及如何進行狀態的持久化和同步。 路由與導航架構: 聲明式路由與編程式路由: 掌握 React Router, Vue Router 等路由庫的使用,理解聲明式路由的聲明性和編程式路由的靈活性。 嵌套路由與動態路由: 學習如何設計復雜的嵌套路由結構,以及如何處理帶有參數的動態路由。 導航守衛與權限控製: 探討如何實現路由的導航守衛,以進行身份驗證、權限校驗、頁麵跳轉前的預處理等。 服務端渲染 (SSR) 與路由: 理解 SSR 對路由的特殊要求,以及如何配置和實現 SSR 下的路由。 數據獲取與 API 交互: Ajax 的進化: 迴顧並深入理解 Fetch API 的強大之處,以及如何利用它進行高效的網絡請求。 HTTP 緩存策略: 學習並應用 HTTP 緩存機製,如 ETag, Last-Modified, Cache-Control 等,以減少服務器負載,提升頁麵加載速度。 API 封裝與抽象: 學習如何將復雜的 API 調用封裝成易於使用的服務層,並實現請求的攔截、響應的處理、錯誤處理等。 GraphQL 數據獲取: 深入理解 GraphQL 查詢的構建、變量的使用、以及錯誤處理機製。 第三部分:性能優化與工程化實踐 一個優秀的架構不僅要功能強大,更要高效、穩定。這一部分將聚焦於如何通過各種手段來提升前端應用的性能,並采用現代化的工程化手段來保障開發效率和代碼質量。 前端性能優化深度探索: 資源優化: 代碼分割(Code Splitting)、懶加載(Lazy Loading)、圖片優化(格式、尺寸、懶加載)、字體優化、CSS 優化(關鍵 CSS、去冗餘)等。 渲染性能優化: 虛擬滾動(Virtual Scrolling)、列錶性能優化、DOM 操作的最小化、Canvas 與 WebGL 的應用場景。 網絡性能優化: CDN 的使用、HTTP 壓縮、預加載(Preload)、預連接(Preconnect)。 打包與構建優化: Webpack, Rollup, Vite 等打包工具的深入配置,理解 tree shaking, scope hoisting, DllPlugin 等優化手段。 構建工具與模塊打包: Webpack 核心概念與高級配置: Entry, Output, Loaders, Plugins, Mode, Optimization 等核心概念的深入理解,以及如何配置自定義 Loader 和 Plugin。 Rollup 的優勢與適用場景: 學習 Rollup 在打包庫和 ES Module 上的優勢,以及其配置方法。 Vite 的快速開發體驗: 理解 Vite 基於 ES Modules 的原生支持,以及其極快的冷啓動和熱更新速度。 構建流程的自動化: 學習如何集成 Linting (ESLint, Stylelint), Formatting (Prettier), Testing (Jest, Vitest) 到構建流程中。 自動化測試與質量保障: 單元測試: 學習使用 Jest, Vitest 等框架編寫針對組件、函數、服務等的單元測試。 集成測試: 理解集成測試在驗證組件之間交互和整體功能方麵的作用。 端到端 (E2E) 測試: 掌握 Cypress, Playwright 等工具,編寫模擬用戶行為的 E2E 測試。 測試驅動開發 (TDD) 與行為驅動開發 (BDD): 探討 TDD 和 BDD 的開發理念,以及它們如何提升代碼質量和可維護性。 代碼質量管理與規範: Linting 與 Formatting: 深入理解 ESLint, Stylelint, Prettier 的配置與使用,以及如何建立統一的代碼風格規範。 Git 版本控製與協作: 掌握 Git 的高級命令,理解分支策略(如 Git Flow)、Code Review 的流程,以及如何高效地進行團隊協作。 CI/CD 持續集成/持續部署: 學習如何使用 Jenkins, GitHub Actions, GitLab CI 等工具,實現代碼的自動化構建、測試和部署。 第四部分:前端架構演進與未來趨勢 技術是不斷發展的,前端架構也需要與時俱進。這一部分將探討前端架構的演進方嚮,以及未來可能的發展趨勢。 微前端架構: 解決單體應用的痛點: 理解微前端的概念,以及它如何解決大型單體前端應用在團隊協作、技術棧選擇、獨立部署等方麵的挑戰。 主流微前端方案: 學習qiankun, single-spa 等主流微前端框架的設計原理、實現方式和應用場景。 微前端的挑戰與權衡: 探討微前端在通信、狀態共享、路由、性能等方麵帶來的新問題,以及如何進行權衡。 服務端渲染 (SSR) 與靜態站點生成 (SSG): SSR 的優勢與挑戰: 理解 SSR 如何提升 SEO 和首屏加載速度,並學習 Next.js, Nuxt.js 等框架的 SSR 實現。 SSG 的應用場景: 探討 SSG 在博客、文檔、産品展示等內容型網站上的優勢,以及像 Gatsby, Astro 等框架的應用。 混閤渲染模式: 理解 ISR (Incremental Static Regeneration) 等混閤渲染模式,以及如何結閤 SSR 和 SSG 的優勢。 WebAssembly (Wasm) 的潛力: Wasm 的概念與優勢: 瞭解 WebAssembly 的設計理念,以及它在提升性能、運行原生代碼方麵的潛力。 Wasm 在前端的應用場景: 探索 Wasm 在圖形圖像處理、音視頻編解碼、遊戲開發、復雜計算等領域的應用。 低代碼/無代碼平颱與前端架構: 理解低代碼/無代碼的演進: 探討低代碼/無代碼平颱對傳統前端開發模式的影響。 架構師在低代碼時代的定位: 思考架構師如何設計更靈活、可擴展的低代碼平颱,以及如何與低代碼開發者協作。 跨平颱開發與前端的融閤: React Native, Flutter, Electron: 瞭解這些跨平颱框架在移動端和桌麵端的應用,以及它們與 Web 端技術棧的融閤。 Web 技術嚮其他平颱的延伸: 探討 Web 技術如何賦能其他平颱的開發。 《前端架構師之路:從理論到實踐的精進之道》 將通過大量的代碼示例、真實的案例分析和深入的思考,帶領讀者一步步掌握前端架構設計的精髓。無論你是初齣茅廬,希望快速提升技術視野的開發者,還是身經百戰,渴望突破職業瓶頸的資深工程師,本書都將是你寶貴的參考和指引。它不僅教授你“怎麼做”,更重要的是讓你理解“為什麼這麼做”,從而培養齣卓越的前端架構思維,在職業生涯中不斷精進,成為真正引領行業發展的技術專傢。