前言：在web前端業(yè)務(wù)日益復(fù)雜化和多元化的情況下，前端的工作已經(jīng)不在是寫幾個(gè)頁面和寫幾個(gè)互動(dòng)效果就能完成的工作了。當(dāng)工程復(fù)雜到一定程度就會(huì)產(chǎn)生很多問題，比如項(xiàng)目的可維護(hù)性，如何提高開發(fā)效率和開發(fā)質(zhì)量，如何進(jìn)行多人協(xié)作，降低生產(chǎn)的風(fēng)險(xiǎn)？下面我們了解的前端工程化就可以幫我們解決這些問題。
什么是前端工程化
前端工程化是使用軟件工程的技術(shù)和方法來進(jìn)行前端的開發(fā)流程、技術(shù)、工具、經(jīng)驗(yàn)等規(guī)范化、標(biāo)準(zhǔn)化，其主要目的是為了提高效率和降低成本，即提高開發(fā)過程中的開發(fā)效率，減少不必要的重復(fù)時(shí)間。
前端工程化如何做？
個(gè)人認(rèn)為從模塊化，組件化，規(guī)范化，自動(dòng)化四個(gè)方面思考
模塊化
-
js的模塊化
在ES6之前，一直沒有模塊系統(tǒng)，現(xiàn)在ES6已經(jīng)在語言層面上規(guī)定了模塊系統(tǒng)。
js的模塊化主要有CommonJS規(guī)范，AMD規(guī)范，CMD規(guī)范，ES6模塊化。這里主要使用的是ES6模塊化，其他的規(guī)范感興趣的話可以去做一些了解。去了解
在ES6中，我們可以使用 import 關(guān)鍵字引入模塊，通過 exprot 關(guān)鍵字導(dǎo)出模塊 -
css的模塊化
雖然SASS、LESS、Stylus等預(yù)處理器實(shí)現(xiàn)了CSS的文件拆分，但沒有解決CSS模塊化的一個(gè)重要問題：選擇器的全局污染問題。
這時(shí)就需要CSS Modules來解決，它仍然使用css，只是讓JS來管理依賴。它能夠最大化地結(jié)合CSS生態(tài)和JS模塊化能力，目前來看是最好的解決方案。
-
資源的模塊化
webpack的強(qiáng)大之處不僅僅在于它統(tǒng)一了JS的各種模塊系統(tǒng)，更重要的是它的萬能模塊加載理念?？梢杂胠oader對各種資源做各種事情，即所有的資源都可以且應(yīng)該模塊化。（即HTML資源，css資源，js資源，圖片資源，字體資源等）
組件化
即從UI拆分下來的每個(gè)包含html+css+js功能完備的結(jié)構(gòu)單元，我們稱之為組件。
組件化更是一種分治思想，即頁面上所有的東西都是組件，頁面是個(gè)大型組件，里面拆分成若干個(gè)中型組件，然后可以再拆，拆成若干個(gè)小型組件。當(dāng)然小型組件也可以在拆，直到拆成DOM元素為止，不過沒有必要，組件化主要是為了實(shí)現(xiàn)組件在多個(gè)頁面的復(fù)用。
比如你的頁面中有一個(gè)導(dǎo)航條或者輪播圖的功能，那你可以把它設(shè)計(jì)為組件，在多個(gè)頁面中使用這個(gè)組件，當(dāng)需求變動(dòng)的時(shí)候只需要改這個(gè)組件里面的東西就可以了。
目前市面上的組件化框架很多，主要有Vue、React、Angular。
規(guī)范化
規(guī)范化是工程化中很重要的一個(gè)部分，項(xiàng)目初期規(guī)范制定的好壞會(huì)直接影響到后期的開發(fā)質(zhì)量和維護(hù)成本。比如
-
目錄結(jié)構(gòu)的制定
目錄結(jié)構(gòu)的合理制定，可以為項(xiàng)目帶來很多優(yōu)點(diǎn)：
- 有助于提高項(xiàng)目的邏輯結(jié)構(gòu)合理性；
- 對應(yīng)擴(kuò)展和合作；
- 方便資源的統(tǒng)一定位管理；
-
編碼規(guī)范
制作一套良好的編碼規(guī)范可以增強(qiáng)團(tuán)隊(duì)開發(fā)協(xié)作、提高代碼質(zhì)量。推薦參考凹凸實(shí)驗(yàn)室打造的前端代碼規(guī)范。
編碼規(guī)范包括：HTML規(guī)范、CSS規(guī)范、JS規(guī)范、圖片規(guī)范、命名規(guī)范
-
前后端接口規(guī)范
在平常的開發(fā)中，前后端的關(guān)鍵協(xié)作點(diǎn)是ajax接口，這就引發(fā)一個(gè)問題，在沒有任何接口約定規(guī)范情況下各自擼起柚子就是干，導(dǎo)致我們在開發(fā)過程中前后端接口聯(lián)調(diào)對接工作占比非常高。
而接口規(guī)范主要初衷就是規(guī)范約定先行，盡量避免溝通中產(chǎn)生的不必要問題，讓大家更愉快的專注于各自擅長的領(lǐng)域。
職責(zé)分離：后端就提供數(shù)據(jù)，處理業(yè)務(wù)邏輯。前端就接收數(shù)據(jù)，返回?cái)?shù)據(jù)，處理渲染邏輯。
-
規(guī)范原則
- 接口返回?cái)?shù)據(jù)顯示，前端做渲染邏輯處理；
- 渲染邏輯禁止多個(gè)接口調(diào)用；
- 前端關(guān)注交互、渲染邏輯，盡量避免業(yè)務(wù)邏輯處理的出現(xiàn)；
- 請求響應(yīng)傳輸數(shù)據(jù)格式：JSON，JSON數(shù)據(jù)盡量簡單輕量，避免多級JSON的出現(xiàn)；
-
響應(yīng)格式
響應(yīng)基本格式及處理狀態(tài)值的規(guī)范。
-
特殊內(nèi)容
下拉框、復(fù)選框、單選框統(tǒng)一由后端邏輯判定選中返回給前端展示；
關(guān)于Boolean類型，JSON數(shù)據(jù)傳輸中一律使用1/0來標(biāo)示，1為是/True，0為否/False
關(guān)于日期類型，JSON數(shù)據(jù)傳輸中一律使用字符串，具體日期格式因業(yè)務(wù)而定；
文檔規(guī)范
組件管理
git分支管理
commit描述規(guī)范
視覺圖標(biāo)規(guī)范
...
自動(dòng)化
前端工程化的很多臟活累活都應(yīng)該交給自動(dòng)化工具來完成。秉承的理念就是：任何簡單機(jī)械的重復(fù)勞動(dòng)都應(yīng)該讓機(jī)器去完成。
- 圖標(biāo)合并
- 持續(xù)集成
- 自動(dòng)化構(gòu)建
- 自動(dòng)化部署
- 自動(dòng)化測試
