引言 提到前端往往很多人的映像就是入門簡單，HTML、CSS加一起一個星期基本上就能大概上手，JS難一點但也能很快寫一些簡單的小效果，在網上隨便一搜索各種特效代碼隨意用，一個新手前端也能在很短的時間里寫出炫酷的頁面效果，然而入門簡單並不意味著前端這碗飯很好吃，做慣了切圖、佈局、扣特效的前端新同學在向 ...
引言
提到前端往往很多人的映像就是入門簡單，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：模塊化和組件化一個最直接的好處就是復用，同時我們也應該有一個理念，模塊化和組件化除了復用之外還有就是分治，我們能夠在不影響其他代碼的情況下按需修改某一獨立的模塊或是組件，因此很多地方我們及時沒有很強烈的復用需要也可以根據分治需求進行模塊化或組件化開發。
