作者: [美] Micah Godbolt 出版社: 人民郵電出版社 副標題: 讓前端開發可持續優化、可擴充套件 原作名: Front-End Architecture 譯者: 潘泰燊 / 張　鵬 / 許金泉 出版年: 2017-4 頁數: 164

內容簡介  · · · · · ·

本書展示了一名成熟的前端架構師對前端開發全面而深刻的理解。作者結合自己在Red Hat公司的專案實戰經歷，探討了前端架構原則和前端架構的核心內容，包括工作流程、測試流程和文件記錄，以及作為前端架構師所要承擔的具體開發工作，包 括HTML、JavaScript和CSS等。

作者簡介  · · · · · ·

Micah Godbolt

前端架構師，作家，播客播主，世界級開源大會的培訓師和演講師。他在個人部落格 （https://micahgodbolt.com）中經常大力推廣前端架構、Sass、視覺還原測試和基於模式的設計方法。他出生於太平洋西北地區， 目前和妻子以及 兩個孩子定居於波特蘭的郊區。

譯者簡介：

潘泰燊

畢業於廣東外語外貿大學，曾就職於騰訊、百度等網際網路公司，參與過騰訊QQ空間、百度地圖等海量資料業務的Web開發工作，現就職於富途網路。

張鵬

碩士畢業於中山大學，曾就職於百度、騰訊等知名網際網路公司，參與過基於LNMP架構的億級別網際網路應用的設計與實現，目前從事NodeJS與前端開發。

許金泉

畢業於深圳大學，畢業後加入百度FEX，曾主導UEditor、百度國際化瀏覽器等前端開發工作，現就職於騰訊雲。

審校簡介：

李弦

華為2012實驗室UCD互動設計師，Monash University互動設計碩士，前新東方英語教師，廣東外語外貿大學英語專業八級。

目錄  · · · · · ·

前言　　xi 第一部分　引言 第1章　前端架構原則　　7 第2章　Alpha 專案　　11 2.1　慢而有力的開端　　11 2.2　全副武裝　　12 第3章　前端架構的核心　　15 3.1　圍繞四個核心工作　　15 3.2　四個核心的含義　　16 第二部分　程式碼核心 第4章　HTML　　19 4.1　過去處理標記的方法　　19 4.1.1　程式式標記：自動化程度　　100%，可控程度 0%　　19 4.1.2　靜態標記：自動化程度 0%，可控程度　　100%　　20 4.2　平衡可控性和自動化　　21 4.3　這一切背後的設計系統　　22 4.4　模組化 CSS 理論的多面性　　22 4.4.1　OOCSS 方法　　23 4.4.2　SMACSS 方法　　23 4.4.3　BEM 方法　　24 4.5　選擇適合的方案　　25 第5章　CSS　　27 5.1　特性之爭與繼承之痛　　28 5.2　一種現代的、模組化的方法　　30 5.3　其他有助益的原則　　32 5.3.1　單一職責原則　　32 5.3.2　單一樣式來源　　33 5.3.3　元件修飾符　　34 5.4　小結　　35 第6章　JavaScript　　37 6.1　選擇框架　　37 6.2　維護整潔的 JavaScript 程式碼　　38 6.2.1　保持程式碼整潔　　38 6.2.2　創造可複用的函式　　38 6.3　小結　　40 第7章　Red Hat 程式碼　　41 7.1　過多的依賴　　41 7.2　嚴重的位置依賴問題　　42 7.3　設計分解　　42 7.4　元件分類　　43 7.5　BB 鳥規則　　44 7.6　編寫你自己的規則　　44 7.7　每個標籤指定唯一的選擇器　　46 7.7.1　單一責任原則　　46 7.7.2　樣式只有單一的來源　　47 7.7.3　可選的修飾符　　47 7.7.4　可選的上下文　　50 7.8　語義化的網格　　53 第三部分　流程核心 第8章　工作流　　57 8.1　過去的開發工作流　　57 8.2　現代的開發工作流　　58 8.2.1　需求　　58 8.2.2　原型設計　　58 8.2.3　程式開發　　58 8.3　前端工作流　　59 8.3.1　必要的工具　　59 8.3.2　本地部署　　59 8.3.3　編寫使用者故事　　60 8.4　開發　　61 8.5　釋出　　62 8.6　提交編譯後的資源　　62 8.7　持續整合的伺服器　　63 8.7.1　標籤分支　　64 8.7.2　究竟為什麼要這麼做　　64 8.8　釋出渠道　　64 第9章　任務處理器　　67 9.1　在任務處理器中完成一切　　68 9.2　在專案中使用任務處理器　　69 9.3　有明顯的優勝者嗎　　71 第10章　Red Hat 流程　　73 10.1　征服最後一英里　　73 10.2　模式驅動的設計系統　　75 第四部分　測試核心 第11章　單元測試　　87 11.1　單元　　87 11.1.1　更多重用　　88 11.1.2　更好的測試　　88 11.2　測試驅動的開發　　88 11.3　一個測試驅動的例子　　89 11.4　測試覆蓋率要多大才足夠　　90 11.4.1　解決分歧點　　90 11.4.2　從測試覆蓋率開始　　90 第12章　效能測試　　91 12.1　制定效能預算　　91 12.1.1　競爭基線　　92 12.1.2　平均基準　　92 12.2　原始指標　　93 12.2.1　頁面大小　　93 12.2.2　HTTP 請求次數　　94 12.3　計時度量　　94 12.4　混合度量標準　　95 12.4.1　PageSpeed 分數　　95 12.4.2　Speed Index 指標　　95 12.5　設定效能測試　　95 12.5.1　Grunt PageSpeed 外掛　　96 12.5.2　Grunt Perfbuget 外掛　　96 12.6　小結　　97 第13章　視覺還原測試　　99 13.1　常見的質疑　　99 13.1.1　不瞭解情況的開發者　　100 13.1.2　不一致的設計　　100 13.1.3　舉棋不定的決策者　　100 13.2　一個經過測試的解決方案　　101 13.3　視覺還原測試的多面性　　101 第14章　Red Hat 測試方法　　103 14.1　實踐視覺還原測試　　103 14.1.1　測試工具集　　103 14.1.2　設定 Grunt　　104 14.1.3　測試檔案　　104 14.1.4　對比　　105 14.1.5　執行全部測試用例　　106 14.1.6　如何應對測試失敗　　107 14.1.7　從失敗到成功　　107 14.1.8　修改程式碼以適應需求　　108 14.1.9　將基準圖片放在元件目錄裡　　108 14.1.10　獨立執行每個元件的測試集　　109 14.1.11　測試的可擴充套件性　　110 14.2　小結　　111 第五部分　文件核心 第15章　樣式文件　　117 15.1　配置 Hologram　　117 15.1.1　Hologram 的文件註釋塊　　119 15.1.2　Hologram 編譯流程　　120 15.1.3　Hologram 小結　　121 15.2　SassDoc　　121 15.2.1　安裝 SassDoc　　121 15.2.2　使用 SassDoc　　122 15.2.3　探索 SassDoc　　123 15.2.4　深入瞭解 SassDoc　　124 15.2.5　內部依賴　　125 15.3　小結　　127 第16章　圖形庫　　129 16.1　何為 Pattern Lab　　129 16.2　執行 Pattern Lab　　131 16.3　首頁模板　　133 16.4　首變數　　134 16.5　原子　　135 16.6　發揮原子的作用　　135 第17章　Red Hat 文件　　137 17.1　階段　　1：靜態的樣式文件　　137 17.2　階段　　2：重寫 Pattern Lab　　139 17.3　階段　　3：分拆模式庫和樣式文件　　142 17.4　階段　　4：建立統一的渲染引擎　　143 17.5　階段　　5：自動建立新模式　　144 第18章　總結　　147 作者介紹　　149 封面介紹　　149