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