前端工程化、模塊化、組件化看法

前端每每不少人的映像就是入門簡單,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:模塊化和組件化一個最直接的好處就是複用,同時咱們也應該有一個理念,模塊化和組件化除了複用以外還有就是分治,咱們可以在不影響其餘代碼的狀況下按需修改某一獨立的模塊或是組件,所以不少地方咱們及時沒有很強烈的複用須要也能夠根據分治需求進行模塊化或組件化開發。