資訊專欄INFORMATION COLUMN
摘要：實(shí)現(xiàn)深層次數(shù)據(jù)變化如何逐層往上傳播學(xué)習(xí)過(guò)的同學(xué)都知道，給一個(gè)元素綁定一個(gè)事件，這個(gè)元素的子元素觸發(fā)這個(gè)事件，也會(huì)同樣會(huì)觸發(fā)它的所有父元素同樣的事件。
處理上個(gè)任務(wù)的問題題目地址
源代碼地址
上個(gè)任務(wù)拋出了兩個(gè)問題，一個(gè)是在初始化一個(gè)實(shí)例的時(shí)候如果傳一個(gè)比較深的對(duì)象會(huì)被打平。把each和convert做出了一些修改：
each()：
each(obj, parents = []) {
Object.keys(obj).forEach(key => {
this.convert(key, obj[key], parents)
})
}
convert()：
convert(key, value, parents) {
...
// 判斷傳入的 value 是否一個(gè)對(duì)象
// 如果是一個(gè)對(duì)象的話，就在調(diào)用 each 函數(shù)
if (Object.prototype.toString.call(value) === "[object Object]") {
that.setData = value
that.each(value, [...parents, key])
that.setData = null
}
...
}
上面代碼多了一個(gè)parents，這個(gè)是用來(lái)實(shí)現(xiàn)這個(gè)任務(wù)的功能，也就是事件冒泡而用的。
實(shí)現(xiàn)深層次數(shù)據(jù)變化如何逐層往上傳播學(xué)習(xí)過(guò) dom 的同學(xué)都知道，給一個(gè)元素綁定一個(gè)事件，這個(gè)元素的子元素觸發(fā)這個(gè)事件，也會(huì)同樣會(huì)觸發(fā)它的所有父元素同樣的事件。
上面用parents來(lái)存儲(chǔ)比較深的對(duì)象，每個(gè)對(duì)象的父的 key 值，在 setter 函數(shù)里面同樣做出一些修改：
...
Object.defineProperty(this.setData || this.data, key, {
set: function (newValue) {
...
// parents 存的是上一級(jí) key
// 循環(huán) parents 實(shí)現(xiàn)逐層往上傳播
parents.forEach(item => {
that.emit(item, that.data[item])
})
...
}
})
...
另外一個(gè)問題
實(shí)現(xiàn)了深層次數(shù)據(jù)變化如何逐層往上傳播的功能后，發(fā)現(xiàn)一個(gè)問題。如果出事傳入一個(gè)這樣的對(duì)象：
let app = new Observer({
name: {
a: 1,
b: {
c: 2
}
}
})
試著輸出app.data的值發(fā)現(xiàn)：
{
b: {
c: 2
},
name: {
a: 1,
b: {
c: 2
}
}
}
因?yàn)槲覀冊(cè)?b>convert()函數(shù)里面實(shí)現(xiàn)深度對(duì)象處理有一些問題，只需要在添加一個(gè)判斷就可以了：
convert(key, value, parents) {
...
// parents 里有上級(jí)的 key 值，但是 setData 為 null 則直接跳出函數(shù)
if (parents.length && !this.setData) {
return
}
...
}
文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/81844.html
摘要：模板的語(yǔ)法解析匹配實(shí)際數(shù)據(jù)替換模板拆分成兩個(gè)主要是為了解決深對(duì)象的問題，目前看過(guò)別的通過(guò)都是通過(guò)并不是一個(gè)很好的方法。最后修改一下和函數(shù) 題目地址源代碼地址 任務(wù)分析 這個(gè)任務(wù)主要是通過(guò)解析模板，替換中間出現(xiàn)的屬性，例子： 姓名：{{user.name}} 年齡：{{user.age}} 替換后： 姓名：youngwind 年齡：25 實(shí)現(xiàn) el...
摘要：在中添加一個(gè)用來(lái)存儲(chǔ)回調(diào)函數(shù)的變量實(shí)現(xiàn)和函數(shù)存儲(chǔ)的回調(diào)函數(shù)做法我是用一個(gè)對(duì)象去處理的，為屬性名，則是回調(diào)函數(shù)。 題目地址源代碼地址 處理深度對(duì)象 題目有個(gè)要求是如果傳入的對(duì)象是比較深的對(duì)象，也就是 value 可以能是另外一個(gè)新的對(duì)象，也是要給那個(gè)對(duì)象的屬性加上 getter 和 setter 的，我的做法就是判斷每一個(gè)值是否是對(duì)象，然后在做一次遞歸處理。 each(obj) { ...
摘要：向已被訪問的鏈接添加樣式。讓背景圖片大小水平方向擴(kuò)大一倍，這樣才有移動(dòng)與變化的空間。不足及改進(jìn)總結(jié)來(lái)看，自己做得不夠，雖然也花了時(shí)間，不過(guò)能看出有敷衍的成分在。 一、前言 百度的前端技術(shù)學(xué)院IFE，2016年就聽說(shuō)了，當(dāng)時(shí)自己也報(bào)名，還組成隊(duì)伍了，不過(guò)自己一個(gè)任務(wù)也沒完成就結(jié)束了，遺憾... 關(guān)注了IFE，知道2017年2月有新的一期培訓(xùn)，于是一直在等著報(bào)名，然后開始做里面發(fā)布的任務(wù)（...
摘要：向已被訪問的鏈接添加樣式。讓背景圖片大小水平方向擴(kuò)大一倍，這樣才有移動(dòng)與變化的空間。不足及改進(jìn)總結(jié)來(lái)看，自己做得不夠，雖然也花了時(shí)間，不過(guò)能看出有敷衍的成分在。 一、前言 百度的前端技術(shù)學(xué)院IFE，2016年就聽說(shuō)了，當(dāng)時(shí)自己也報(bào)名，還組成隊(duì)伍了，不過(guò)自己一個(gè)任務(wù)也沒完成就結(jié)束了，遺憾... 關(guān)注了IFE，知道2017年2月有新的一期培訓(xùn)，于是一直在等著報(bào)名，然后開始做里面發(fā)布的任務(wù)（...
摘要：向已被訪問的鏈接添加樣式。讓背景圖片大小水平方向擴(kuò)大一倍，這樣才有移動(dòng)與變化的空間。不足及改進(jìn)總結(jié)來(lái)看，自己做得不夠，雖然也花了時(shí)間，不過(guò)能看出有敷衍的成分在。 一、前言 百度的前端技術(shù)學(xué)院IFE，2016年就聽說(shuō)了，當(dāng)時(shí)自己也報(bào)名，還組成隊(duì)伍了，不過(guò)自己一個(gè)任務(wù)也沒完成就結(jié)束了，遺憾... 關(guān)注了IFE，知道2017年2月有新的一期培訓(xùn)，于是一直在等著報(bào)名，然后開始做里面發(fā)布的任務(wù)（...
閱讀 2308·2021-11-24 09:38
閱讀 2228·2021-11-22 14:44
閱讀 1166·2021-07-29 13:48
閱讀 2626·2019-08-29 13:20
閱讀 1126·2019-08-29 11:08
閱讀 2067·2019-08-26 10:58
閱讀 1271·2019-08-26 10:55
閱讀 3168·2019-08-26 10:39
