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

 

前言

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

 

有必要組件化嗎

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

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

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

模塊化大體有如下幾個優勢：

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

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

 

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

將拿到的設計圖按照不一樣的功能模塊劃分出不一樣的組件，組件之間能夠有嵌套或者並列關係。

組件不論大小，小到一個按鈕，大到一個頁面均可以當作一個個組件。不要以爲小東西就不必寫成組件，由於一個組件的功能越簡單，那麼使用它的時候也就越容易，並且可以使用到它的場景將越多。因此若是你寫出了一個功能十分全面且複雜的組件，不要高興，由於它也許只會被使用一次。這個時候就須要把功能複雜的組件拆分紅更小功能的組件，而這個功能複雜的組件將使用這些功能更小的組件去實現。

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

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

組件一但編寫完成而且被運用了無數次以後，請不要隨意去修改組件了，由於這樣會影響到全部使用了改組件的地方。除非需求變動，整個項目中的搜索框都須要改變樣式，這個時候就能夠發揮組件的威力了，修改一次組件便可。但修改時不要破壞組件的擴展性。

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

一個沒有擴展性的組件將會變得沒有意義，擴展性越強意味着該組件的使用概率越大，價值也就越大。仍是以搜索框爲例，咱們能夠把搜索框的搜索按鈕點擊事件暴露出來，而後在使用搜索組件的地方去實現這個點擊事件的邏輯。

這是react的官方教程文檔。你能夠從中獲得不少組件化開發的啓發。

 

在項目中使用組件

在團隊項目中，採用組件化開發請不要忽視文檔的重要性。若是你開發出了一個組件而沒有爲該組件配上使用說明文檔，那麼這個組件的價值將下降一半。由於使用者在使用它時必須查看組件的源代碼理清它的基本思路才能很好的使用，這樣跟他本身重寫一遍花費的時間和精力成本是至關的。即便是你本身使用，也許數月後你也會變得十分陌生。長此以往這個組件將失去它存在的意義。

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

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

 

寫在最後

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

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