极速快3精准计划|极速快3有规律吗
用戶
 找回密碼
 立即注冊

QQ登錄

只需一步,快速開始

掃一掃,登錄網站

小程序社區 首頁 教程 實戰教程 查看內容

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

Rolan 2019-4-16 00:30

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

 

前言

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

 

有必要組件化嗎

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

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

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

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

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

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

 

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

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

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

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

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

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

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

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

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

 

在項目中使用組件

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

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

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

鮮花
鮮花
雞蛋
雞蛋
分享至 : QQ空間
收藏
原作者: code_xia 來自: 掘金

提示:本頁有 1 個評論因未通過審核而被隱藏

极速快3精准计划 摇骰子猜单双有技巧吗 比分网即时比分 北京单场单双玩法介绍 时时走势图分析技巧 世界杯冠亚军投注 福彩3d投注金额计算表 重庆时时彩稳赚技巧 快三大小规律破解图 北京pk10走势图怎么分析 北斗彩票是真的吗