iOS開發之MVC設計模式

威爾哥(Will, Tsai)
蔡胖想學做生意
9 min readAug 4, 2018

諸君!

好久不見!

沒錯,我就是

人帥心善打字快, 寫code debug樣樣來 的 威爾哥!

歡迎來到威爾哥的iOS小教室。

首先恭喜各位同好,點進這篇文章。

在這邊,威爾哥忍不住要跟大家說聲,幹得好。

請按下文章左邊的拍手來給自己一點掌聲,謝謝。(咦?)

好,那麼廢話不多説(哇靠,都說完了才在那邊不多說)。

今天的主題是 學習iOS必須要了解的一個名詞 — MVC 設計模式。

恩?MVC是什麼?Hen重要嗎?

當然重要,相信哥,哥不會騙人的。(拍胸脯)

了解了MVC之後,相信學起iOS開發保證是一帆風順,日行千里啊!!!

可以寫得這麼快喔!!

整篇文章將分為以下幾個部分,

  1. 什麼是MVC?
  2. 為什麼要採用MVC?
  3. MVC是怎麼運作的呢?
  4. 在實務上要怎麼操作呢?

好,那大家該上廁所的上廁所,要投飲料的去投飲料。

接下來我們就要開始今天的主題囉!

MVC示意圖 來源:蘋果官方文件

1.什麼是MVC?

首先,MVC是一個『經典的設計模式』,其目的是用來解決當程式碼過於龐大時所帶來的問題。

在MVC設計模式中,整份程式碼依照其功能被分為三大類,

  1. M (Model) :負責操作資料的程式碼都屬於這一塊,例如新增,修改,更新,刪除資料,或者是從伺服器上抓取資料等等,只要是跟資料相關的功能都屬於這個區塊。
  2. V (View) :負責畫面的呈現,例如在畫面上呈現一張圖片,一個按鈕,或者播放一段動畫等等,只要是關於畫面的呈現都可以歸類到這一類。
  3. C (Controller) :Controller在iOS裡面被翻譯為視圖控制器,主要任務就是提供各式各樣的邏輯來操作畫面與更新資料。

將程式碼依照功能切開以後,如果資料處理的邏輯或者需求有變化,那麼開發人員就可以在不改動C與V的情況之下修改資料的部分。又或者是畫面要改變,資料要改變,但是程式邏輯不改變。這樣只要修改 View 以及 Model 就可以。

是不是很簡單呢?就是這麼簡單。

小結:
MVC是一個『經典的設計模式』,其目的是用來解決當程式碼過於龐大時所帶來的問題。

2.為什麼要採用MVC?

在上一個段落我們提到過,MVC的誕生是為了解決軟體規模變大之後,所帶來的問題。

這些問題分別是…

a.不同功能的程式碼混在一起,導致複雜度上升,不易維護。

b.程式失去彈性,修改不易。

c.團隊成員分工不容易,導致效率下降。

為什麼會有這些問題呢?

因為原本的程式碼沒有依照其功能分開之前,所有程式碼都混在一起

因為程式碼都混在一起,開發人員非常難理解這份程式碼到底在幹什麼東西。因為看不懂,所以就要花許多時間去讀懂。

因為程式碼都混在一起,所以改動其中一個地方,可能會在不知不覺中也順便改了其他不應該改動的地方,導致Bug出現。

因為程式碼都混在一起,沒辦法輕易的將一個任務拆解成不同小任務交給很多人同時進行修改,因為大家都要改同一份程式。

那麼反過來說,如果是採用MVC架構所開發的軟體,因為將整份程式碼依照其功能分成了三大塊,所以就會有下面幾個優點!

a.程式碼依照功能區分開來,容易閱讀,複雜度下降,好維護。

b.程式碼功能明確,不怕改到不該改的地方。容易修改與擴充。

c.團隊成員分工容易,一個任務可以分給許多人一起進行,效率大增,加班時數大幅下降,生活品質瘋狂上升。

各位同學看到這邊,是不是也跟威爾哥一樣,內心激動阿!!

還是說其實大家跟阿嬤一樣…

就真的沒感覺咩

好吧,如果以更直白的話講就是,

我,小明跟小華是同一個組的。以前公司沒採用MVC架構時,如果下班前,老闆突然跑過來說,ㄟㄟ,那個客戶說,這個畫面要改動一下,那麼整組三個人都要留下來加班。

但是採用MVC之後,因為程式碼分為三個部分,所以如果畫面要改變,那就負責畫面的人加班就好,其他人一樣時間到準時拍拍屁股走人。

所以說,MVC是不很棒啊!

真的好棒棒!
小結:
MVC可以帶來『好懂』,『好維護』,『好修改』,『好擴充』與『好分工』...等等好處。

3.那麼MVC是怎麼運作的呢?

那麼MVC到底是怎麼運做的呢?

導播,請上圖,洩洩!!!

MVC示意圖,來源:蘋果官方文件

好的,從上圖我們可以很清楚的看到MVC三者之間是怎麼進行互動的。

讓我們先從左半邊看起,View與Controller的互動。

Controller與View的互動

首先在圖上我們可以看到,View有一個箭頭指向Controller,上面寫著user action.然後controller有一個箭頭指向View,上面寫著Update.

這兩個箭頭表示,

  1. User Action(使用者進行操作): 每當View這邊有任何事件發生(通常是使用者的手指在手機螢幕上指指點點),View就會通知Controller有事件發生。
  2. Update(更新畫面元件): 當Controller處理完收到的事件之後,如果需要改變View的狀態,就會執行相關的程式碼來更新View的狀態。

舉例來說:你在你的APP畫面上放了一顆按鈕,按鈕上面寫著”登入”兩個字。

如果使用者按了這個按鈕,那麼這個按鈕就會通知Controller説:誒誒,有人按下登入啦,怎麼辦?(User Action:按下登入。)

Controller知道之後,決定開始執行登入的功能,於是便告訴按鈕說,現在開始進行登入程序,快把你的登入兩個字給我改成登入中!(update:更改標題。)

是不是很好理解啊!!

Controller與Model的互動

接下來看右半邊,Controller與Model的互動

一樣在Controller與Model之間有兩個箭頭,分別是Update與Notify。

  1. Update:當資料有任何變動的時候,Controller會通知Model更新手邊的資料。
  2. Notify:當Model任務執行完畢之後,Model會根據任務執行結果送出對應的通知給Controller。任務成功就送出任務成功的通知,任務失敗就送出任務失敗的通知。而Controller就會根據收到的通知來進行下一步的操作。

以剛剛的登入來說,Controller在收到View傳過來的事件之後,便會執行登入的程式碼。

執行完畢之後,Controller會告訴Model説,把你手邊儲存的使用者登入狀態從未登入改為已登入,改完跟我講。(Update:更新登入者狀態)

接下來等Model更改手邊的資料以後,便會通知Controller説,俺改好啦!(notify:通知Controller)

所以說,當使用者使用APP時,從按下登入按鈕之後。整個完整的事件流程如下,

1.使用者按了登入按鈕

2.按鈕發送user action事件,告訴Controller說有人按了登入。

3.Controller通知View説把update標題,把按鈕標題改為登入中。

4.Controller開始執行登入。

5.登入成功之後Controller通知Model update資料,使用者狀態改成已登入

6.Model更新手邊資料。

7.Model 通知Controller俺改好啦。

8.Controller收到改好了的通知

9.Controller告訴View把登入按鈕的標題改成已登入

全劇終。

哇塞好忙啊……..

總而言之,這就是在MVC架構下,這三個不同區塊的運作的模式。

值得一提的是,

🛎️ 原則上,Model 跟 View 彼此是不能互相溝通的」

這兩個傢伙只能跟乖乖的Controller互動。沒辦法,誰叫Controller是老大呢?

4.那麼MVC實務上是怎麼做的呢?

看到這邊,大家應該對MVC這傢伙在搞什麼鬼稍微有一點概念了吧!

但是俗話說,要讀萬卷書,更要行萬里路。正所謂相逢何必曾相識,相識何必曾相知。好詩啊,好詩。

所以我們不但要知道MVC的原理,更要知道實務上MVC是怎麼運作的!

所以!

導播,影片伺候~~~~~~~~~~~

結論

正所謂工欲善其事,必先利其器。

想要在iOS開發的路上走的順利,第一步就要先了解MVC設計模式,因為整個iOS APP的架構就是基於MVC所設計的。了解了MVC之後,等之後我們遇到從這個概念所衍生出來的其他元件(EX:Datasource,delegate與Notification等等),才不會感到疑惑。

好,那今天的MVC就說到這邊了,希望大家滿意。

正所謂,

持續關注威爾哥,學習iOS笑呵呵。

威爾哥的iOS小教室,我們下次見!

️千山萬水總是情,按個「拍手」行不行。如果你覺得我的文章還不錯,可以「Follow」我,然後順手按個拍手鼓勵鼓勵我!按住👏 1秒 ,神清氣爽。
按住👏 5秒 ,通體舒暢。
按住👏 10秒,說吧,要吃什麼,今晚宵夜我請。
謝謝大家!

--

--

威爾哥(Will, Tsai)
蔡胖想學做生意

作者自稱威爾哥,是個想養貓但是自己都需要人養,漂流在墨爾本的程式設計師,曾經碰過前端開發,後端開發,android開發,現在主要研究iOS開發,興趣是寫寫廢文跟大家分享。