怎么理解組件化開發


組件化沒有官方嚴格的定義,以下是對網絡中一些說法的整理

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等,都是組件,共享統一的生命周期管理和對外接口,且都是聲明式地進行組合。


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM