前端組件化演進之路

NO IMAGE

組件

前端組件化演進之路

在一個頁面中我們可以把頁面的一部分拆成一個組件,可以是一個按鈕或者是一個導航欄。在一開始編寫代碼的時候還沒有組件這一說,慢慢地我們從開始編寫面向過程的代碼到面向對象的代碼再到組件化的代碼,一步步進化到組件。

面向過程

以一個Todo List為例:

前端組件化演進之路

代碼示例:

前端組件化演進之路

這是一開始實現的jquery代碼,將button和li的click事件的回調函數抽出來單獨成為一個函數。當頁面的代碼量增長為上千行時,代碼的維護性會很差,需要先理解上千行代碼才敢繼續增加代碼。這時候可以用面向對象的編程方式來解決這個問題。

面向對象

將input和button拆成todoList對象,ul為todoItem對象;
html頁面裡面使用todoList對象:

前端組件化演進之路

todoList對象:

前端組件化演進之路

todoItem對象:

前端組件化演進之路

每個對象只管理自己的屬性和方法,只做自己這個對象的dom渲染和綁定事件;各個對象之間不會互相影響,大大降低了耦合性。將頁面上的兩個部分拆成兩個對象,那其實這兩個對象就是兩個組件。在對象的代碼中有dom展示、有js邏輯代碼,還可以在其中加入css樣式,這就相當於事一個組件了。

jQuery實現組件化編程

在jquery類上擴展一個繼承方法:

前端組件化演進之路

有一個組件類Component為父類,這個父類有init、render、bind的空方法:

前端組件化演進之路

緊接著在todoList和todoItem裡去繼承Component並且去覆蓋父類裡的render和bind方法,在子類的構造函數裡去調用父類的構造函數。

前端組件化演進之路

前端組件化演進之路

React組件

前端組件化演進之路

從React官網上的截圖我們可以看到代碼中也有繼承,也有render函數,其實在寫組件的都是要去繼承類並且去實現類裡的方法,就是在寫面向對象的代碼。

相關文章

Androidsocket高級用法(自定義協議和ProtocolBuffer使用)

Android獲取驗證碼自動填充

win7下基於nginx和ffmpeg的rtmp流媒體服務器搭建

Git用法初探