閱讀更多系列文章請訪問我的GitHub部落格，示例程式碼請訪問這裡。
現代與傳統開發模式的區別
| 現代開發模式 | 傳統開發模式 |
|---|---|
| Vue、React、Angular | jQuery |
| 只需花費20%時間在檢視層 | 需花費80%時間在檢視層 |
| 資料層與檢視層自動繫結 | 資料與檢視不分離 |
MVC模式介紹
MVC為Model（模型，同時也是資料）、View（檢視）、Controller（控制）的縮寫，它代表程式分為三層：
- 最上層是View（檢視層），即提供給使用者的操作介面。
- 中間層是Controller（控制層），它會根據使用者從View（檢視層）輸入的指令，對Model（資料層）中相關的資料進行操作，產生最終結果。
- 最底層是Model（資料層），它儲存了程式執行所需的資料或資訊。
MVC三層相互獨立，每一層內部的工作並不影響其它層，各自提供對外介面，供上層呼叫。這樣程式就實現模組化，各層進行修改都不會影響其它層的功能。
MVC、MVP、MVVM模式的區別
| MVC | MVP | MVVM |
|---|---|---|
| 分為3個部分：檢視（View）使用者介面、控制器（Controller）業務邏輯、模型（Model）資料儲存。 | MVP將Controller改名為Presenter，同時改變了通訊方向。 | MVVM模式將Presenter改名為ViewModel，基本上與MVP模式完全一致。 |
| 通訊方式 |
MVVM模式通訊方向 | |
| MVC模式的通訊是單向的： 1. View傳送只領到Controller。 2. Controller完成業務邏輯後，要求Model改變狀態。 3. Model將新的資料傳送到View，使用者得到反饋。 |
MVP模式的通訊方式： 1. 各部分之間的通訊是雙向的。 2. View與Model不發生聯絡，都通過Presenter傳遞。 3. View非常薄，不部署任何業務邏輯，稱為“被動式圖”（Passive View），即沒有任何主動性，而Presenter非常厚，所有邏輯都部署在這裡。 |
MVVM模式與MVP模式的區別是，它採用雙向繫結（data-binding）：View的變動，自動反應在ViewModel，反之亦然。View、Angular和Ember都採用這種模式。 |
服務端渲染與客戶端渲染的區別
| 服務端渲染 | 客戶端渲染 |
|---|---|
| 由服務端將資料組合成html標籤後，由前端展示，如普通HTML頁面 | 服務端向前端傳輸資料，如JSON，由前端組裝成html頁面展示 |
| 如Pug、EJS等模板引擎 | 如Vue、React等框架 |
| 優點：1. 安全，因為服務端的內容對前端都不可見 2. 對SEO有利，由於搜尋引擎只會讀取html，不會執行JavaScript，因此客戶端渲染的頁面在搜尋引擎看來只是個空白頁面。 | 優點：1. 節省流量，資料量少 2. 使用者體驗好，可以不用重新整理頁面 |
| 一般需要安全性高的頁面，比如註冊、登入，會使用服務端渲染 | 安全性要求不高的頁面，如商品頁等，會使用客戶端渲染 |