摘要：首先我們要大概搞清楚一些什么模式。什么模式是等的一個(gè)統(tǒng)稱，它們各有不同，但本質(zhì)上其實(shí)是一個(gè)東西。不關(guān)心它會(huì)被如何顯示或是如何被操作。效果圖如下，我們只關(guān)心功能實(shí)現(xiàn)，所以樣式丑我們先忍一下。
假如讓你不依托任何前端框架（React/Vue/Angular等等），單純用Javascript編寫一個(gè)網(wǎng)站應(yīng)用，你還知道怎么開發(fā)嗎？
舉個(gè)例子，產(chǎn)品經(jīng)理讓你實(shí)現(xiàn)一個(gè)網(wǎng)頁(yè)，上面有一張貓咪的圖片，貓咪的下面顯示點(diǎn)贊的次數(shù)。每次點(diǎn)擊貓咪的圖片，點(diǎn)贊的數(shù)字加一。
這個(gè)對(duì)大家來說應(yīng)該都很簡(jiǎn)單。
這時(shí)候產(chǎn)品經(jīng)理開始加需求了，網(wǎng)頁(yè)上展現(xiàn)五張貓咪圖片，分別有自己的點(diǎn)贊次數(shù)，點(diǎn)擊貓咪圖片，相對(duì)應(yīng)的點(diǎn)贊次數(shù)加一。這時(shí)候你想怎么改寫自己的程序呢？你的程序現(xiàn)在看起來是否邏輯清楚，結(jié)構(gòu)清晰，可拓展性強(qiáng)呢？
今天我就要帶大家用MV模式來組織代碼，編寫出高質(zhì)量?jī)?yōu)美的前端項(xiàng)目。首先我們要大概搞清楚一些什么MV模式。
什么MV*模式
MV*是MVC/MVP/MVVM等的一個(gè)統(tǒng)稱，它們各有不同，但本質(zhì)上其實(shí)是一個(gè)東西。MVP和MVVM是MVC的變體。所以我們今天不談?wù)撍鼈兊膮^(qū)別，只關(guān)注核心的東西。
M代表的是Model，用于封裝與應(yīng)用程序的業(yè)務(wù)邏輯相關(guān)的數(shù)據(jù)以及對(duì)數(shù)據(jù)的處理方法。Model有對(duì)數(shù)據(jù)直接訪問的權(quán)力，例如對(duì)數(shù)據(jù)庫(kù)的訪問。Model 不關(guān)心它會(huì)被如何顯示或是如何被操作。
V代表的是View，用于將數(shù)據(jù)有目的的顯示出來，在 View 中一般沒有程序上的邏輯。
最后的*，不管是Controller還是Presenter，還是ViewModel，本質(zhì)上做的事情就是連接M和V，搭建M和V溝通的橋梁。讓M和V不直接溝通，達(dá)到職責(zé)分離的效果。
我們可以看維基百科上一個(gè)極簡(jiǎn)的MVC實(shí)現(xiàn)：
/** 模擬 Model, View, Controller */
var M = {}, V = {}, C = {};
/** Model 負(fù)責(zé)存放資料 */
M.data = "hello world";
/** View 負(fù)責(zé)將資料顯示到屏幕上 */
V.render = (m) => { alert(m.data); }
/** Controller 作為一個(gè) M 和 V 的橋梁 */
C.handleOnload = () => { V.render(M); }
/** 在網(wǎng)頁(yè)讀取的時(shí)候調(diào)用 Controller */
window.onload = C.handleOnload;
我們今天要實(shí)現(xiàn)的MV*就要滿足這幾個(gè)條件：
Model保存我們的數(shù)據(jù)
View負(fù)責(zé)渲染節(jié)點(diǎn)，可以有多個(gè)View
*（我們給它取個(gè)名字叫Bridge）為View提供讀取和修改Model的方法
產(chǎn)品經(jīng)理的需求
最終版：網(wǎng)頁(yè)左側(cè)展示一個(gè)可選擇的貓咪名字列表，右側(cè)展示當(dāng)前選中的貓咪詳情，包括貓咪名稱，貓咪圖片，該貓咪被點(diǎn)贊數(shù)量和一個(gè)點(diǎn)贊按鈕。點(diǎn)擊點(diǎn)贊按鈕，當(dāng)前貓咪的點(diǎn)贊數(shù)量加1。效果圖如下，我們只關(guān)心功能實(shí)現(xiàn)，所以樣式丑我們先忍一下。
HTML && CSS
![placekitten]()
文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址：http://specialneedsforspecialkids.com/yun/94721.html
-
摘要：在沒有環(huán)境下對(duì)進(jìn)行單元測(cè)試的時(shí)候，應(yīng)用邏輯正確性是無法驗(yàn)證的更新的時(shí)候，無法對(duì)的更新操作進(jìn)行斷言。對(duì)是通過接口進(jìn)行，在對(duì)進(jìn)行不依賴環(huán)境的單元測(cè)試的時(shí)候。這里根據(jù)上面的例子給出了的單元測(cè)試樣例。年微軟工程師在自己的博客上首次公布了模式。
前言
做客戶端開發(fā)、前端開發(fā)對(duì)MVC、MVP、MVVM這些名詞不了解也應(yīng)該大致聽過，都是為了解決圖形界面應(yīng)用程序復(fù)雜性管理問題而產(chǎn)生的應(yīng)用架構(gòu)模式。網(wǎng)上...
bluesky
評(píng)論0
收藏0
-
摘要：在沒有環(huán)境下對(duì)進(jìn)行單元測(cè)試的時(shí)候，應(yīng)用邏輯正確性是無法驗(yàn)證的更新的時(shí)候，無法對(duì)的更新操作進(jìn)行斷言。對(duì)是通過接口進(jìn)行，在對(duì)進(jìn)行不依賴環(huán)境的單元測(cè)試的時(shí)候。這里根據(jù)上面的例子給出了的單元測(cè)試樣例。年微軟工程師在自己的博客上首次公布了模式。
前言
做客戶端開發(fā)、前端開發(fā)對(duì)MVC、MVP、MVVM這些名詞不了解也應(yīng)該大致聽過，都是為了解決圖形界面應(yīng)用程序復(fù)雜性管理問題而產(chǎn)生的應(yīng)用架構(gòu)模式。網(wǎng)上...
shleyZ
評(píng)論0
收藏0
-
摘要：如何同步的變更。在沒有環(huán)境下對(duì)進(jìn)行單元測(cè)試的時(shí)候，業(yè)務(wù)邏輯的正確性是無法驗(yàn)證的更新的時(shí)候，無法對(duì)的更新操作進(jìn)行斷言。對(duì)是通過接口進(jìn)行，在對(duì)進(jìn)行不依賴環(huán)境的單元測(cè)試的時(shí)候。這里根據(jù)上面的例子給出了的單元測(cè)試樣例。
前言
做客戶端開發(fā)、前端開發(fā)對(duì)MVC、MVP、MVVM這些名詞不了解也應(yīng)該大致聽過，都是為了解決圖形界面應(yīng)用程序復(fù)雜性管理問題而產(chǎn)生的應(yīng)用架構(gòu)模式。
網(wǎng)上很多文章關(guān)于這方面的討...
男|高級(jí)講師
-
閱讀 3639·2021-11-24 09:38
-
閱讀 3142·2021-11-15 11:37
-
閱讀 781·2021-11-12 10:36
-
閱讀 3547·2021-10-21 09:38
-
閱讀 3220·2021-09-28 09:36
-
閱讀 2420·2021-09-22 16:01
-
閱讀 4986·2021-09-22 15:09
-
閱讀 1210·2019-08-30 15:55
