前言

在如今mvvm框架大行其道的時代，頁面組件化開發已經是每位前端開發人員必備的基本素養。事實上不僅僅是web前端領域，甚至是安卓客戶端開發也使用上了mvvm的思想理念。那麽怎樣去以組件化的方式去思考問題呢？在小程序中怎樣使用組件才是最佳的姿勢呢？

有必要組件化嗎

按照JQuery時代的方式，將設計圖從上到下一股腦兒用html+css代碼去實現，並且把這些代碼全塞進一個html文件中不是很好嗎？確實，這樣的代碼“寫時一時爽，維護兩行淚。”

當需求變更時，我們不得不滿頁面的找相關代碼然後去修改。更無奈的是所有的不同模塊的js部分也都耦合到一個js文件中，修改起來十分吃力。

為了編寫高內聚低耦合的高可維護性的代碼，模塊化是有效且可行的。模塊化的思想已經滲透了整個計算機科學領域，無論是操作系統還是大型應用軟件。

模塊化大致有以下幾個優點：

• 易擴展性：擴展只需要添加新的模塊或者是修改某個已有的模塊。
• 高內聚：相關性強的代碼被劃分到一個模塊，大大提高代碼的內聚性。
• bug易於排查：在出現bug時我們只需要根據bug的表象卻推斷可能是哪個模塊出現問題，鎖定模塊後在模塊中找出問題根源，而不需要在整個系統中找一個很小的bug。
• 便於分工協作：軟件工程就如同蓋樓房，考驗的是分工協作。模塊化可以將一個模塊分配給一個人或一個小團隊負責。模塊之間可以同時開發而且互不影響。

組件化開發就是前端中很好的模塊化思想的體現。

怎樣將組件化思想貫徹下去

將拿到的設計圖按照不同的功能模塊劃分出不同的組件，組件之間可以有嵌套或者並列關系。

組件不論大小，小到一個按鈕，大到一個頁面都可以看成一個個組件。不要覺得小東西就沒必要寫成組件，因為一個組件的功能越簡單，那麽使用它的時候也就越容易，而且能夠使用到它的場景將越多。所以如果你寫出了一個功能十分全面且復雜的組件，不要高興，因為它也許只會被使用一次。這個時候就需要把功能復雜的組件拆分成更小功能的組件，而這個功能復雜的組件將使用這些功能更小的組件去實現。

組件中不要包含業務邏輯代碼。

例如：你想實現一個搜索框組件，用戶輸入關鍵字點擊搜索就可以搜索到結果。這個時候你可能順其自然的把通過關鍵字調用接口然後從接口中拿到搜索結果的邏輯代碼也寫到組件中了。除非在這個項目中所有的搜索框都會調用這個接口並且你不打算把這個組件運用到其它項目中。否則這部分邏輯代碼不應該寫到組件中。

組件一但編寫完成並且被運用了無數次之後，請不要隨意去修改組件了，因為這樣會影響到所有使用了改組件的地方。除非需求變更，整個項目中的搜索框都需要改變樣式，這個時候就可以發揮組件的威力了，修改一次組件即可。但修改時不要破壞組件的擴展性。

在編寫組件是需要充分考慮擴展性，把動態屬性暴露出去。

一個沒有擴展性的組件將會變得沒有意義，擴展性越強意味著該組件的使用幾率越大，價值也就越大。還是以搜索框為例，我們可以把搜索框的搜索按鈕點擊事件暴露出來，然後在使用搜索組件的地方去實現這個點擊事件的邏輯。

這是react的官方教程文檔。你可以從中得到很多組件化開發的啟發。

在項目中使用組件

在團隊項目中，采用組件化開發請不要忽視文檔的重要性。如果你開發出了一個組件而沒有為該組件配上使用說明文檔，那麽這個組件的價值將降低一半。因為使用者在使用它時必須查看組件的源代碼理清它的基本思路才能很好的使用，這樣跟他自己重寫一遍花費的時間和精力成本是相當的。即使是你自己使用，也許數月後你也會變得十分陌生。久而久之這個組件將失去它存在的意義。

請像後臺開發人員對待api文檔一樣對待組件說明文檔。

小程序的詳細組件開發教程請查看我的這篇博客

寫在最後

　　最後推薦一個小程序UI組件庫，希望能找到對你有用的組件。

掃描小程序碼，可查看效果。

小程序組件化開發，編寫高可維護性的代碼