資訊專欄INFORMATION COLUMN
摘要：數(shù)據(jù)監(jiān)聽模式的核心就是數(shù)據(jù)變化驅(qū)動(dòng)視圖更新，其中關(guān)鍵的一點(diǎn)就是，我們?nèi)绾文苤罃?shù)據(jù)發(fā)生了變化發(fā)布訂閱模型通過事件的發(fā)布監(jiān)聽的模式來實(shí)現(xiàn)數(shù)據(jù)監(jiān)聽即數(shù)據(jù)變化后，發(fā)布者會(huì)觸發(fā)自定義的某個(gè)事件比如，然后訂閱者捕獲到這個(gè)事件后，實(shí)現(xiàn)后續(xù)處理值判斷視圖
數(shù)據(jù)監(jiān)聽
發(fā)布－訂閱模型vm模式的核心就是數(shù)據(jù)變化驅(qū)動(dòng)視圖更新，其中關(guān)鍵的一點(diǎn)就是，我們?nèi)绾文苤罃?shù)據(jù)發(fā)生了變化?
通過事件的發(fā)布/監(jiān)聽的模式來實(shí)現(xiàn)數(shù)據(jù)監(jiān)聽. 即數(shù)據(jù)變化后，發(fā)布者會(huì)觸發(fā)自定義的某個(gè)事件比如valueChage，然后訂閱者捕獲到這個(gè)事件后，實(shí)現(xiàn)后續(xù)處理(值判斷/視圖更新/其他自定義邏輯). 這其實(shí)就是最簡(jiǎn)單的事件處理的機(jī)制
待補(bǔ)充
GET/SET監(jiān)測(cè)數(shù)據(jù)的變化還有一種簡(jiǎn)單且較為完美的實(shí)現(xiàn)，并且目前十分火熱的Vm框架Vue也是應(yīng)用了這種方式.那就是Es5中對(duì)對(duì)象的新增的擴(kuò)展方法Object.defineProperty(). 它帶來了無(wú)數(shù)可能性.通過對(duì)對(duì)象的屬性設(shè)置改方法，我們也能輕易的實(shí)現(xiàn)數(shù)據(jù)變化后的邏輯處理.
先來簡(jiǎn)單看一看Object.defineProperty()的簡(jiǎn)單使用
Object.defineProperty(obj, prop, descriptor)
var obj = {};
Object.defineProperty(obj, "name", {
enumerable: true,
configurable: true,
get: function () {
console.log("get#");
return name;
},
set: function (newValue) {
console.log("set#");
name = newValue + "~~~";
}
});
obj.name = "Xie" // set#
console.log(obj.name); //get# Xie~~~
obj.name = "Min" // set#
console.log(obj.name); //get# Min~~~
參數(shù)介紹:
value:屬性的值
writable:如果為false，屬性的值就不能被重寫
get: 一旦目標(biāo)屬性被訪問就會(huì)調(diào)回此方法，并將此方法的運(yùn)算結(jié)果返回用戶
set:一旦目標(biāo)屬性被賦值，就會(huì)調(diào)用此方法
configurable:如果為false，則任何嘗試刪除目標(biāo)屬性或修改屬性以下特性（writable, configurable, enumerable）的行為將被無(wú)效化
enumerable:是否能在for...in循環(huán)中遍歷出來或在Object.keys中列舉出來
P.s writeble/value不能和get/set共存，因?yàn)閛bject不允許有兩種訪問機(jī)制存在.
實(shí)現(xiàn)數(shù)據(jù)驅(qū)動(dòng)正是因?yàn)間et/set這種特性，我們就能通過設(shè)置set方法來完成數(shù)據(jù)變化－>視圖更新的邏輯
var obj = {};
$("#input").on("input",function(){
obj.data = $(this).val();
});
Object.defineProperty(obj, "data", {
enumerable: true,
configurable: true,
get: function () {
return data;
},
set: function (newData) {
data = newData;
$("#output").text(data);
}
});
數(shù)據(jù)變化驅(qū)動(dòng)視圖更新是MVVM模式中VM的核心邏輯，這種模式下的任何時(shí)候，我們都不應(yīng)該直接以操縱DOM節(jié)點(diǎn)的方式來改變視圖， 而是必須通過改變數(shù)據(jù)狀態(tài)的方式，驅(qū)動(dòng)數(shù)據(jù)狀態(tài)變化來改變視圖(具體方式上面已經(jīng)提到了，捕獲valueChage事件/SET等) Angular/Vue/Avalone/等等之類的MVVM框架，就是封裝并優(yōu)化了這一個(gè)步驟.
文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址：http://specialneedsforspecialkids.com/yun/91096.html
摘要：數(shù)據(jù)監(jiān)聽模式的核心就是數(shù)據(jù)變化驅(qū)動(dòng)視圖更新，其中關(guān)鍵的一點(diǎn)就是，我們?nèi)绾文苤罃?shù)據(jù)發(fā)生了變化發(fā)布訂閱模型通過事件的發(fā)布監(jiān)聽的模式來實(shí)現(xiàn)數(shù)據(jù)監(jiān)聽即數(shù)據(jù)變化后，發(fā)布者會(huì)觸發(fā)自定義的某個(gè)事件比如，然后訂閱者捕獲到這個(gè)事件后，實(shí)現(xiàn)后續(xù)處理值判斷視圖 數(shù)據(jù)監(jiān)聽 vm模式的核心就是數(shù)據(jù)變化驅(qū)動(dòng)視圖更新，其中關(guān)鍵的一點(diǎn)就是，我們?nèi)绾文苤罃?shù)據(jù)發(fā)生了變化? 發(fā)布－訂閱模型 通過事件的發(fā)布/監(jiān)聽的模式來...
摘要：前言上一篇講到了但其實(shí)一直還對(duì)中的部分存在一些理解問題敲了一遍的之后，加深了對(duì)的理解例子現(xiàn)在需求如下，有一個(gè)按鈕，點(diǎn)擊之后，發(fā)送請(qǐng)求，并將接收到的結(jié)果更新到中傳統(tǒng)寫法在上綁定點(diǎn)擊事件一旦捕獲到點(diǎn)擊事件，向后臺(tái)發(fā)送一條請(qǐng)求得到后臺(tái)返回的數(shù)據(jù)操 前言 上一篇講到了MVC/MVP/MVVM, 但其實(shí)一直還對(duì)MVVM中的VM部分存在一些理解問題, 敲了一遍vue的demo之后，加深了對(duì)VM的理...
摘要：前言上一篇講到了但其實(shí)一直還對(duì)中的部分存在一些理解問題敲了一遍的之后，加深了對(duì)的理解例子現(xiàn)在需求如下，有一個(gè)按鈕，點(diǎn)擊之后，發(fā)送請(qǐng)求，并將接收到的結(jié)果更新到中傳統(tǒng)寫法在上綁定點(diǎn)擊事件一旦捕獲到點(diǎn)擊事件，向后臺(tái)發(fā)送一條請(qǐng)求得到后臺(tái)返回的數(shù)據(jù)操 前言 上一篇講到了MVC/MVP/MVVM, 但其實(shí)一直還對(duì)MVVM中的VM部分存在一些理解問題, 敲了一遍vue的demo之后，加深了對(duì)VM的理...
閱讀 1670·2021-10-13 09:39
閱讀 2099·2021-09-07 10:20
閱讀 2678·2019-08-30 15:56
閱讀 2945·2019-08-30 15:56
閱讀 932·2019-08-30 15:55
閱讀 625·2019-08-30 15:46
閱讀 3494·2019-08-30 15:44
閱讀 2552·2019-08-30 11:15
