MVVM解析

来源:https://www.cnblogs.com/lovesong/archive/2019/12/03/11980309.html

閑來無事看到了一個關於Vue的MVVM的簡單講解,覺得寫得不錯,做個分享。 文章地址 https://github.com/DMQ/mvvm 文章內容我就不貼出,比較簡潔明瞭,我記錄一下我的一些思考總結。 PS:建議先仔細讀這篇文章。 MVVM MVVM即雙向數據綁定,是一種設計模式,一般是Web前 ...


閑來無事看到了一個關於Vue的MVVM的簡單講解,覺得寫得不錯,做個分享。

文章地址

https://github.com/DMQ/mvvm

文章內容我就不貼出,比較簡潔明瞭,我記錄一下我的一些思考總結。

PS:建議先仔細讀這篇文章。

MVVM

MVVM即雙向數據綁定,是一種設計模式,一般是Web前端框架的核心概念,肯定也不是Vue只此一家有。

簡單來說就是,數據跟視圖的實時綁定。如果我們自己要實現這個需求,那核心的問題有三個:

1、如何監聽到數據變化?

2、數據變化如何通知到視圖?

3、視圖如何更新?

這三個問題先放著,後面大家就知道我為什麼這麼劃分這三個問題。

討論文章

實現數據綁定的做法有大致如下幾種:
1、發佈者-訂閱者模式(backbone.js)
2、臟值檢查(angular.js)
3、數據劫持(vue.js)

那文章中把實現數據綁定歸類為這幾種,不過我覺得他的說法有問題。

首先,發佈訂閱模式是一種消息通知的設計模式,它解決的是通知的問題,也就是我上面提到的第2個問題。

然後,無論是臟值檢查還是數據劫持,它解決的是監聽數據變化的問題,也即是上面第1個問題。

也就是說,實現數據綁定,做法是 2 或 3 + 1,而不是選擇其中一個就可以的。

另外,這三個方式並沒有視圖更新的部分,不能算是一個完整的數據綁定過程。

PS:這一點上大家要明確。

如何監聽到數據變化?

angular.js:臟值檢查。

vue.js:數據劫持。

angular.js我已許久不用,就不多討論,這裡談談vue.js。

不得不說,vue.js是做得比較雞賊的,它利用js的語言特性,即Object.defineProperty()方法,做到了監聽數據變化,但也因此它只能相容IE9以上瀏覽器。

框架所使用的語言特性,直接影響它的相容性。

數據變化如何通知到視圖?

如果對設計模式比較瞭解,一看到這個需求,很自然而然地就想起訂閱發佈模式。

關於訂閱發佈模式,可查看:https://www.cnblogs.com/lovesong/p/5272752.html

視圖如何更新?

在看那文章中,我最感興趣的是這個,有些豁然開朗。

在我看來,視圖更新數據無非是在元素節點的屬性或內容上,那麼只需要設置一些特殊的指令作識別,再將相應的數據更新到元素上即可。

這樣這一步需要做兩件事:

1、指令解析器。解析指令,例如指令類型、對應表達式或數據項。

2、訂閱事件。根據數據項生成訂閱者。

做到這兩步,再加上前面所做,就完成了MV的綁定。這個過程中,數據的維護方是觀察者,而指令解析器是訂閱者。

可能大家沒有意識到的是,如果要完成VM的綁定,那麼指令解析器是觀察者,而數據的維護方是訂閱者。例如一個表單的input,指令解析器解析出v-model時,它就需要監聽input的change事件,當數值變化時,它需要通知數據維護方更新數據。

所以,在完整的MVVM中,數據維護方和指令解析器即是觀察者,也是訂閱者。

總結

MVVM,無論細節是如何實現,其關鍵部分就在於訂閱發佈這種思想,把握好這個,理解就不難了。 


您的分享是我們最大的動力!

更多相關文章
  • 說明: 1)該實驗所有過程均是本人親自敲命令完成,所有代碼運行正確 2)安裝過程使用的是suse11 sp3操作系統,後續的實驗過程換成了麒麟中標,因此部分路徑可能存在差異 3)安裝過程使用了命令行安裝,圖形界面簡單,因此本文沒有介紹 4)job部分命令行操作太繁瑣,建議使用圖形界面操作,因此本文也 ...
  • sqlServer2012(936 簡體中文GBK )為例: 例如: varchar(10),只能存儲10個英文字元或數字,也只能存儲5個漢字; char(10),只能存儲10個英文字元或數字,也只能存儲5個漢字; nvarchar(10),即存儲10個英文字元或數字,也能存儲10個漢字; ncha ...
  • 知識點 △用資料庫的原因 1文件操作的複雜度 2同步 3併發處理 4安全 △資料庫系統(DBS) 資料庫(DB) + 資料庫管理系統 (DBS)+ 資料庫應用程式 + 資料庫管理員 (BDA)+ 最終用戶 △資料庫管理系統 DBM 網路應用服務端 我們要使用服務端的數據 需要有一個客戶端 客戶端可以 ...
  • 常見的SQL優化方式 1. 對查詢進行優化,應儘量避免全表掃描,首先應考慮在 where及order by 涉及的列上建立索引 。 2. 應儘量 避免 在 where 子句中對欄位進行null 值判斷,否則將導致引擎放棄使用索引而進行全表掃描,如: 可以在num上設置預設值0,確保表中num列是否存 ...
  • 前言 這是 "Android 9.0 AOSP 系列" 的第五篇了,先來回顧一下前面幾篇的大致內容。 "Java 世界的盤古和女媧 —— Zygote" 主要介紹了 Android 世界的第一個 Java 進程 的啟動過程。 註冊服務端 socket,用於響應客戶端請求 各種預載入操作,類,資源,共 ...
  • 我們編寫一個能夠用過按鈕動態更替碎片的APP,首先在主頁上顯示第一個碎片,點擊按鈕後可以替換到第二個碎片,或者刪除已經替換掉的第二個碎片。 一.MainActivity.java import androidx.fragment.app.FragmentActivity; import androi ...
  • 隨著Kotlin的推廣,一些國內公司的安卓項目開發,已經從Java完全切成Kotlin了。雖然Kotlin在各類編程語言中的排名比較靠後(據TIOBE發佈了 19 年 8 月份的編程語言排行榜,Kotlin竟然排名45位),但是作為安卓開發者,掌握該語言,卻已是大勢所趨了。 Kotlin的基礎用法, ...
  • 協程中的Channel用於協程間的通信, 它的宗旨是: ``` Do not communicate by sharing memory; instead, share memory by communicating. ``` ...
一周排行
  • 《ASP.NET MVC 企業級實戰》 [作者] (中) 鄒瓊俊[出版] 清華大學出版社[版次] 2017年04月 第1版[印次] 2019年08月 第6次 印刷[定價] 89.00元 【第01章】 (P021) 只有在 Lambda 有一個輸入參數時,括弧才是可選的,否則括弧是必需的。 使用空括弧 ...
  • 上一篇(https://www.cnblogs.com/meowv/p/12971041.html)使用HtmlAgilityPack抓取壁紙數據成功將圖片存入資料庫,本篇繼續來完成一個全網各大平臺的熱點新聞數據的抓取。 同樣的,可以先預覽一下我個人博客中的成品:https://meowv.com/ ...
  • 前言 請了一天假後回公司,同事跟我說使用Newtonsoft.json序列化TreeView對象的時候出現報錯; 啊!什麼?這個類庫不是能夠序列化所有東西嗎?真的很懵逼,也是我第一次使用這個類庫出現問題! 問題異常 異常信息 : Newtonsoft.Json.JsonSerializationEx ...
  • 簡單瞭解下麵詞語的意思 節點:二叉樹中每個元素都稱為節點 葉子節點(簡稱:葉子):度為0的節點,葉子節點就是樹中最底段的節點,葉子節點沒有子節點,也叫終端結點 分枝節點:度不為0的結點 節點的度:二叉樹的度代表某個節點的孩子或者說直接後繼的個數,簡單說就是一個節點擁有的子樹數 樹的度: 樹中最大的結 ...
  • C# 中的LINQ 提供了兩種操作方式,查詢表達式和查詢操作符,所有的查詢表達式都有對應的查操作符類替代,查詢表達式有點“類” SQL,在代碼中寫SQL,總覺得不夠“優雅”,使用查詢操作符就顯得“優雅”很多, 本系列就來對所有的LINQ 標準操作符進行一個全面的總結,這些操作符和我上篇文章總結的Rx ...
  • 在Startup ConfigureServices 註冊本地化所需要的服務AddLocalization和 Configure<RequestLocalizationOptions> public void ConfigureServices(IServiceCollection services ...
  • 為什麼需要持久化,以及Redis持久化的RDB方式在這篇文章講的已經很透徹了,足以弔打面試官了。而且此篇內容需要RDB文章的內容支持,所以建議先看下:看完這篇還不懂Redis的RDB持久化,你們來打我! 一、什麼是AOF 它也是Redis持久化的重要手段之一,aof->Append Only Fil ...
  • 先上圖: @IT程式猿 微博網友評論: @迢書:前同事的,親眼見過 @AvenGeeker:Bug 404 @科技州:這是要逼死強迫症 @小島一瞥:哈哈哈哈哈我老家的車 最後小編整理了一套技術資料不僅能精準消除技術盲點、累計面試經驗,更可以攻剋JVM、Spring、分散式、微服務等技術難題。 海量電 ...
  • 概括來說,分三步: 1,首先找到是哪個進程的CPU占有率飆到了100%。 2,根據進程號pid,定位到是哪個線程,找到對應線程的tid。 3,導出對應線程的dump日誌文件,分析日誌文件定位具體代碼。 要解決這個問題,你應該具備以下技能: 1,linux的top命令。 2,jvm監控工具jps。 3 ...
  • 寫在最後 程式員為何害怕【別人的代碼】呢?這讓我想起一個段子。 寫這段代碼時 只有上帝和我知道他是幹嘛的 現在 只有上帝知道了 別人的代碼,似乎總意味著冗長、晦澀、凌亂,給人一種不想靠近的感覺。搞笑的是,對於一些程式員而言,即使是自己的代碼,在一段時間之後自己再拿來看,也成了【別人的代碼】... 作 ...