這本書主要講了作為一名前端架構師的三個職責，分別是體系設計、工作規劃、監督跟進，四個架構的核心，分別是程式碼核心、流程核心、測試核心、文件核心。

《前端架構設計》pdf百度網盤下載連結: https://pan.baidu.com/s/1QWBola_Ne12FtAA3EJf5Gw 密碼: ecac

第一部分 引言

軟體架構師的職責就是要保證專案中每一步都在總體架構的指導下進行，而不是隨機決定。

第1章 前端架構原則

前端架構是一系列工具和流程的集合，旨在提升前端程式碼的質量，並實現高效、可持續的工作流。

前端架構師的工作職責：

1.體系設計—清晰描繪產品和程式碼的最終形態

2.工作規劃—制定完整開發工作流

3.監督跟進—保證專案高效率完成

第2章 Alpha專案

第3章 前端架構的核心

四個核心：

1.程式碼—如何實現系統架構中的HTML、CSS和JavaScript

2.流程—構建高效並且防止出錯的工作流所需要的工具和流程

3.測試—為網站搭建穩固基礎

4.文件—規劃好系統設計藍圖

 

第二部分 程式碼核心

第4章 HTML

第5章 CSS

小結：

1.分離容器和內容

2.區分佈局與元件的角色和職責

3.在標記上使用單一、扁平的選擇器

4.使用其他原則，比如單一職責原則、單一樣式來源、內容修飾符

第6章 JavaScript

（1）選擇框架

（2）維護整潔的JavaScript程式碼

1.保持程式碼整潔

2.創造可複用的函式

第7章 Red Hat程式碼

（1）過多的依賴

（2）嚴重的位置依賴問題

（3）設計分解

（4）元件分類

 

第三部分 流程核心

流程核心的意義在於清晰地定義前端程式碼從開發人員的腦海到使用者的瀏覽器所需要經歷的各個步驟。流程包含了開發過程的各個環節，從合理的想法到可行的設計，到有效的提交，再到最終的部署。

前端架構師的使用者是開發人員，我們所選擇的工具、編寫的程式碼、建立的流程，都是為了讓開發人員能夠構建出最高效、不出錯的、可擴充套件的和可持續優化的系統。

第8章 工作流

第9章 任務處理器

Grunt、Gulp、Webpack

第10章 Red Hat流程

 

第四部分 測試核心

第11章 單元測試

測試驅動開發

第12章 效能測試

（1）制定效能預算

競爭基線、平均基準

（2）原始指標

頁面大小、HTTP請求次數

（3）計時度量

首位元組時間、開始渲染時間、文件完成時間

（4）混合度量標準

PageSpeed分數、Speed Index指標

（5）設定效能測試

Grunt PageSpeed外掛、Grunt Perfbuget外掛

第13章 視覺還原測試

第14章 Red Hat測試方法

 

第五部分 文件核心

第15章 樣式文件

Hologram是一個格式非常自由的文件系統，它並不關心它的內容，以及它寫在什麼型別的檔案中。

SassDoc則完全相反，它是一個記錄Sass的變數、混入、繼承和函式的工具，而且對每個註釋塊後面的程式碼都有嚴格的要求。

第16章 圖形庫

第17章 Red Hat文件

第18章 總結