《前端架構設計》學習筆記（更新中）

第一部分 引言

第一章 前端架構項目

1.體系設計->工做規劃->監督跟進

2.架構設計的可擴展性和可持續性

第二章 Alpha項目

1.模塊化內容（原子設計方法論）->全面測試->流式處理（Git工做流程）->詳細的文檔

第三章 前端架構的核心

1.四個核心的主題、技術和實踐是構建可擴展和可持續優化的系統的基礎

2.四個核心：代碼->流程->測試->文檔

 

第二部分 代碼核心

第四章 HTML

1.標記兩大陣營：程序式和靜態式

2.程序式標記：自動化程度100%，可控程度0%；靜態式標記：自動化程度0%，可控程度100%

3.模塊化標記：自動化程度100%，可控程度100%

（三大方法下去了解）

4.OOCSS（面相對象的CSS）方法主要原則：分離結構和外觀，以及分離容器和內容

5.SMACSS（模塊化架構的可擴展CSS）：把佈局和組件分離到不一樣文件夾的思想。把樣式系統分化爲五個具體類則，基礎、佈局、模塊、狀態和主題。

6.BEM方法（塊元素修飾符）：CSS類名命名規則。塊名，元素和修飾符。 

第五章 CSS

1.（過去）幾乎老是從全局做用域開始開發，一層一層增長細節，從使用通用樣式開始，而後給各個部分加樣式（可是這種方法問題不少）

2.（承接上面1條）選擇器優先級，顏色重置，位置依賴，多重繼承和深層嵌套都會出現問題

3.一種現代的、模塊化的方法解決了以上因爲位置依賴而形成CSS樣式混亂的問題。把ID選擇器改爲CSS類名選擇器，對每個元素使用惟一的選擇器，去掉佈局文件中的樣式代碼

4.單一責任原則，單同樣式來源

5.CSS技巧：分離容器和內容，區分佈局與組件的角色和職責，在標記上使用單1、扁平的選擇器，使用其餘原則（不止這一些）

第六章 JavaScript

1.沒有哪一個JavaScript框架是完美的，首選須要解決的是選擇哪些工具來實現目標，而不是選擇哪些框架和插件

2.除非增長複雜度和代碼體積利大於弊，不然不要輕易放棄精簡方案

3.維護整潔的JavaScript代碼：保持代碼整潔（JS Hint檢查規則）、創造可複用的函數

第七章 Red Hat代碼

1.該網站代碼過去的問題：過多的依賴、嚴重的位置依賴問題

2.編寫精簡固定規則

3.數據屬性的優點

（不算太能理解清楚，之後這部分須要從新看）

 

第三部分 流程核心

第八章 工做流

1.流程核心意義：清晰地定義前端代碼從開發人員的腦海到用戶的瀏覽器所須要經歷的各個步驟

2.採用的方法：（1）使用事件跟蹤和用戶故事來正確地跟蹤工做流和標記那些完成了的任務（2）搭建開發環境來測試代碼（3）構建部署流程，用於編譯、驗證和測試代碼（4）在任何代碼被採納以前，都要獲取需求方的反饋（5）把提交的代碼推送到中心代碼倉庫（6）採用這樣一個部署系統：能夠無縫地添加一些新代碼到生產環境；在須要的時候，還能夠回滾這些代碼來恢復原來的功能

3.現代工做開發流：需求->原型->開發

4.前端工做流：必要的工具->本地部署->編寫用戶故事

5. 提交編譯後的資源

 第九章 任務處理器

 1.任務處理器（Node.js，Sass）

第十章 Red Hat流程

1.略

（未完待續...）