參考理解一：
提到前端往往很多人的映像就是入門簡單,HTML、CSS加一起一個星期基本上就能大概上手,JS難一點但也能很快寫一些簡單的小效果,在網上隨便一搜索各種特效代碼隨意用,一個新手前端也能在很短的時間里寫出炫酷的頁面效果,然而入門簡單並不意味着前端這碗飯很好吃,做慣了切圖、布局、扣特效的前端新同學在向前發展的路上越來越覺得吃力,而沒有任何編程思想和軟件開發基礎很多人對前端工程化、組件化、模塊化、MVC這些“高大上”的詞匯雲里霧里。
本文用最簡單的語言介紹一下我對工程化、組件化、模塊化的理解,面向的對象是前端新手,所以我用最好理解的方式去說。
前端工程化
還記得我在最早期寫前端代碼時,往往一個頁面就是一個文件搞定,HTML/CSS/JS全部寫在一起,后來知道應該把結構、樣式和動作分離,我想這是我接觸到最早的前端工程化的思想了,所謂前端工程化我認為就是：
將前端項目當成一項系統工程進行分析、組織和構建從而達到項目結構清晰、分工明確、團隊配合默契、開發效率提高的目的
前面我說接觸最早的工程化思維就是“結構、樣式和動作分離”,在只有若干個頁面的小型項目我們只需要用這些簡單的做法就能把項目很好的組織起來,但是在一個大型web項目中往往有更加復雜的結構和非常多的頁面需要很多人甚至是多個團隊配合才能把項目做完,我們需要有更加嚴謹和復雜的工程化思維去組織結構。從更高層面的項目組織來看我們要做項目的各種規范、技術選型、項目構建優化等等,在代碼層面我們還需要用到JS/CSS模塊機、UI組件化等開發方式。
前端模塊化
前面我們提到在組織代碼的時候會用到模塊化和組件化,大家應該理解到,前端工程化是一個高層次的思想,而模塊化和組件化是為工程化思想下相對較具體的開發方式,因此可以簡單的認為模塊化和組件化是工程化的表現形式。
那具體什么是模塊化呢,還是舉簡單的例子,我們要寫一個實現A功能的JS代碼,這個功能在項目其他位置也需要用到,那么我們就可以把這個功能看成一個模塊采用一定的方式進行模塊化編寫,既能實現復用還可以分而治之,同理在寫樣式的時候,如果我們需要某種特殊的樣式,會在很多地方應用,那么我們也可以采用一定的方式進行CSS的模塊化,具體說來,JS模塊化方案很多有AMD/CommonJS/UMD/ES6 Module等,CSS模塊化開發大多是在less、sass、stylus等預處理器的import/mixin特性支持下實現的,具體技術大家自行學習。
總體而言,模塊化不難理解,重點是要學習相關的技術並且靈活運用。
前端組件化
前文中我們提到過,組件化也是工程化的表現形式,那么到底什么是前端組件化呢
頁面上的每個獨立的、可視/可交互區域視為一個組件;
每個組件對應一個工程目錄,組件所需的各種資源都在這個目錄下就近維護;
由於組件具有獨立性,因此組件與組件之間可以 自由組合;
頁面只不過是組件的容器,負責組合組件形成功能完整的界面;
當不需要某個組件,或者想要替換組件時,可以整個目錄刪除/替換。
組件化將頁面視為一個容器,頁面上各個獨立部分例如:頭部、導航、焦點圖、側邊欄、底部等視為獨立組件,不同的頁面根據內容的需要,去盛放相關組件即可組成完整的頁面。
PS:模塊化和組件化一個最直接的好處就是復用,同時我們也應該有一個理念,模塊化和組件化除了復用之外還有就是分治,我們能夠在不影響其他代碼的情況下按需修改某一獨立的模塊或是組件,因此很多地方我們及時沒有很強烈的復用需要也可以根據分治需求進行模塊化或組件化開發。
參考理解二：
工程化
前端工程化是為了讓前端可以自成體系，具體可以從四方面去討論，模塊化，組件化，規范化和自動化。
模塊化
將大的文件拆分成互相依賴的小文件，再進行統一的拼裝和加載。
js的模塊化： 利用webpack+babel的模式將所有模塊系統進行打包，同步加載，也可以搭乘多個chunk異步加載。利用瀏覽器的script標簽，type類型選modules類型即可。
css模塊化： 之前的sass less 等預處理器雖然實現了css的拆分，但是並沒有解決模塊化很重要的一個問題，即選擇器的全局污染問題。有三種解決辦法，第一種是利用webcomponents的技術實現，這個技術雖然解決了全局污染問題，但是由於兼容性問題，目前用的不多，第二種是css in js 將css的技術全部摒棄，利用js或者json格式去加載css，這種方式簡單粗暴，並且不容易處理偽類選擇器的問題，被大眾所認可的是第三種解決方案，即 css modules ，所有的css文件由js來管理，這種技術最大程度利用了css的生態和模塊化的原則，其中vue中的scoped 就是這種技術的提現。
資源的模塊化： webpack的成功不僅僅是因為將js系統進行模塊化處理，而是它的模塊化原理，即任何資源都可以模塊化且應該模塊化處理，優點有以下三點，1：目錄結構清晰化，2：資源處理集成化，3：項目依賴單一化。
組件化
是將UI頁面拆分成有模板+樣式+邏輯組成的功能單元，稱為組件，組件化不等於模塊化，模塊化是在資源和代碼方面對文件的拆分，而組件化是在UI層面進行的拆分。
傳統前端框架的思想是以dom優先，先操作dom，再寫出可復用的邏輯單元來操作dom，而組件化框架是組件優先，將dom和與之一起的邏輯組成一個組件，再進行引用。
我們封裝了組件后，還需要對組件間的關系進行判定，例如繼承，擴展，嵌套，包含等，這些關系統稱為依賴。
規范化
規范化是前端工程化很重要的一部分，項目前期規范制定的好壞，直接決定后期的開發質量，分為項目目錄規范化，編碼規范化，前后端接口規范化，git分支管理，commit描述規范，組件管理等編碼規范化分為html css js img 命名規范這幾類接口規范，目的是規則先行，以減少聯調中不必要的問題和麻煩，划分前端，渲染邏輯和交互邏輯，后台，處理業務邏輯，各種格式的規定，例如 json盡量簡潔輕量，日期盡量字符串，等等。
自動化
讓簡單重復的工作交給機器完成，例如自動化測試，自動化部署，自動化構建，持續繼承等。