web前端架構(gòu)指的是什么

這篇文章主要講解了“web前端架構(gòu)指的是什么”，文中的講解內(nèi)容簡(jiǎn)單清晰，易于學(xué)習(xí)與理解，下面請(qǐng)大家跟著小編的思路慢慢深入，一起來(lái)研究和學(xué)習(xí)“web前端架構(gòu)指的是什么”吧！

web前端架構(gòu)是一系列工具和流程的集合，旨在提升前端代碼的質(zhì)量，并實(shí)現(xiàn)高效可持續(xù)的工作流。web前端架構(gòu)的核心有4個(gè)：1、代碼（HTML、CSS、JavaScript）；2、流程，怎么用工具和流程構(gòu)建一個(gè)高效且避免出錯(cuò)的工作流是一個(gè)重要的思考；3、測(cè)試，創(chuàng)建覆蓋面廣泛的測(cè)試方案，能確保老代碼還能正常運(yùn)行；4、文檔，設(shè)計(jì)文檔是你同他人交流的工具。

一、web前端架構(gòu)的由來(lái)

2014年10月13日CSS開(kāi)發(fā)者大會(huì)上，在新奧爾良會(huì)議中心一個(gè)擁擠的房間里“舉起前端架構(gòu)的旗幟”成了在一線奮斗著的開(kāi)發(fā)者們共同的訴求。在那之后，那些想要弄清楚自身定位以及在公司中所扮演的角色的開(kāi)發(fā)者們發(fā)現(xiàn)，其實(shí)他們一直扮演著前端架構(gòu)師的角色， 卻從來(lái)沒(méi)有擁有過(guò)這個(gè)頭銜，或者沒(méi)有足夠的信心去爭(zhēng)取這個(gè)職位所應(yīng)具有的權(quán)力。

在大會(huì)召幾周之后，很多人把他們?cè)赥witter上的個(gè)人簡(jiǎn)介改成了“前端架構(gòu)師”。

二、你理解的web前端架構(gòu)是怎樣的？

前端架構(gòu)如同建筑設(shè)計(jì)，在建設(shè)過(guò)程中，建筑設(shè)計(jì)師需要設(shè)計(jì)和規(guī)劃方案，并且跟進(jìn)施工過(guò)程。這與前端架構(gòu)師的工作有著異曲同工之妙，不同的是后者建造的是網(wǎng)站，而不是建筑物。比起澆筑混凝土，建筑設(shè)計(jì)師會(huì)在設(shè)計(jì)工程構(gòu)圖的工作上傾注更多的精力。同理，相比編寫具體的代碼，前端架構(gòu)師更專注于開(kāi)發(fā)工具和優(yōu)化流程。

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

前端設(shè)計(jì)架構(gòu)不是一勞永逸的工作，沒(méi)有任何設(shè)計(jì)在一開(kāi)始就是完美的，也沒(méi)有任何計(jì)劃可以一步到位。

前端架構(gòu)的特殊性

前端不是一個(gè)獨(dú)立的子系統(tǒng)，又橫跨整個(gè)系統(tǒng)

分散性：前端工程化

頁(yè)面的抽象、解耦、組合

可控：腳手架、開(kāi)發(fā)規(guī)范等

高效：框架、組件庫(kù)、Mock平臺(tái)，構(gòu)建部署工具等

抽象

頁(yè)面UI抽象：組件

通用邏輯抽象：領(lǐng)域?qū)嶓w、網(wǎng)絡(luò)請(qǐng)求、異常處理等

三、web前端架構(gòu)的原則

1. 體系設(shè)計(jì)

試想一下，如果一棟建筑沒(méi)有明確的構(gòu)造設(shè)計(jì)，所有的重要事項(xiàng)都由建筑工人直接決定，那么就可能會(huì)出現(xiàn)這樣的情景:一面墻用石頭壘，第二面墻用磚頭砌，第三面墻用木頭搭，第四面墻因?yàn)樽非髸r(shí)髦而留空。

雖然網(wǎng)站的整體外觀和風(fēng)格基調(diào)完全由經(jīng)驗(yàn)豐富的視覺(jué)設(shè)計(jì)師決定，但前端架構(gòu)師掌控 著背后的前端開(kāi)發(fā)方法和系統(tǒng)設(shè)計(jì)哲學(xué)。通過(guò)設(shè)計(jì)所有前端開(kāi)發(fā)人員都要遵循的系統(tǒng)規(guī)范，前端架構(gòu)師清晰描繪了產(chǎn)品和代碼的最終形態(tài)。

一旦前端架構(gòu)師建立起了系統(tǒng)設(shè)計(jì)的規(guī)范，項(xiàng)目就擁有了可以衡量代碼質(zhì)量的標(biāo)準(zhǔn)，否 則我們?nèi)绾闻袛啻a是否達(dá)標(biāo)呢？一個(gè)精心設(shè)計(jì)的系統(tǒng)，應(yīng)當(dāng)具備完善的檢驗(yàn)機(jī)制，并做出適當(dāng)?shù)娜∩?，以保證系統(tǒng)中的代碼有實(shí)質(zhì)的價(jià)值，而不是簡(jiǎn)單的堆砌。

2. 工作規(guī)劃

有了清晰的結(jié)構(gòu)設(shè)計(jì)之后，就需要制定開(kāi)發(fā)工作流了。開(kāi)發(fā)人員寫一行代碼并且提交到線上需要經(jīng)過(guò)什么步驟？舉一個(gè)最簡(jiǎn)單的例子，這個(gè)過(guò)程包括使用 FTP 登錄服務(wù)器，修改一個(gè)文件并保存。然而，對(duì)于大多數(shù)項(xiàng)目而言，完整的工作流可能會(huì)用到多種工具，如版本控制器、任務(wù)調(diào)度器、CSS 處理器、文檔工具、測(cè)試組件和服務(wù)器自動(dòng)化工具等。

前端架構(gòu)師的目標(biāo)是設(shè)計(jì)出能流暢運(yùn)轉(zhuǎn)的系統(tǒng)。這個(gè)系統(tǒng)不僅能高效快速地啟動(dòng)，還可以通過(guò)語(yǔ)言分析、測(cè)試用例、文檔記錄等方法持續(xù)地提供有效的反饋，并且大幅減少由于重復(fù)操作而產(chǎn)生的人為錯(cuò)誤。

3. 監(jiān)督跟進(jìn)

前端架構(gòu)設(shè)計(jì)絕不是一勞永逸的工作。沒(méi)有任何設(shè)計(jì)在一開(kāi)始就是完美的，也沒(méi)有任何計(jì)劃可以一步到位?？蛻艉烷_(kāi)發(fā)人員的需求會(huì)隨著時(shí)間改變。在某個(gè)階段運(yùn)行得很好的開(kāi)發(fā)流程，隨后也可能需要重新調(diào)整，以便提高效率、減少錯(cuò)誤。

前端架構(gòu)師的一個(gè)非常重要的能力，就是能夠持續(xù)地優(yōu)化工作流程。如今各種各樣的構(gòu) 建工具可以讓我們很方便地改變工作方式，并通知到每一位開(kāi)發(fā)人員。

有些人問(wèn)前端架構(gòu)師是否等同于管理角色，不再需要寫業(yè)務(wù)代碼。前端架構(gòu)師不僅要寫更多代碼，更要會(huì)用多種編程語(yǔ)言，還要使用大量的工具。代碼量并未減少，只是代碼的讀者發(fā)生了改變。前端開(kāi)發(fā)人員面向終端用戶寫代碼，而前端架構(gòu)師面向的則是團(tuán)隊(duì)里的開(kāi)發(fā)人員。

四、web前端架構(gòu)的核心

1. 代碼

歸根結(jié)底，所有的網(wǎng)站都是由一堆文本文件和資源文件組成HTML、CSS、JavaScript的。當(dāng)我們面對(duì)制作網(wǎng)站所產(chǎn)生的大量代碼時(shí)，就會(huì)發(fā)現(xiàn)為代碼和資源設(shè)定一個(gè)期望是多么重要。

2. 流程

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

3. 測(cè)試

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

4. 文檔

設(shè)計(jì)文檔是你同他人交流的工具，來(lái)闡述你的設(shè)計(jì)決策是什么，來(lái)闡明你的設(shè)計(jì)決策是什么以及為什么你的決策是好的。如果不是團(tuán)隊(duì)中的重要成員要離開(kāi)，幾乎都不會(huì)意識(shí)到文檔的重要性。

這四個(gè)核心是構(gòu)建可擴(kuò)展和可持續(xù)優(yōu)化的系統(tǒng)的基礎(chǔ)。

感謝各位的閱讀，以上就是“web前端架構(gòu)指的是什么”的內(nèi)容了，經(jīng)過(guò)本文的學(xué)習(xí)后，相信大家對(duì)web前端架構(gòu)指的是什么這一問(wèn)題有了更深刻的體會(huì)，具體使用情況還需要大家實(shí)踐驗(yàn)證。這里是億速云，小編將為大家推送更多相關(guān)知識(shí)點(diǎn)的文章，歡迎關(guān)注！