前端工程化總結(jié)

tigerZH 發(fā)布于2019-08-20 17:19 / 625人閱讀

摘要：為什么會(huì)出現(xiàn)前端工程化這個(gè)概念當(dāng)前端業(yè)務(wù)日益復(fù)雜化和多元化，就會(huì)出現(xiàn)許多問題。這時(shí)候就出現(xiàn)了前端工程化的概念，從軟件工程的角度來解決問題。

為什么會(huì)出現(xiàn)前端工程化這個(gè)概念？
當(dāng)前端業(yè)務(wù)日益復(fù)雜化和多元化，就會(huì)出現(xiàn)許多問題。
比如說：
如何提高開發(fā)效率？
如何保證項(xiàng)目的可維護(hù)性？
如何提高項(xiàng)目的開發(fā)質(zhì)量？
多人合作，架構(gòu)分層，模塊設(shè)計(jì)，解耦，抽象，復(fù)用，mock，聯(lián)調(diào)，部署等等。。
這時(shí)候就出現(xiàn)了前端工程化的概念，從軟件工程的角度來解決問題。比如軟件工程中的分治和關(guān)注點(diǎn)分離思想。

前端工程化可以分為4個(gè)方面：規(guī)范化，自動(dòng)化，模塊化，組件化
一：規(guī)范化
目錄結(jié)構(gòu)，
js代碼風(fēng)格強(qiáng)約束，eslint自動(dòng)fix
css代碼風(fēng)格（bem風(fēng)格）
協(xié)作工具，開發(fā)工具等

二：自動(dòng)化
自動(dòng)圖標(biāo)合并，涉及到css sprite，svg sprite，圖標(biāo)字體
自動(dòng)編寫可視化文檔，技術(shù)選型：postmark+jsdoc
自動(dòng)化測(cè)試，技術(shù)選型：Karma + Mocha + Expect.js
自動(dòng)化部署，技術(shù)選型：docker
自動(dòng)化問題反饋

三：模塊化
這個(gè)es6規(guī)范已經(jīng)出來了，想要了解查看阮老師的博客

四：組件化：
著重講一下組件化的概念和組件劃分
首先摘抄總結(jié)了大佬們對(duì)組件化的概念：
組件化是基于模塊化的，在設(shè)計(jì)層面上，對(duì)UI（用戶界面）的拆分。每個(gè)包含模板(HTML)+樣式(CSS)+邏輯(JS)功能完備的結(jié)構(gòu)單元，我們稱之為組件。組件化除了要處理組件這種本身的封裝，還要處理組件之間的邏輯(JS)繼承，樣式(CSS)擴(kuò)展和模板(HTML)嵌套等關(guān)系。廣義的組件化包括對(duì)數(shù)據(jù)邏輯層業(yè)務(wù)梳理，形成不同層級(jí)的能力封裝。

自己對(duì)于組件化的通俗理解就是每個(gè)應(yīng)用界面都可以抽象成一個(gè)個(gè)獨(dú)立的，可復(fù)用的，自包含的，可復(fù)用的組件。組件化的本質(zhì)目的并不一定是要為了可復(fù)用，而是提升可維護(hù)性。

接下來談組件化的優(yōu)點(diǎn)，我覺得獨(dú)立這個(gè)詞可以很好的概括組價(jià)的優(yōu)點(diǎn)，當(dāng)獨(dú)立了之后，組件之間可以隔離，可以很好的降低復(fù)雜度，隱藏性更好，妥妥的高內(nèi)聚，低耦合。

后面來談下組件該如何劃分，組件劃分的粒度，數(shù)據(jù)和方法的歸屬。
在查了資料和看了大佬們的項(xiàng)目結(jié)構(gòu)之后，發(fā)現(xiàn)他們通常會(huì)把組件分為通用組件（木偶組件）和業(yè)務(wù)組件（智能組件）。
木偶組件應(yīng)該是和業(yè)務(wù)無關(guān)的，是有簡(jiǎn)單狀態(tài)或者無狀態(tài)的，數(shù)據(jù)幾乎全部依賴于輸入，它只負(fù)責(zé)渲染給入的數(shù)據(jù)。比如按鈕是一個(gè)組件，可能有一個(gè)參數(shù)決定了它的尺寸，一個(gè)參數(shù)決定了它是否可以點(diǎn)擊，但是點(diǎn)擊這個(gè)按鈕之后會(huì)發(fā)生什么，就不是按鈕這個(gè)組件需要知道的事情了。
智能組件可以由多個(gè)木偶組件組成和其他的智能組件組成，會(huì)擁有一些方法，用來修改持有的數(shù)據(jù)，對(duì)內(nèi)來看，它自己持有一些數(shù)據(jù)和方法，用來決定內(nèi)容的渲染，對(duì)外又是一個(gè)簡(jiǎn)單的props接受數(shù)據(jù)。可以理解為組件樹的非葉子節(jié)點(diǎn)，通過自身數(shù)據(jù)變化，進(jìn)而操縱子組件的內(nèi)容。

前端工程化的思想就先概括到這里了~把大佬們的想法總結(jié)了一下，還有很多地方?jīng)]有理解到位，先記錄一下現(xiàn)在的感受，后期有了新的認(rèn)識(shí)再來補(bǔ)充或者修改。

參考文章：
https://mp.weixin.qq.com/s?__...
https://lluvio.github.io/blog...
http://www.jointforce.com/jfp...
https://www.zhihu.com/questio...
http://www.jianshu.com/p/67a6...
https://cn.vuejs.org/v2/guide...