前端組件化-高質高效協做利器

小編寄語

在這個「不出門就是給國家作貢獻」的日子裏，技術委員會提早祝你們元宵節快樂，祝咱們的生活像湯圓同樣甜蜜圓滿。也請夥伴們少出門，勤洗手，戴口罩，爲本身和家人的健康保駕護航，同心合力，共克時艱！咱們相信陽光會驅散陰霾，一切都會好起來的！

小編今天分享一篇由家長幫倪思遠老師帶來的技術好文《前端組件化-高質高效協做利器》，本文主要介紹了做者對於組件化的理解以及組內是如何實現組件化的，但願可以對你們有所啓發和幫助~

前言

項目開發過程當中，隨着業務的不斷迭代，很容易暴露如下問題：
一、代碼體積會不斷增長，代碼的冗餘會愈來愈大；
二、業務邏輯複雜度會不斷增長，邏輯的可拓展性、可維護性愈來愈脆弱；

問題的主要緣由在於：
一、功能代碼的複用方式是簡單粗暴拷貝和粘貼；
二、多人協做致使代碼耦合度高，後期維護拓展方式不合理；

針對以上問題，在前端項目工程化的基礎上，引入前端組件化，從功能模塊的複用、通訊，及多人協做的層面進行解耦。

預期效果：

1.經過組件化的編碼，實現功能的封裝和複用，減小冗餘

2.經過組件化的協做，實現功能和業務的解耦，高效協做

一.什麼是前端組件化？

前端組件化之前經歷的過程：面向過程–面向對象–面向模塊。

前端業務複雜度的不斷提高，傳統的以HTML+JQ爲主的面向過程的開發方式已經很難知足大型項目的迭代和維護。面向對象方式(繼承、封裝、多態、實例化構造)、藉助模塊化加載器(require、sea等)以及後來的工程化工具(wp、gulp等)實現的面向模塊的方式，都是爲了作封裝、配置、複用、業務解耦、協做解耦等提升質量和效率的優化，本文不作過多贅述。

前端的組件化，是指經過對項目進行自頂而下的拆分，對項目內(間)通用的、可複用的功能經過組件的形式和業務邏輯進行解耦，以實現代碼的高內聚、低耦合，實現功能模塊的可配置、可複用、可拓展，再由這些組件組合更復雜的組件/頁面，同時實現多人協做過程當中依賴解耦的一種項目設計和實施方式。

對比面向過程、面向對象、面向模塊，組件化(面向組件)在兼具了低耦合、高內聚、可配置、可複用、可拓展等優點外，給項目的實施提供了一種相似"搭積木"的方式，具備更高的靈活性，可拓展性和可維護性。

2、爲何實施前端組件化？

1.編碼層面提效

· 經過組件化的開發方式，實現功能模塊的封裝

· 經過組件的複用，減小代碼冗餘

· 經過組件化的開發方式，實現功能和業務邏輯的解耦

· 經過組件的拓展支持項目迭代，提升可拓展性、可維護性

2.協做層面提效

· 經過組件化的設計，自頂而下對項目進行拆分

· 從按頁面分工變爲按功能組件分工

· 經過組件的接口化、配置化實現功能和業務整合

3.符合主流框架設計初衷

Vue-組件化構建應用（Vue中萬物皆組件）

React-主要特性之一

3、何時實施前端組件化？

1.若是項目不是一次性開發，須要長期迭代維護：組件化能實現功能和業務邏輯的解耦，實現功能模塊的複用，已便於基於現有功能快速響應，經過拼接組合的方式快速實現迭代。

2.須要對項目包體積進行優化：組件化能很大程度提升代碼和功能模塊的複用性，減小代碼冗餘。

3.多人協做完成同一項目：組件化的項目拆分和分工，可以避免不一樣頁面相同/類似功能的開發成本、統一維護和拓展成本；同時還能將夥伴間的協做解耦，分工更清晰，代碼提交不易發生衝突。

4、如何實施前端組件化？

1.項目的組件化拆分

· 如何拆分？
須要總體把握項目需求，將通用性的功能進行抽離；或者從現有功能出發，按照功能進行組件拆分；或則從協做角度，從分工和配合層面進行組件拆分。
項目的拆分思路借鑑Vue官網的一個圖形象說明：

· 拆分的兩個維度
a.項目內可全局公用
基礎組件包括不限於（下拉，tap切換，彈窗，toast提示，loading，空頁面，頁面佈局）,可參考ElementUI、AntD組件庫的實現思路
b.項目內可複用
業務組件多次調用，即同頁面或多頁面都會用到的功能模塊（如內容發佈、評論等業務組件）

· 組件的分類和抽象程度
a.基礎組件(全局可用的底層組件)-最大程度通用化開發，通用化配置
b.通用組件(頁面級別的複用功能)–知足多場景複用業務
b.業務組件(無複用，爲方便協做)–組件化封裝抽離，可備後期拓展及複用

· 從協做的角度進行拆分
a.分模塊開發，避免多人重複工做
b.相同功能，統一維護
b.類似功能基於現有模塊快速拼裝

*· 舉個栗子：*

上圖是實際項目(已上線)中部分功能拆分的示例：需求：視頻詳情頁(左1)、圖文詳情頁(左2)、彈窗(左3)、彈層(左4，下)

拆分思路：視頻頁、圖文頁，除了頂部視頻和圖文展現不一樣，其餘功能相同，可按功能實現組件化拆分以實現頁面複用。

組件拆分：如圖右下角所示

組件的分類：
a.基礎組件-彈窗組件、登陸彈層
b.通用組件-評論組件、瀑布流
b.業務組件-視頻播放、圖片預覽

協做層面：
a.多人開發
b.先開發組件–並行開發
c.專人組合頁面邏輯–無提交代碼衝突
d.不一樣頁面複用–複用組件，無冗餘

Tips:可能有人會以爲的複用一個頁面是能夠的，不必作複雜的拆分。可是若是後期又有圖文混排頁、熱門討論頁…等跟這兩個頁面功能、結構都相似的頁面呢？實際狀況就是這樣的，經過現有功能組件，在開發n個頁面也是"搭積木"的思路。

2.組件設計

· 組件交互配合方式設計

a.溝通數據傳遞方式
b.溝通事件交互方式
c.溝通樣式適配方式

· 組件接口設計（前三個便可知足大多數場景）

a.用戶自定義類名（extraClass）
b.源數據（data）
c.交互事件（onTap)
d.鉤子函數（組件實例化、組件銷燬、onShow、onHide)
e.組件實例方法（hide、refresh）
f.通訊參數（全局狀態管理中依賴數據的key）

· 舉個栗子：

上圖是瀑布流組件開發前設計：

瀑布流組件主要被設計爲接受數據源、翻頁時增量數據(性能層面考慮)、item點擊上報。

這樣就實現了功能的封裝內聚，用戶使用時只須要作透明化配置便可，同時方便複用，後期如需拓展能夠參數的方式進行拓展支持。

3.組建的開發**

·核心：**

數據交互-數據綁定

事件交互-事件上報

·舉個栗子(Vue技術棧下)：

A.下拉組件的實現：

props：
a.list-下拉選項數組
b.def-默認選項
c.map-能夠配置list裏須要展現字段的key
event:
onItemTap:下拉項點擊回調
B.組件的複用

同一頁面的三個下拉，是同一組件的三個實例，互相獨立。
另外中部的tap切換和下面的列表都是組件，這樣整個頁面涉及的功能集成度都很高，複用性、統一拓展維護都很方便，這個頁面的搭建還很乾淨整潔。

5、組件化思想的延申

在Vue技術棧下，每一個.vue文件都是一個單文件組件。
本質上說，Vue中的頁面也是組件。也能夠說，頁面，也能夠用組件化的思路去構建或使用。

· 舉個栗子：

feed-home/index.vue 是一個頁面，出於分包需求，須要在主包和子包都有一個該頁面，簡單操做，能夠直接複製一個。前期簡單了，後期的維護就不簡單了！因此從單文件組件的本質出發，取巧，經過組件引入的方式在子包引用了主包的一個實例。項目實測能夠知足。

結語

在中大型的、多人協做的項目中，經過組件化的方式進行項目的拆解、設計、開發，經過組件化的方式進行分工協做，可以極大的減小代碼冗餘，下降不一樣模塊的耦合度，同時也實現開發協做層面的解耦。

組件化的落地不是一蹴而就的，須要不斷的磨合配合，須要創建一致的認知和協做方式。
另外，在統一的技術規範和技術棧體系下，跨項目間也是能夠經過npm私有源或git-submodule來實現組件化複用的，固然受業務的限制，目前這個還有些難度，這個也是咱們正在努力的方向。