iT邦幫忙

2021 iThome 鐵人賽

DAY 3
1
Modern Web

關於 UI 元件你所該知道的事系列 第 3

Day 03 - 行前說明 — 在 MVC & MVVM 的 UI 元件

https://ithelp.ithome.com.tw/upload/images/20210918/201207543juVt1ajSK.png

相信網路上其實已經有不少文章在談架構了,我的資歷也尚淺,今天雖然會介紹架構,但是主要會側重的點會是在 UI 元件在這樣的架構中的角色定位,我們可以如何去思考,提供大家一些 mindset!

那所謂軟體架構到底是指什麼呢?簡單來說其實就是幫你的 Code 做分類,各個檔案執掌什麼功能,該怎麼去切分檔案、彼此之間該如何互動等等,藉由提出這樣的架構,讓我們在軟體開發的過程中可以少走很多冤枉路,不論是團隊合作、日後維護還是新功能的開發都能方便許多,同時也能減少理解專案時的認知負擔。

更技術一點來講,就是將程式碼區分出不同層級,並規範彼此之間的互動流程,來達到「高內聚、低耦合」的效果。

用專有名詞來解釋的話,是在實現 「關注點分離 (separation of concerns, SOC) 」的設計原則,把整個網頁應用程式分成不同的層級,各個層級有自己的關注點,只要把自己關注的東西做好就好。

接下來就進入正題啦,我今天會介紹的是 MVC 跟 MVVM 這兩種設計架構,而我自己則是使用後者。

MVC ( Modal-View-Controller )

https://ithelp.ithome.com.tw/upload/images/20210918/20120754jkOzDG2R3G.png

在 MVC 架構之中,把我們的程式碼依照其功能區分成三個角色

  1. Modal 資料層
    • 管理資料來源,作為當前應用程式跟資料庫溝通的橋樑
    • 資料的處理方式也是在遵循「商業邏輯」,因此這層也可以說是「邏輯層」
    • 如:不同的使用者登入後能看到的頁面不一樣 的功能就會放在這實作
    • 其餘還有 Global State、Data Stream 也是在 Modal 的範疇
  2. View 視覺層
    • 呈現 純粹的畫面 ( UI ) ,這層不會有任何邏輯
    • 如:Button 的 UI
  3. Controller 控制層
    • 處理 View 與 Modal ( Data ) 的溝通 和 View 本身的 Event
    • 如:Button onClick

舉例來說,假設你現在在填一份表單,表單當中有送出的按鈕。

按照 MVC 架構來看,這個按鈕就是 View ,而你點擊按鈕的的這個事件會透過 Controller 來定義,並更新頁面的狀態(跳轉到首頁或是清空表單等等),同時也會送出這份表單(通知 Modal 更新資料)。

雖然把 Data 跟 UI 拆開並定義溝通方式後架構會清楚很多,但 MVC 比較為人詬病的地方在於 Controller 要處理的事情太多了,像是 事件綁定、動畫、畫面顯示隱藏 和 拉 API 等等,因此會變得非常肥,最後很難管理。

MVVM ( Model-View-View Controller )

https://ithelp.ithome.com.tw/upload/images/20210918/20120754rWvPWnJT6d.png

在 MVVM 架構之中,Modal 和 View 保持原樣,但將 Controller 拆成 View Controller 和 View Modal 兩個角色。

  1. Modal
    • 與 MVC 的 Modal 一樣,這裡不贅述。
  2. View
    • 與 MVC 不一樣,除了單純畫面、也有處理 View 本身的 Event(也就是因應 ViewModal 對 View 的行為做處理,如圖所示)
    • 如:Button + onClick 和 其他事件
  3. ViewModal
    • 接收 View 的指令並對 Model 請求資料,取得的資料供 View 使用
    • 舉例來說, 表單的送出按鈕就是 View Modal ,他會送出資料給 Modal ,送出時也會去改變 本身 Button 的狀態( Normal → Loading )

大致介紹完 MVC 和 MVVM 之後,我們來看看 UI 元件在各自的定位:

  1. 就 MVC 來說,一個健全的 UI 元件會是 View 跟 ViewModal 的部分功能的合併,因為 View 只包含畫面,還需要加上一些事件處理跟邏輯才能成為一個好用的 UI Component。
  2. 就 MVVM 來說,UI 元件就是 View ,包含了畫面和基本元件上所該有的功能,因此很適合前端框架的實作模式,近年來也是在前端開發當中是非常熱門的選項。

最後來分享一下我自己學習軟體架構的三個階段:

  1. 初次見面
    • 什麼都不懂,先理解專有名詞、各個角色和互動關係
    • 在這階段也可以多去看看大家怎麼用
  2. 舉一反三才是真的會
    • 好像懂了一些什麼,應用到專案上看看,讓自己熟練地這個架構
    • 好好處理在實務上遇到的各種例外跟意外就是走得更深的關鍵
  3. 內化跟取捨
    • 盡信書不如無書,理解各家理論的優劣後,靈活地在各種架構中游走,懂得如何使用最適合當前情境的作法
    • 必要時,也能在理解架構的前提下破壞架構!

小結

今天雖然介紹了兩大軟體架構模式,但其實實作方式還是因人而異,對各個角色的定義彼此也會有些微的不同,實務應用上還是會有很多種情境,或是單純就團隊習慣怎麼去變化這些基本觀念而有不同的架構方式,切勿迷失在一些專有名詞之中,架構被創造出來不是要讓事情變複雜的!

對較大維度的軟體架構有個概念之後,明天要介紹的是僅佔軟體系統中的一部分的元件,談談前端的元件化開發、它的一些技術脈絡和重要性,最後再提一下元件的開發流程。

Referecnes

(因為真的講得很淺,大家想深入推薦底下幾篇文章可以去看)


上一篇
Day 02 - 行前說明 — 網頁微切版架構 和 UI 元件
下一篇
Day 04 - 行前說明 — 談談元件化開發與開發流程
系列文
關於 UI 元件你所該知道的事30

尚未有邦友留言

立即登入留言