在讀了這本書后對前端架構也有了進一步思考。

書中提到

前端架構圍繞四個核心：代碼、流程、測試、文檔

圍繞這四個核心及項目經(jīng)驗，我做了如下總結，并結合書中的內(nèi)容給出相應的解決方案

1. 編碼規(guī)范

css類名命名無規(guī)律

問題暴露

就所在部門來講，由于前端開發(fā)能力欠缺，工程師在對css的編寫上天馬行空，一時爽就行了。

css類名的命名無規(guī)律將會導致可能出現(xiàn)的命名沖突，然后不同的工程師由于不清楚狀況就會通過提高自己樣式標簽的優(yōu)先級來相互覆蓋。最后導致的是經(jīng)常會有某個功能合并代碼之后直接不能用，于是還得花額外的時間來查找問題。

由于命名的不規(guī)范，很多標簽會有重名的情況，如果只想改一個標簽的樣式，可能還會涉及到其他多處標簽。

關于css代碼還有一個問題，就是通用屬性值沒有相應的變量，想改網(wǎng)站的字體顏色要逐個標簽地審查元素來找。

解決方案

  • css命名需要遵循某種規(guī)定，如書中提到的OOCSS、SMACSS、BEM方法

  • css命名盡量符合單一職責原則

  • 減少css選擇器的層級，因為這不僅影響性能，還會導致樣式的節(jié)點依賴

  • 使用css預編譯工具，如sass、less等，充分利用變量功能

2. 開發(fā)流程

代碼改動引發(fā)災難

問題暴露

實際項目中，js代碼和css代碼隨著項目的復雜度提高，其耦合性也相應提高。

對于js來說，比較好的設計應該是模塊化，所以項目中引入requirejs來進行模塊化加載。

然而工程師由于對模塊化觀念的淡薄以及不熟悉requirejs，他們會自己定義