資訊專欄INFORMATION COLUMN
摘要：模式的目的是實(shí)現(xiàn)動(dòng)態(tài)的程序設(shè)計(jì)，簡(jiǎn)化程序后續(xù)的修改和擴(kuò)展過程，并且使模塊能夠被重復(fù)利用。視圖的可視化表示，表示當(dāng)前狀態(tài)的視圖。出現(xiàn)于年，最大變化在于代替了。其關(guān)鍵改進(jìn)是數(shù)據(jù)綁定，也就是說，的數(shù)據(jù)狀態(tài)發(fā)生變化可以直接影響，反之亦然。
MV模式的目的是實(shí)現(xiàn)動(dòng)態(tài)的程序設(shè)計(jì)，簡(jiǎn)化程序后續(xù)的修改和擴(kuò)展過程，并且使模塊能夠被重復(fù)利用。此模式通過簡(jiǎn)化程序使之變得更為直觀。MV不是一種技術(shù) ，而是一種設(shè)計(jì)理念。MV*模式主要采用分層的思想來降低耦合度，從而使系統(tǒng)更加靈活，擴(kuò)展性更強(qiáng)。它通過關(guān)注數(shù)據(jù)界面分離，來鼓勵(lì)改進(jìn)應(yīng)用程序結(jié)構(gòu)。
常見的兩種MV*模式是MVC和MVVM，他們具有一些相同點(diǎn)：
Model（模型）：負(fù)責(zé)保存應(yīng)用數(shù)據(jù)，和后端交互同步應(yīng)用數(shù)據(jù)，或校驗(yàn)數(shù)據(jù)。Model不涉及用戶界面，也不涉及表示層，而是代表應(yīng)用程序可能需要的獨(dú)特形式的數(shù)據(jù)。當(dāng)Model改變時(shí)，它會(huì)通知它的觀察者(如視圖)作出相應(yīng)的反應(yīng)?？偟膩碚f，Model 主要與業(yè)務(wù)數(shù)據(jù)有關(guān)，與應(yīng)用內(nèi)交互狀態(tài)無關(guān)。
View（視圖）：Model 的可視化表示，表示當(dāng)前狀態(tài)的視圖。前端View負(fù)責(zé)構(gòu)建和維護(hù)DOM元素。
View 對(duì)應(yīng)用程序中的 Model 和 Controller 的了解是有限的，更新 Model 的實(shí)際任務(wù)都是在 Controller 上。
用戶可以與 View 交互，包括讀取和編輯 Model，在 Model 中獲取或設(shè)置屬性值。
不同點(diǎn)在于：
Controller（控制器）：是應(yīng)用程序中處理用戶交互的部分。通?？刂破髫?fù)責(zé)從視圖讀取數(shù)據(jù)，控制用戶輸入，并向模型發(fā)送數(shù)據(jù)。
VM（視圖模型）：通過數(shù)據(jù)綁定，自動(dòng)完成M、V之間的更新
那么究竟兩者有什么區(qū)別？
如圖，實(shí)線代表方法調(diào)用，虛線代表事件通知。
MVC允許在不改變視圖的情況下改變視圖對(duì)用戶輸入的響應(yīng)方式，用戶對(duì)View的操作交給了Controller處理，在Controller中響應(yīng)View的事件調(diào)用Model的接口對(duì)數(shù)據(jù)進(jìn)行操作，一旦Model發(fā)生變化便通知相關(guān)視圖進(jìn)行更新（觀察者模式）。
這張圖把MVC分為三個(gè)獨(dú)立的區(qū)域，你瞧C和V以及C和M之間的白線，一部分是虛線一部分是實(shí)線對(duì)吧，這就表明了引用關(guān)系：C可以直接引用V和M，而V和M不能直接引用C，至少你不能顯式的在V和M的代碼中去寫和C相關(guān)的任何代碼，而V和M之間則是雙黃線，沒錯(cuò)，它們倆誰(shuí)也不能引用誰(shuí)，你既不能在M里面寫V，也不能在V里面寫M。
但是，MVC框架允許View和Model直接進(jìn)行通信！所以，可能會(huì)出現(xiàn)特別混亂的情況出現(xiàn)！以Backbone 為例，由于 Model 對(duì)外直接暴露了 set 和 on 方法，導(dǎo)致 View 層可以隨意改變 Model 中的值，也可以隨意監(jiān)聽 Model 中值的變化。
MVVM 出現(xiàn)于 2005 年，最大變化在于 VM(ViewModel)代替了 C(Controller)。其關(guān)鍵“改 進(jìn)”是數(shù)據(jù)綁定(DataBinding)，也就是說，View 的數(shù)據(jù)狀態(tài)發(fā)生變化可以直接影響 VM，反之 亦然。這也可以說是 AngularJS 的核心特色之一。
MVVM框架與MVC框架的主要區(qū)別有兩點(diǎn)：
1、實(shí)現(xiàn)數(shù)據(jù)與視圖的分離
2、通過數(shù)據(jù)來驅(qū)動(dòng)視圖，開發(fā)者只需要關(guān)心數(shù)據(jù)變化，DOM操作被封裝了。
MVVM的實(shí)現(xiàn)主要是三個(gè)核心點(diǎn)：
響應(yīng)式：vue如何監(jiān)聽data的屬性變化（Object.defineProperty）
模板解析：vue的模板是如何被解析的
渲染：vue模板是如何被渲染成HTML的
文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/105760.html
摘要：所以我查了很多的材料，希望能從自己的角度上用通俗的語(yǔ)言闡述前端框架的演變?，F(xiàn)在，前端頁(yè)面會(huì)有很多復(fù)雜的交互邏輯和用戶體驗(yàn)，如果還使用之前老的框架，對(duì)層的操作就會(huì)難以維護(hù)，這就是前端框架要不斷演變的主要原因。 說實(shí)在的，我不覺得MVC，MVVM這些框架有什么難的，直到我想寫一篇文章去系統(tǒng)的闡述它們。我遇到了以下幾個(gè)問題，1.不同的文章說的南轅北轍 2.沒有一個(gè)清晰的大綱和框架分類。所以我...
摘要：所以我查了很多的材料，希望能從自己的角度上用通俗的語(yǔ)言闡述前端框架的演變?，F(xiàn)在，前端頁(yè)面會(huì)有很多復(fù)雜的交互邏輯和用戶體驗(yàn)，如果還使用之前老的框架，對(duì)層的操作就會(huì)難以維護(hù)，這就是前端框架要不斷演變的主要原因。 說實(shí)在的，我不覺得MVC，MVVM這些框架有什么難的，直到我想寫一篇文章去系統(tǒng)的闡述它們。我遇到了以下幾個(gè)問題，1.不同的文章說的南轅北轍 2.沒有一個(gè)清晰的大綱和框架分類。所以我...
摘要：還有一點(diǎn)比較重要的是，如何在快速迭代的軟件開發(fā)周期內(nèi)，去解放生產(chǎn)力。于是就會(huì)大量涌現(xiàn)很多優(yōu)秀的開源框架和擴(kuò)展庫(kù)，去解決現(xiàn)實(shí)生活中的實(shí)際問題。而這一切都是在朝著提高開發(fā)效率，降低維護(hù)成本而前進(jìn)。結(jié)合書中的觀點(diǎn)去總結(jié)和思考。 關(guān)于 Vue.js showImg(https://segmentfault.com/img/bVbk73v?w=252&h=253); 簡(jiǎn)單小巧的核心（代碼壓縮后大...
摘要：還有一點(diǎn)比較重要的是，如何在快速迭代的軟件開發(fā)周期內(nèi)，去解放生產(chǎn)力。于是就會(huì)大量涌現(xiàn)很多優(yōu)秀的開源框架和擴(kuò)展庫(kù)，去解決現(xiàn)實(shí)生活中的實(shí)際問題。而這一切都是在朝著提高開發(fā)效率，降低維護(hù)成本而前進(jìn)。結(jié)合書中的觀點(diǎn)去總結(jié)和思考。 關(guān)于 Vue.js showImg(https://segmentfault.com/img/bVbk73v?w=252&h=253); 簡(jiǎn)單小巧的核心（代碼壓縮后大...
閱讀 1316·2021-11-11 10:57
閱讀 3735·2021-09-07 10:10
閱讀 3451·2021-08-03 14:03
閱讀 3079·2019-08-30 13:45
閱讀 693·2019-08-29 11:19
閱讀 1049·2019-08-28 18:07
閱讀 3109·2019-08-26 13:55
閱讀 818·2019-08-26 12:17
