前言
本系列最開始是為了自己面試準備的.後來發現整理越來越多,差不多有十二萬字元,最後決定還是分享出來給大家.
為了分享整理出來,花費了自己大量的時間,起碼是隻自己用的三倍時間.如果喜歡的話,歡迎收藏,關注我!謝謝!
文章連結
- 前端面試查漏補缺--(一) 防抖和節流
- 前端面試查漏補缺--(二) 垃圾回收機制
- 前端面試查漏補缺--(三) 跨域及常見解決辦法
- 前端面試查漏補缺--(四) 前端本地儲存
- 前端面試查漏補缺--(五) 渲染機制及重繪和迴流
- 前端面試查漏補缺--(六) 瀏覽器快取
- 前端面試查漏補缺--(七) XSS攻擊與CSRF攻擊
- 前端面試查漏補缺--(八) 前端加密
- 前端面試查漏補缺--(九) HTTP與HTTPS
- 前端面試查漏補缺--(十) 前端鑑權
- 前端面試查漏補缺--(十一) 前端軟體架構模式MVC/MVP/MVVM
- 前端面試查漏補缺--(十二) 從輸入URL到看到頁面發生的全過程(含三握手,四揮手詳解)
- 前端面試查漏補缺--(十三) 記憶體洩漏
- 前端面試查漏補缺--(十四) 演算法及排序
- 前端面試查漏補缺--(十五) Event Loop
合集篇:
前端面試查漏補缺--Index篇(12萬字元合集) 包含目前已寫好的系列其他十幾篇文章.後續新增值文章不會再在每篇新增連結,強烈建議議點贊,關注合集篇!!!!,謝謝!~
後續更新計劃
後續還會繼續新增設計模式,前端工程化,專案流程,部署,閉環,vue常考知識點 等內容.如果覺得內容不錯的話歡迎收藏,關注我!謝謝!
求一份內推
目前本人也在準備跳槽,希望各位大佬和HR小姐姐可以內推一份靠譜的武漢 前端崗位!郵箱:bupabuku@foxmail.com.謝謝啦!~
概述
MVC，MVP和MVVM都是常見的軟體架構設計模式（Architectural Pattern），它通過分離關注點來改進程式碼的組織方式。不同於設計模式（Design Pattern），只是為了解決一類問題而總結出的抽象方法，一種架構模式往往使用了多種設計模式。
要了解MVC、MVP和MVVM，就要知道它們的相同點和不同點。不同部分是C(Controller)、P(Presenter)、VM(View-Model)，而相同的部分則是MV(Model-View)。
MVC模式
MVC模式（Model–view–controller）:
是軟體工程中的一種軟體架構模式，把軟體系統分為三個基本部分：模型（Model）、檢視（View）和控制器（Controller）。
- 模型（Model） - Model層用於封裝和應用程式的業務邏輯相關的資料以及對資料的處理方法。一旦資料發生變化，模型將通知有關的檢視。
- 檢視（View） - View作為檢視層，主要負責資料的展示,並且響應使用者操作.
- 控制器（Controller）- 控制器是模型和檢視之間的紐帶，接收View傳來的使用者事件並且傳遞給Model，同時利用從Model傳來的最新模型控制更新View.
資料關係:
- View 接受使用者互動請求
- View 將請求轉交給Controller
- Controller 操作Model進行資料更新
- 資料更新之後，Model通知View更新資料變化.PS: 還有一種是View作為Observer監聽Model中的任意更新，一旦有更新事件發出，View會自動觸發更新以展示最新的Model狀態.這種方式提升了整體效率，簡化了Controller的功能，不過也導致了View與Model之間的緊耦合。
- View 更新變化資料
方式:
所有方式都是單向通訊
結構實現:
- View ：使用 組合(Composite)模式
- View和Controller：使用 策略(Strategy)模式
- Model和 View：使用 觀察者(Observer)模式同步資訊
缺點:
- View層過重: View強依賴於Model的,並且可以直接訪問Model.所以不可避免的View還要包括一些業務邏輯.導致view過重,後期修改比較困難,且複用程度低.
- View層與Controller層也是耦合緊密: View與Controller雖然看似是相互分離，但卻是聯絡緊密.經常View和Controller一一對應的，捆綁起來作為一個元件使用.解耦程度不足.
MVP模式
MVP（Model-View-Presenter）是MVC模式的改良.MVP與MVC有著一個重大的區別：在MVP中View並不直接使用Model，它們之間的通訊是通過Presenter (MVC中的Controller)來進行的，所有的互動都發生在Presenter內部，而在MVC中View會直接從Model中讀取資料而不是通過 Controller。
- Model - Model層依然是主要與業務相關的資料和對應處理資料的方法。
- View - View依然負責顯示,但MVP中的View並不能直接使用Model
- Presenter - Presenter作為View和Model之間的“中間人”，且MVP中的View並不能直接使用Model，而是通過為Presenter提供介面，讓Presenter去更新Model，再通過觀察者模式更新View。
資料關係:
- View 接收使用者互動請求
- View 將請求轉交給 Presenter
- Presenter 操作Model進行資料更新
- Model 通知Presenter資料發生變化
- Presenter 更新View資料
方式:
各部分之間都是雙向通訊
結構實現:
- View ：使用 組合(Composite)模式
- View和Presenter：使用 中介者(Mediator)模式
- Model和Presenter：使用 命令(Command)模式同步資訊
MVC和MVP關係
- MVP：是MVC模式的變種。
- 專案開發中，UI是容易變化的，且是多樣的，一樣的資料會有N種顯示方式；業務邏輯也是比較容易變化的。為了使得應用具有較大的彈性，我們期望將UI、邏輯（UI的邏輯和業務邏輯）和資料隔離開來，而MVP是一個很好的選擇。
- Presenter代替了Controller，它比Controller擔當更多的任務，也更加複雜。Presenter處理事件，執行相應的邏輯，這些邏輯對映到Model操作Model。那些處理UI如何工作的程式碼基本上都位於Presenter。
- MVC中的Model和View使用Observer模式進行溝通；MPV中的Presenter和View則使用Mediator模式進行通訊；Presenter操作Model則使用Command模式來進行。基本設計和MVC相同：Model儲存資料，View對Model的表現，Presenter協調兩者之間的通訊。在MVP 中 View 接收到事件，然後會將它們傳遞到 Presenter, 如何具體處理這些事件，將由Presenter來完成。
MVP的優點:
- Model與View完全分離，修改互不影響
- 更高效地使用，因為所有的邏輯互動都發生在一個地方—Presenter內部
- 一個Preseter可用於多個View，而不需要改變Presenter的邏輯（因為View的變化總是比Model的變化頻繁）。
- 更便於測試。把邏輯放在Presenter中，就可以脫離使用者介面來測試邏輯（單元測試）
MVP的缺點:
- Presenter中除了業務邏輯以外，還有大量的View->Model，Model->View的手動同步邏輯，造成Presenter比較笨重，一旦檢視需要變更，那麼Presenter也需要變更,維護起來比較困難。
MVVM模式
MVVM是Model-View-ViewModel的簡寫。由Microsoft提出，並經由Martin Fowler佈道傳播。在 MVVM 中，不需要Presenter手動地同步View和Model.View 是通過資料驅動的，Model一旦改變就會相應的重新整理對應的 View，View 如果改變，也會改變對應的Model。這種方式就可以在業務處理中只關心資料的流轉，而無需直接和頁面打交道。ViewModel 只關心資料和業務的處理，不關心 View 如何處理資料，在這種情況下，View 和 Model 都可以獨立出來，任何一方改變了也不一定需要改變另一方，並且可以將一些可複用的邏輯放在一個 ViewModel 中，讓多個 View 複用這個 ViewModel。
- Model - Model層僅僅關注資料本身，不關心任何行為（格式化資料由View負責），這裡可以把它理解為一個類似json的資料物件。
- View - MVVM中的View通過使用模板語法來宣告式的將資料渲染進DOM，當ViewModel對Model進行更新的時候，會通過資料繫結更新到View。
- ViewModel - 類似與Presenter. ViewModel會對View 層的宣告進行處理.當 ViewModel 中資料變化，View 層會進行更新;如果是雙向繫結,一旦View對繫結的資料進行操作，則ViewModel 中的資料也會進行自動更新.
資料關係:
- View 接收使用者互動請求
- View 將請求轉交給ViewModel
- ViewModel 操作Model資料更新
- Model 更新完資料，通知ViewModel資料發生變化
- ViewModel 更新View資料
方式:
雙向繫結。View/Model的變動，自動反映在 ViewModel，反之亦然。
實現資料繫結的方式：
- 資料劫持 (Vue)
- 釋出-訂閱模式 (Knockout、Backbone)
- 髒值檢查 (舊版Angular)
使用:
- 可以相容你當下使用的 MVC/MVP 框架。
- 增加你的應用的可測試性。
- 配合一個繫結機制效果最好。
MVVM優點:
MVVM模式和MVC模式一樣，主要目的是分離檢視（View）和模型（Model），有幾大優點:
- 1,低耦合。View可以獨立於Model變化和修改，一個ViewModel可以繫結到不同的”View”上，當View變化的時候Model可以不變，當Model變化的時候View也可以不變。
- 2,可重用性。你可以把一些檢視邏輯放在一個ViewModel裡面，讓很多view重用這段檢視邏輯。
- 3, 獨立開發。開發人員可以專注於業務邏輯和資料的開發（ViewModel），設計人員可以專注於頁面設計，生成xml程式碼。
- 4, 可測試。介面素來是比較難於測試的，而現在測試可以針對ViewModel來寫。
MVVM缺點:
- 類會增多，ViewModel會越加龐大，呼叫的複雜度增加。