前端工程化總結

爲何會出現前端工程化這個概念？
當前端業務日益複雜化和多元化，就會出現許多問題。
好比說：
如何提升開發效率？
如何保證項目的可維護性？
如何提升項目的開發質量？
多人合做，架構分層，模塊設計，解耦，抽象，複用，mock，聯調，部署等等。。
這時候就出現了前端工程化的概念，從軟件工程的角度來解決問題。好比軟件工程中的分治和關注點分離思想。

前端工程化能夠分爲4個方面：規範化，自動化，模塊化，組件化
一：規範化
目錄結構，
js代碼風格強約束，eslint自動fix
css代碼風格（bem風格）
協做工具，開發工具等

二：自動化
自動圖標合併，涉及到css sprite，svg sprite，圖標字體
自動編寫可視化文檔，技術選型：postmark+jsdoc
自動化測試，技術選型：Karma + Mocha + Expect.js
自動化部署，技術選型：docker
自動化問題反饋

三：模塊化
這個es6規範已經出來了，想要了解查看阮老師的博客

四：組件化：
着重講一下組件化的概念和組件劃分
首先摘抄總結了大佬們對組件化的概念：
組件化是基於模塊化的，在設計層面上，對UI（用戶界面）的拆分。每一個包含模板(HTML)+樣式(CSS)+邏輯(JS)功能完備的結構單元，咱們稱之爲組件。組件化除了要處理組件這種自己的封裝，還要處理組件之間的邏輯(JS)繼承，樣式(CSS)擴展和模板(HTML)嵌套等關係。廣義的組件化包括對數據邏輯層業務梳理，造成不一樣層級的能力封裝。

本身對於組件化的通俗理解就是每一個應用界面均可以抽象成一個個獨立的，可複用的，自包含的，可複用的組件。組件化的本質目的並不必定是要爲了可複用，而是提高可維護性。

接下來談組件化的優勢，我以爲獨立這個詞能夠很好的歸納組價的優勢，當獨立了以後，組件之間能夠隔離，能夠很好的下降複雜度，隱藏性更好，妥妥的高內聚，低耦合。

後面來談下組件該如何劃分，組件劃分的粒度，數據和方法的歸屬。
在查了資料和看了大佬們的項目結構以後，發現他們一般會把組件分爲通用組件（木偶組件）和業務組件（智能組件）。
木偶組件應該是和業務無關的，是有簡單狀態或者無狀態的，數據幾乎所有依賴於輸入，它只負責渲染給入的數據。好比按鈕是一個組件，可能有一個參數決定了它的尺寸，一個參數決定了它是否能夠點擊，可是點擊這個按鈕以後會發生什麼，就不是按鈕這個組件須要知道的事情了。
智能組件能夠由多個木偶組件組成和其餘的智能組件組成，會擁有一些方法，用來修改持有的數據，對內來看，它本身持有一些數據和方法，用來決定內容的渲染，對外又是一個簡單的props接受數據。能夠理解爲組件樹的非葉子節點，經過自身數據變化，進而操縱子組件的內容。

前端工程化的思想就先歸納到這裏了~把大佬們的想法總結了一下，還有不少地方沒有理解到位，先記錄一下如今的感覺，後期有了新的認識再來補充或者修改。

參考文章：
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...