資訊專欄INFORMATION COLUMN
摘要：動態(tài)數(shù)據(jù)綁定的三個難點對象深度問題設(shè)置新對象是否能夠繼續(xù)響應(yīng)和考慮傳遞回調(diào)函數(shù)本文的目的在實踐中使用遞歸思想了解設(shè)計模式中的發(fā)布訂閱模式三大難點如果傳入?yún)?shù)對象是一個比較深的對象也就是其屬性值也可能是對象，那該怎么辦呢舉個例子。
本文的目的動態(tài)數(shù)據(jù)綁定的三個難點:
對象深度問題
設(shè)置新對象是否能夠繼續(xù)響應(yīng)getter 和 setter
考慮傳遞回調(diào)函數(shù)
在實踐中使用遞歸思想
了解設(shè)計模式中的“發(fā)布-訂閱模式”
三大難點如果傳入?yún)?shù)對象是一個“比較深”的對象（也就是其屬性值也可能是對象），那該怎么辦呢？舉個例子。
// 一個“比較深”的對象：某些屬性的值也是一個對象
let obj = {
a: 1,
b: 2,
c: {
d: 3,
e: 4
}
}
如果設(shè)置新的值是一個對象的話，新設(shè)置的對象的屬性是否能能繼續(xù)響應(yīng) getter 和 setter。舉個例子。
// 一個“比較深”的對象：某些屬性的值也是一個對象
let app1 = new Observer({
name: "youngwind",
age: 25
});
app1.data.name = {
lastName: "liang",
firstName: "shaofeng"
};
app1.data.name.lastName;
// 這里還需要輸出 "你訪問了 lastName "
app1.data.name.firstName = "lalala";
// 這里還需要輸出 "你設(shè)置了firstName, 新的值為 lalala"
考慮傳遞回調(diào)函數(shù)。在實際應(yīng)用中，當(dāng)特定數(shù)據(jù)發(fā)生改變的時候，我們是希望做一些特定的事情的，而不是每一次都只能打印出一些信息。所以，我們需要支持傳入回調(diào)函數(shù)的功能。舉個例子。
let app1 = new Observer({
name: "youngwind",
age: 25
});
// 你需要實現(xiàn) $watch 這個 API
app1.$watch("age", function(age) {
console.log(`我的年紀(jì)變了，現(xiàn)在已經(jīng)是：${age}歲了`)
});
app1.data.age = 100; // 輸出："我的年紀(jì)變了，現(xiàn)在已經(jīng)是100歲了"
解決方法
對象深度問題解決方法
walk(obj){
let val;
for(let key in obj){
// 這里為什么要用hasOwnProperty進(jìn)行過濾呢？
// 因為for...in 循環(huán)會把對象原型鏈上的所有可枚舉屬性都循環(huán)出來
// 而我們想要的僅僅是這個對象本身擁有的屬性，所以要這么做。
if(obj.hasOwnProperty(key)){
val = obj[key];
//第一大難題:初始化深對象解決問題 這里進(jìn)行判斷，如果還沒有遍歷到最底層，繼續(xù)new Observer
if(typeof val === "object"){
new Observer(data)
}
this.convert(key,val);
}
}
}
使用遞歸的方式 . 利用 typeof 來檢查 val 是否是 object 對象 ,如果是則進(jìn)行遞歸,檢查其子屬性...遞歸..
設(shè)置新對象是否能夠繼續(xù)響應(yīng)getter 和 setter
set: function (valnew) {
self.watch[key](valnew) // 回調(diào)監(jiān)聽 取代下面那條語句
//console.log(`你設(shè)置了 ${key}, 新的值為${valnew}`);
if (typeof newVal === "object") {
new Observer(valnew);
}
if (valnew === val) return;
val = valnew
}
同第一個難點,在 setter 處,判斷改變后的屬性值是否是對象 如果是對象 則再重新new 一個Observer出來
考慮傳遞回調(diào)函數(shù)
$watch(key,callback){
this.watch[key] = callback;
}
仿照 JavaScript 設(shè)計模式 發(fā)布-訂閱模式 來寫一個進(jìn)行 setter 時,觸發(fā)函數(shù)
在線學(xué)習(xí)參考資料源碼:Vue 動態(tài)數(shù)據(jù)綁定三大難點解決源碼
發(fā)布-訂閱模式
更多設(shè)計模式相關(guān)的資料強烈推薦曾探所著《JavaScript設(shè)計模式與開發(fā)實踐》
上篇文章Vue 動態(tài)數(shù)據(jù)綁定(一)
更多內(nèi)容可以訂閱本人微信公眾號，一起開啟前端小白進(jìn)階的世界！
文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址：http://specialneedsforspecialkids.com/yun/86844.html
摘要：函數(shù)式對象的一個子類型，中的函數(shù)是一等公民內(nèi)置對象中還有一些對象子類型，通常被稱為內(nèi)置對象。內(nèi)容對象的內(nèi)容是由一些存儲在特定命名位置的任意類型的值組成的，我們稱之為屬性。 語法 對象兩種定義形式 聲明(文字)形式 構(gòu)造形式 //聲明(文字)形式 var myObj = { key: value // ... } //構(gòu)造形式 var myObj = new Ob...
摘要：前言本文主要介紹屬性事件和插槽這三個基礎(chǔ)概念使用方法及其容易被忽略的一些重要細(xì)節(jié)。至于如何改變，我們接下去詳細(xì)介紹單向數(shù)據(jù)流這個概念出現(xiàn)在組件通信。比如上例中在子組件中修改父組件傳遞過來的數(shù)組從而改變父組件的狀態(tài)。的一個核心思想是數(shù)據(jù)驅(qū)動。 前言 本文主要介紹屬性、事件和插槽這三個vue基礎(chǔ)概念、使用方法及其容易被忽略的一些重要細(xì)節(jié)。如果你閱讀別人寫的組件，也可以從這三個部分展開，它們...
摘要：年求職面經(jīng)及總結(jié)我的求職之路差不多走到盡頭了感覺真是精疲力盡了把這大半年的經(jīng)歷和面試總結(jié)寫下來希望能給和我一樣在求職路上煎熬的人一點幫助先說背景微電子科學(xué)與工程專業(yè)學(xué)過兩門和相關(guān)的課程語言和單片機這個專業(yè)的唯一好處就是大部分人并不知道這個專 18年求職面經(jīng)及總結(jié) 我的求職之路差不多走到盡頭了,感覺真是精疲力盡了.把這大半年的經(jīng)歷和面試總結(jié)寫下來,希望能給和我一樣在求職路上煎熬的人一點幫...
摘要：年求職面經(jīng)及總結(jié)我的求職之路差不多走到盡頭了感覺真是精疲力盡了把這大半年的經(jīng)歷和面試總結(jié)寫下來希望能給和我一樣在求職路上煎熬的人一點幫助先說背景微電子科學(xué)與工程專業(yè)學(xué)過兩門和相關(guān)的課程語言和單片機這個專業(yè)的唯一好處就是大部分人并不知道這個專 18年求職面經(jīng)及總結(jié) 我的求職之路差不多走到盡頭了,感覺真是精疲力盡了.把這大半年的經(jīng)歷和面試總結(jié)寫下來,希望能給和我一樣在求職路上煎熬的人一點幫...
閱讀 2575·2023-04-25 17:33
閱讀 652·2021-11-23 09:51
閱讀 2956·2021-07-30 15:32
閱讀 1404·2019-08-29 18:40
閱讀 1949·2019-08-28 18:19
閱讀 1470·2019-08-26 13:48
閱讀 2245·2019-08-23 16:48
閱讀 2280·2019-08-23 15:56
