在讀了這本書后對前端架構(gòu)也有了進(jìn)一步思考。

書中提到

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

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

1. 編碼規(guī)范

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

問題暴露

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

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

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

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

解決方案

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

  • css命名盡量符合單一職責(zé)原則

  • 減少css選擇器的層級，因?yàn)檫@不僅影響性能，還會導(dǎo)致樣式的節(jié)點(diǎn)依賴

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

2. 開發(fā)流程

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

問題暴露

實(shí)際項(xiàng)目中，js代碼和css代碼隨著項(xiàng)目的復(fù)雜度提高，其耦合性也相應(yīng)提高。

對于js來說，比較好的設(shè)計應(yīng)該是模塊化，所以項(xiàng)目中引入requirejs來進(jìn)行模塊化加載。

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