組件化沒有官方嚴格的定義,以下是對網絡中一些說法的整理
1. 對組件的理解
原文http://www.cnblogs.com/yexiaochai/p/5228871.html
a) UI組件
項目各個頁面中,會產生很多重復的功能,比如彈出層提示框,像這種純粹非業務的UI,便成了我們所謂的UI組件,最初的前端組件也就僅僅指的是UI組件。
b) 業務組件
而由於移動端的興起,前端頁面的邏輯已經變得很重了,一個頁面的代碼超過5000行的場景漸漸增多,這個時候頁面的維護便會很有問題,牽一發而動全身的事情會經常發生,為了解決這個問題,便出現了前端組件化,這個組件化就不是UI組件了,而是包含具體業務的業務組件。
c) 組件化思想--分而治之
這種開發的思想其實也就是分而治之(最重要的架構思想),頁面邏輯過於復雜,便將頁面分為很多個業務組件模塊分而治之,這樣的話維護人員每次只需要改動對應的模塊即可,以達到最大程度的降低開發難度與維護成本的效果,所以現在比較好的框架都會對組件化作一定程度的實現。
d) 數據
組件一般是與展示相關,視覺變更與交互優化是一個產品最容易產生的迭代,所以多數組件相關的框架核心都是View層的實現,比如Vue與React的就認為自己僅僅是“View”,雖然展示與交互不斷的在改變,但是底層展示的數據卻不常變化,而View是表象,數據是根本,所以如何能更好的將數據展示到View也是各個組件需要考慮的,從而衍生出了單向數據綁定與雙向數據綁定等概念,組件與組件之間的通信往往也是數據為橋梁。
e) 復雜業務是關鍵
所以如果沒有復雜的業務邏輯的話,根本不能體現出組件化編程解決的痛點
2. 組件化定義
作者:張立理
鏈接:https://www.zhihu.com/question/29735633/answer/90872147
我將“組件化”理解為以下幾要素:
a) 組件是對邏輯的封裝,不限於圖形元素。
即我們可以把if做成組件、把一個倒計時做成組件、把一段動畫做成組件、把路由做成組件、把數據架構做成組件,而這些並不能稱為控件
b) 組件具備單個可移植性
即“隨加載隨用”,不需要為其准備復雜的基礎條件(如引入樣式、引入框架等)。然而這一點現有那些所謂組件庫做得並不好,技術上也不大現實
c) 組件是聲明式定義的,而非命令式。
這個不想多說,很大程度上是自己主觀的一個想法而上面最重要的就是第一點,所以要問我什么是“組件化開發”,我的說法是:把圖形、非圖形的各種邏輯均抽象為一個統一的概念(組件)來實現開發的模式。
這與傳統開發框架的最大區別就是統一了圖形元素與非圖形元素,除此之外我再想不出其它真正體現區別的點了在這個概念下,包括router、ajax、module loader、timer、animation、interval等,都是組件,共享統一的生命周期管理和對外接口,且都是聲明式地進行組合。
