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

本教程操作環(huán)境：windows7系統(tǒng)、Dell G3電腦。

在Web前端技術(shù)變化日新月異的今天，Web前端項(xiàng)目變的越來越復(fù)雜。前端架構(gòu)也會(huì)隨著我們現(xiàn)在千變?nèi)f化的迭代需求，架構(gòu)技術(shù)的演化，不僅是架構(gòu)師也是我們每個(gè)開發(fā)人員都必須去關(guān)注的問題。

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

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

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

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

前端架構(gòu)如同建筑設(shè)計(jì)，在建設(shè)過程中，建筑設(shè)計(jì)師需要設(shè)計(jì)和規(guī)劃方案，并且跟進(jìn)施工過程。這與前端架構(gòu)師的工作有著異曲同工之妙，不同的是后者建造的是網(wǎng)站，而不是建筑物。比起澆筑混凝土，建筑設(shè)計(jì)師會(huì)在設(shè)計(jì)工程構(gòu)圖的工作上傾注