資訊專欄INFORMATION COLUMN
摘要：把自己對(duì)這設(shè)計(jì)模式的理解整理并記錄，僅作自己以后查詢之用。是將視圖和數(shù)據(jù)分離之后，通過將數(shù)據(jù)和視圖進(jìn)行綁定。一般是指模板，例如或者的字符串模板寫法如下然后通過插入中對(duì)于便是，是此指定的。
把自己對(duì)這MVVM設(shè)計(jì)模式的理解整理并記錄，僅作自己以后查詢之用。
先說前端為什么需要 MVVM 或者 FLUX。在我看來，是為了保證不那么優(yōu)秀的前端er在團(tuán)隊(duì)中寫出不那么垃圾的代碼，即使確實(shí)十分垃圾，也不會(huì)污染到團(tuán)隊(duì)中其他同事的代碼，其它的設(shè)計(jì)模式應(yīng)該也具有這種作用。
通過代碼對(duì)比理解MVVMMVVM 是 Model-View-ViewModel （雙向數(shù)據(jù)綁定）的簡(jiǎn)寫。不管是 MVVM 或者是 FLUX， 都強(qiáng)調(diào)的是視圖和數(shù)據(jù)的分離。MVVM 是將視圖和數(shù)據(jù)分離之后，通過 ViewModel 將數(shù)據(jù)和視圖進(jìn)行綁定。
View 一般是指模板，例如 Handlerbars ,或者 ES6 的字符串模板,寫法如下:
let message = "hello,world!!" let demo = ``${message}
然后通過 jQuery 插入 body 中
$("body").html(demo)
對(duì)于 demo 便是 View，message 是此 View 指定的 Model。由于在這個(gè)例子中并沒有交互，僅僅只是為了說明視圖和模型, 所以并沒有 VM 部分。
下面的例子是一個(gè)完整的用 JQuery 實(shí)現(xiàn)的 MVVM 模式寫法
//------ Model
let model = {
value: 1,
fns: [],
set: function(v) {
this.value = v
this.fns.forEach(fn => fn.call(this, this.value))
},
on: function(fn) {
this.fns.push(fn)
}
};
//------ View
let demo = `
${model.value}
`
$("body").html(demo)
//------ ViewModel
$("input").on("keyup", function() {
model.set($(this).val()|0)
})
$("button#button1").on("click", function() {
model.set(model.value + 1)
})
model.on(function(value) {
$("p").html(value)
$("input").val(value)
})
在這個(gè)例子中， input輸入的內(nèi)容會(huì)實(shí)時(shí)顯示在p標(biāo)簽中，而button被點(diǎn)擊之后，也會(huì)對(duì)p標(biāo)簽的值和input標(biāo)簽的值都做+1處理；如果我們按照通常的 jQuery 來處理的話應(yīng)該怎么做?
$("input").on("keyup", function() {
let value = $(this).val()|0;
$("p").html(value)
$("input").val(value)
})
$("button").on("click", function() {
let value = $("input").val()|0 + 1;
$("p").html(value)
$("input").val(value)
})
從這兩段代碼來看，并沒有太大區(qū)別，甚至下面一段代碼看起來更短。然而下面一段代碼將 視圖和模型的處理寫到了一起，試想一下，當(dāng)我們想再增加一個(gè) -1 的button 呢？對(duì)于 MVVM的模式，只要再寫
$("button#button2").on("click", function() {
model.set(model.value - 1)
})
即可。
而對(duì)于傳統(tǒng)的方式，還需要先取得當(dāng)前input值或p的值，然后再進(jìn)行-1操作，最后還需要將input和p的innerHTML都修改一次。
隨著DOM的增加，處理難度的差距越來越大，越來越不容易理解，修改一次，如履薄冰。
通過這個(gè)小例子可以看出 MVVM 相對(duì)傳統(tǒng)的寫法的最大的優(yōu)勢(shì)：
視圖和模型的分離，視圖可以獨(dú)立模型進(jìn)行開發(fā)；只需約定模型的結(jié)構(gòu)即可。
雙向數(shù)據(jù)綁定，視圖和模型可以通過VM互相改變。
基于約定俗成的模式，可以將爛代碼控制在最小范圍內(nèi)，也很難寫出爛代碼。
ps: 按照我的理解 Angular 中對(duì)于基礎(chǔ)的VM進(jìn)行了封裝，所以在模板中綁定數(shù)據(jù)之后，數(shù)據(jù)更新，會(huì)自動(dòng)更新視圖。
文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/85937.html
摘要：插件開發(fā)前端掘金作者原文地址譯者插件是為應(yīng)用添加全局功能的一種強(qiáng)大而且簡(jiǎn)單的方式。提供了與使用掌控異步前端掘金教你使用在行代碼內(nèi)優(yōu)雅的實(shí)現(xiàn)文件分片斷點(diǎn)續(xù)傳。 Vue.js 插件開發(fā) - 前端 - 掘金作者：Joshua Bemenderfer原文地址: creating-custom-plugins譯者：jeneser Vue.js插件是為應(yīng)用添加全局功能的一種強(qiáng)大而且簡(jiǎn)單的方式。插....
摘要：一般來說，聲明式編程關(guān)注于發(fā)生了啥，而命令式則同時(shí)關(guān)注與咋發(fā)生的。聲明式編程可以較好地解決這個(gè)問題，剛才提到的比較麻煩的元素選擇這個(gè)動(dòng)作可以交托給框架或者庫(kù)區(qū)處理，這樣就能讓開發(fā)者專注于發(fā)生了啥，這里推薦一波與。 本文翻譯自FreeCodeCamp的from-zero-to-front-end-hero-part。 繼續(xù)譯者的廢話，這篇文章是前端攻略-從路人甲到英雄無敵的下半部分，在...
摘要：是文檔的一種表示結(jié)構(gòu)。這些任務(wù)大部分都是基于它。這個(gè)實(shí)踐的重點(diǎn)是把你在前端練級(jí)攻略第部分中學(xué)到的一些東西和結(jié)合起來。一旦你進(jìn)入框架部分，你將更好地理解并使用它們。到目前為止，你一直在使用進(jìn)行操作。它是在前端系統(tǒng)像今天這樣復(fù)雜之前編寫的。 本文是 前端練級(jí)攻略 第二部分，第一部分請(qǐng)看下面： 前端練級(jí)攻略(第一部分) 在第二部分，我們將重點(diǎn)學(xué)習(xí) JavaScript 作為一種獨(dú)立的語言，如...
摘要：前言月份開始出沒社區(qū)，現(xiàn)在差不多月了，按照工作的說法，就是差不多過了三個(gè)月的試用期，準(zhǔn)備轉(zhuǎn)正了一般來說，差不多到了轉(zhuǎn)正的時(shí)候，會(huì)進(jìn)行總結(jié)或者分享會(huì)議那么今天我就把看過的一些學(xué)習(xí)資源主要是博客，博文推薦分享給大家。 1.前言 6月份開始出沒社區(qū)，現(xiàn)在差不多9月了，按照工作的說法，就是差不多過了三個(gè)月的試用期，準(zhǔn)備轉(zhuǎn)正了！一般來說，差不多到了轉(zhuǎn)正的時(shí)候，會(huì)進(jìn)行總結(jié)或者分享會(huì)議！那么今天我就...
閱讀 3338·2021-11-16 11:45
閱讀 4412·2021-09-22 15:38
閱讀 2857·2021-09-22 15:26
閱讀 3366·2021-09-01 10:48
閱讀 875·2019-08-30 15:56
閱讀 730·2019-08-29 13:58
閱讀 1500·2019-08-28 18:00
閱讀 2181·2019-08-27 10:53
