前端組件化演進之路

DC_er 發布于2019-05-23 17:32 / 631人閱讀

摘要：在一開始編寫代碼的時候還沒有組件這一說，慢慢地我們從開始編寫面向過程的代碼到面向對象的代碼再到組件化的代碼，一步步進化到組件。將頁面上的兩個部分拆成兩個對象，那其實這兩個對象就是兩個組件。

組件

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

面向過程

以一個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函數，其實在寫組件的都是要去繼承類并且去實現類里的方法，就是在寫面向對象的代碼。

云服務器 GPU云服務器前端組件前端組件維護通用前端組件前端組件開發

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/7359.html

新風向！成就了Android，熱門框架排第一，你還是不夠了解它！

摘要：由于長期苦惱于第三方庫選擇的廣大開發者而言，這也是谷歌為我們提供的一盞明燈。手機淘寶構架演化實踐淘寶相信都不陌生了從年開始，從萬增長到超過億，面臨的問題包括研發支撐所需要解決的事情各不相同。 ...

sixgo 2021-09-10 10:51 評論0 收藏0
2017年TOP100summit15位大咖擔任聯席主席甄選最值得學習的100個研發案例

摘要：以下將分別從五大技術專場維度介紹本屆峰會的部分聯席主席與精選案例。天時間集中分享年最值得學習的個研發案例實踐。從萬維網到物聯網，從信息傳播到人工智能，20年間軟件研發行業趨勢發生了翻天覆地的變化。大數據、云計算、AI等新興領域逐漸改變我們的生活方式，Devops、容器、深度學習、敏捷等技術方式和工作理念對軟件研發從業者提出更高要求。由麥思博（msup）有限公司主辦的第六屆全球軟件案...

andot 2019-06-26 18:17 評論0 收藏0
精華閱讀第 9 期 |滴滴出行 iOS 客戶端架構演進之路

摘要：架構都是演變出來的，沒有最好的架構，只有最合適的架構最近，滴滴出行平臺產品中心技術負責人李賢輝接受了的采訪，闡述了滴滴的客戶端架構模式與演變過程。李賢輝也是移動開發精英俱樂部中的一員，所以本期重點推薦了這篇文章。「架構都是演變出來的，沒有最好的架構，只有最合適的架構！」最近，滴滴出行平臺產品中心 iOS 技術負責人李賢輝接受了 infoQ 的采訪，闡述了滴滴的 iOS 客戶端架構模式...

Eirunye 2019-06-24 17:49 評論0 收藏0