摘要：可能很多人和我一樣首次聽(tīng)到前端架構(gòu)這個(gè)詞第一反應(yīng)是前端還有架構(gòu)這一說(shuō)呢在后端開(kāi)發(fā)領(lǐng)域系統(tǒng)規(guī)劃和可擴(kuò)展性非常關(guān)鍵因此架構(gòu)師備受重視早在開(kāi)發(fā)工作啟動(dòng)之前他們就被邀請(qǐng)加入到項(xiàng)目中而且他們會(huì)跟客戶(hù)討論即將建成的平臺(tái)的架構(gòu)要求使用還什么技術(shù)棧內(nèi)容類(lèi)型

可能很多人和我一樣, 首次聽(tīng)到"前端架構(gòu)"這個(gè)詞, 第一反應(yīng)是: "前端還有架構(gòu)這一說(shuō)呢?" 在后端開(kāi)發(fā)領(lǐng)域, 系統(tǒng)規(guī)劃和可擴(kuò)展性非常關(guān)鍵, 因此架構(gòu)師備受重視, 早在開(kāi)發(fā)工作啟動(dòng)之前, 他們就被邀請(qǐng)加入到項(xiàng)目中, 而且他們會(huì)跟客戶(hù)討論即將建成的平臺(tái)的架構(gòu)要求, 使用還什么技術(shù)棧? 內(nèi)容類(lèi)型是什么? 這些內(nèi)容如何被創(chuàng)建?軟件架構(gòu)師的職責(zé)就是要保證項(xiàng)目中每一步都在總體架構(gòu)的指導(dǎo)下進(jìn)行, 而不會(huì)隨機(jī)決定.

現(xiàn)在的前端領(lǐng)域, 隨著JS框架, UI框架和各種庫(kù)的豐富, 前端架構(gòu)也變得十分的重要. 如果一個(gè)大型項(xiàng)目沒(méi)有合理的前端架構(gòu)設(shè)計(jì), 那么前端代碼可能因?yàn)椴煌拈_(kāi)發(fā)人員隨意的引入各種庫(kù)和UI框架, 導(dǎo)致代碼量變得異常臃腫, 最終結(jié)果可能是代碼變得無(wú)法維護(hù), 頁(yè)面性能低下,不得已只能推翻重構(gòu). 所以我們需要在項(xiàng)目開(kāi)始前, 同樣的需要對(duì)前端代碼進(jìn)行架構(gòu), 一旦前端架構(gòu)師設(shè)計(jì)出所有前端開(kāi)發(fā)人員都要遵循的檢驗(yàn)機(jī)制, 建立起系統(tǒng)設(shè)計(jì)的規(guī)范, 那么項(xiàng)目就擁有了可以衡量代碼質(zhì)量的標(biāo)準(zhǔn), 前端開(kāi)發(fā)人員也能享受到更高效的工作流. 所以, 前端架構(gòu)的定義可以用以下一句話來(lái)總結(jié):

前端架構(gòu)是一系列工具和流程的集合, 旨在提升前端代碼的質(zhì)量, 并實(shí)現(xiàn)高效, 可持續(xù)的工作流.

本系列的前端架構(gòu)文章, 將分別圍繞前端架構(gòu)的四個(gè)核心展開(kāi), 分別是代碼, 流程, 測(cè)試, 文檔.

歸根到底, 所有的網(wǎng)站都是由一堆文本文件和資源文件組成的. 當(dāng)我們面對(duì)制作網(wǎng)站所產(chǎn)生的大量代碼時(shí), 就會(huì)發(fā)現(xiàn)為代碼和資源設(shè)定一個(gè)期望是多么重要. 在代碼部分, 我們會(huì)專(zhuān)注于如果實(shí)現(xiàn)系統(tǒng)架構(gòu)中的HTML, CSS, JavaScript.

現(xiàn)在早已過(guò)了FTP上傳文件的時(shí)代, 那么現(xiàn)在重要的是思考怎么用工具和流程構(gòu)建一個(gè)高效且避免出錯(cuò)的工作流. 工作流變得越來(lái)越復(fù)雜, 那些用于它們的工具也同樣如此. 這些工具在提高生產(chǎn)力, 加快效率和保持代碼一致性上帶來(lái)了驚人的效果, 但也伴隨著過(guò)度工程化和抽象化的風(fēng)險(xiǎn). 所以, 現(xiàn)有的工作流是需要改變的.

要構(gòu)建一個(gè)可擴(kuò)展和可持續(xù)優(yōu)化的系統(tǒng), 必須保證新代碼和老代碼能夠很好的兼容. 我們的代碼不會(huì)獨(dú)立存在, 它們都是大型系統(tǒng)中的一部分. 創(chuàng)建覆蓋面廣泛的測(cè)試方案, 能確保老代碼還能正常運(yùn)作.

一般而言, 如果不是團(tuán)隊(duì)中的重要成員要離開(kāi), 我們幾乎都不會(huì)意識(shí)到文檔的重要性. 等到那個(gè)時(shí)候, 大家將不得不停下手頭的工作, 優(yōu)先編寫(xiě)所有的文檔. 作為前端機(jī)構(gòu)師, 你要善于在項(xiàng)目開(kāi)發(fā)的同時(shí)編寫(xiě)良好的文檔.

在前端的架構(gòu)中, HTML作為頁(yè)面的基礎(chǔ)是十分重要的. 如果初始的HTML寫(xiě)得很爛, 將要寫(xiě)出很多不必要的CSS和JavaScript來(lái)彌補(bǔ). 反之, 如果如果初始的HTML寫(xiě)得足夠好, 就能寫(xiě)出根據(jù)可擴(kuò)展性和可維護(hù)的CSS和JavsScript.

首先我們來(lái)看一些初級(jí)的前端工程師可能寫(xiě)出的HTML代碼:

這類(lèi)"div亂燉"的代碼, 是很多初級(jí)的前端為應(yīng)付切頁(yè)面的工作寫(xiě)出來(lái)的. 只是單純?yōu)榱诉€原psd圖, 而完全你不考慮HTML的可讀性和可維護(hù)性.

隨后, 在HTML5之后, 標(biāo)簽的語(yǔ)義化受到了大家的重視, 采用語(yǔ)義化的標(biāo)簽, 不僅增加了代碼的可讀性, 也有利于SEO. HTML語(yǔ)義化標(biāo)簽的使用,這也是在前端架構(gòu)中需要考慮到的,下面我們來(lái)看一下使用語(yǔ)言化標(biāo)簽寫(xiě)的這段代碼:

但是如果我們的頁(yè)面的菜單有數(shù)10項(xiàng)的時(shí)候, 就會(huì)額外添加

你也可以使用Handlebars, Jade, artTemplate各種模板引擎到你的項(xiàng)目中, 當(dāng)然這些都是需要取決于前端架構(gòu)師前期的所選擇的技術(shù)選型. 做為前端架構(gòu)師, 需要評(píng)估HTML產(chǎn)生的過(guò)程, 你對(duì)內(nèi)容的順序, 使用的元素和CSS類(lèi)名有多大的控制權(quán)? 這些元素在將來(lái)改動(dòng)起來(lái)會(huì)有多大難度? 模板的易用性? 你可以通過(guò)系統(tǒng)做出更改, 還是需要手動(dòng)處理? 通過(guò)回答這些問(wèn)題, 可能會(huì)顛覆你自己構(gòu)建HTML和CSS的方法.

構(gòu)建CSS現(xiàn)在有很多成熟的方法, 例如使用新的命名空間, 擴(kuò)充數(shù)據(jù)屬性或在JavaScript里面定義CSS. 這些方法你可以從BootStrap, ElementUI這類(lèi)UI框架中找到影子. 下面, 介紹3種比較常用的方法.

1.OOCSS方法(Object-Oriented CSS 面向?qū)ο蟮腃SS)

  

    

      
標(biāo)題
    
    

      詳細(xì)內(nèi)容
    
  

上面這段代碼就展示了如何使用OOCSS方法創(chuàng)建一個(gè)可切換的HTML代碼, OOCSS有兩個(gè)主要的原則:

分離結(jié)構(gòu)和外觀

分離容器和內(nèi)容

分離結(jié)構(gòu)和外觀
這里的toggle用來(lái)控制結(jié)構(gòu), simple用來(lái)控制外觀,這就是分離結(jié)構(gòu)和外觀的表現(xiàn). 這樣可以實(shí)現(xiàn)外觀的復(fù)用, 例如當(dāng)前的simple皮膚使用直角, 而complex皮膚可能使用圓角, 還加了陰影.

分離容器和內(nèi)容
這里使用toggle-title就是分離容器和內(nèi)容的表現(xiàn), 無(wú)論toggle-title的容器是用的

還是

或者是

, 一旦加上了toggle-title這個(gè)類(lèi)名, 那么該容器均已該類(lèi)名所定義的樣式呈現(xiàn)內(nèi)容.

2.SMACSS方法(Scalable and Modular Architecture for CSS 模塊化架構(gòu)的可擴(kuò)展的CSS)

    

        
標(biāo)題2
    
    

        詳細(xì)內(nèi)容
    

上面的這段代碼基本展示了如何使用SMACSS方法,在我個(gè)人的理解中, OOCSS更多的其實(shí)是提供了一種CSS構(gòu)建思想, 該思想要求將結(jié)構(gòu)和外觀分離, 將容器和內(nèi)容分離. 但是并沒(méi)有提供一套完整的CSS構(gòu)建規(guī)范, 而SMACSS是提供了一套樣式系統(tǒng), 該樣式系統(tǒng)有5個(gè)具體類(lèi)別:

基礎(chǔ): 如果不添加CSS類(lèi)名, 標(biāo)記會(huì)以什么外觀呈現(xiàn)

布局: 把頁(yè)面分成一些區(qū)域

模塊: 設(shè)計(jì)中的模塊化, 可復(fù)用的單元

狀態(tài): 描述在特定的狀態(tài)或情況下, 模塊或布局的的顯示方法

主題: 一個(gè)可選的視覺(jué)外觀層, 可以讓你更換不同主題

基礎(chǔ)

//base.css
body, form {
    margin: 0;
    padding: 0;
}

a {
    color: #039;
}

a:hover {
    color: #03F;    
}

在基礎(chǔ)代碼中, 應(yīng)該規(guī)定的是頁(yè)面中的一些通用樣式,例如將body的margin和padding設(shè)置為0 , 設(shè)置a標(biāo)簽的顏色等. 類(lèi)似于某些人常用的initial.css文件.

布局

//layout.css
#header, #article, #footer {
    width: 960px;
    margin: auto;
}

#article {
    border: solid #CCC;
    border-width: 1px 0 0;
}

這里的布局指的是頁(yè)面中一些通用的布局組件, 例如頭部, 側(cè)邊欄, 主體和底部這些. 這些布局組件會(huì)在多個(gè)頁(yè)面通用, 所以最好把其放入到一個(gè)css文件中. 方便復(fù)用. 在SMACSS中, 推薦將布局容器的頂級(jí)標(biāo)簽設(shè)置為id, 這樣確保了每個(gè)頁(yè)面中擁有唯一持有該樣式的布局容器, 也方便其css和js選擇器的使用. 當(dāng)然, 你也可以使用一個(gè)唯一的類(lèi)名替代id.

模塊

//module.css

//module1
.module1 > h2 {
    padding: 5px;
}

.module1 span {
    padding: 5px;
}

//module2
.module2 > h2 {
    padding: 10px;
}

.module2 span {
    padding: 10px;
}

模塊是指頁(yè)面中可以多帶帶分離并提取出來(lái)復(fù)用的部分, 例如導(dǎo)航條, 側(cè)邊欄, 對(duì)話框或一些widget等. 所以, 模塊禁止使用id, 而應(yīng)該采用類(lèi)名的方式.

狀態(tài)

    

        

            There is an error!
        
        Search
        
    

State 負(fù)責(zé)定義元素不同的狀態(tài)下，所呈現(xiàn)的樣式. 上面的一段代碼中,已is-開(kāi)頭的就是表示狀態(tài)的類(lèi)名, is-collapsed, is-error等類(lèi)名不會(huì)多帶帶使用, 而是和前面的布局和模塊一起使用. 下面的代碼, 就是在tab欄模塊和狀態(tài)一起使用:

//state.css
.tab {
    background-color: purple;
    color: white;
}

.is-tab-active {
    background-color: white;
    color: black;
}

主題

// module-name.css
.mod {
    border: 1px solid;
}

//theme.css
.mod {
    border-color: blue;
}

這里的主題理解為皮膚更加合適, 已上面的代碼為例, 在module-name.css中定義了邊框除顏色之外的樣式, 在theme.css文件中定義了該邊框的顏色, 這樣的好處就是, 如果定義其他顏色的類(lèi)名去覆蓋這些有顏色的樣式, 那么就可以通過(guò)類(lèi)名去切換皮膚的顏色. 達(dá)到更換主題的效果.

更多關(guān)于SMACSS的方法, 請(qǐng)參考: https://smacss.com/book

3.BEM方法(Block Element Modifier 塊元素修飾符)

    

    
標(biāo)題3
    
    
    

        ...
    
    ...

BEM是由Yandex提出的給一個(gè)CSS命名方法, 該方法要求使用一個(gè)CSS類(lèi)名, 盡可能使用以下三者組成:

塊名: 所屬組件的名稱(chēng)

元素: 元素在塊里面的名稱(chēng)

修飾符: 任何與塊或元素相關(guān)聯(lián)的的修飾符

塊名
這里的塊名很多初學(xué)者會(huì)以為是inline-block中的塊, 其實(shí)這里的塊名指的是一個(gè)獨(dú)立的模塊或組件. 例如一個(gè)

可以用做一個(gè)模塊,

中的

GPU云服務(wù)器 云服務(wù)器 前端架構(gòu)設(shè)計(jì) 前端開(kāi)發(fā)前端設(shè)計(jì) 前端設(shè)計(jì)前端開(kāi)發(fā) 前端開(kāi)發(fā)和前端設(shè)計(jì)

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://www.ezyhdfw.cn/yun/112893.html

• 上一篇：Sass 語(yǔ)法規(guī)則
• 下一篇：CSS盒子模型以及外邊框合并的問(wèn)題