資訊專欄INFORMATION COLUMN
摘要：實現(xiàn)方式在動態(tài)數(shù)據(jù)綁定二中需要實現(xiàn)一個事件系統(tǒng)，我的實現(xiàn)是在原型鏈上建立一個屬性保存所有需要綁定的事件名稱和觸發(fā)函數(shù)如下事件系統(tǒng)應(yīng)該是能監(jiān)聽所有的實例化對象綁定的函數(shù)，在判斷改寫和深度當(dāng)中都會創(chuàng)建一個新的實例化對象，如果寫到上就無法通用了。
題目
深層次數(shù)據(jù)變化如何逐層往上傳播?
let app2 = new Observer({
name: {
firstName: "shaofeng",
lastName: "liang"
},
age: 25
});
app2.$watch("name", function (newName) {
console.log("我的姓名發(fā)生了變化，可能是姓氏變了，也可能是名字變了。")
});
app2.data.name.firstName = "hahaha";
// 輸出：我的姓名發(fā)生了變化，可能是姓氏變了，也可能是名字變了。
app2.data.name.lastName = "blablabla";
// 輸出：我的姓名發(fā)生了變化，可能是姓氏變了，也可能是名字變了。
我的代碼觀察到了嗎？firstName 和 lastName 作為 name 的屬性，其中任意一個發(fā)生變化，都會得出以下結(jié)論："name 發(fā)生了變化。"這種機制符合”事件傳播“機制，方向是從底層往上逐層傳播到頂層。
這現(xiàn)象想必你們也見過，比如：“點擊某一個DOM元素，相當(dāng)于也其父元素和其所有祖先元素。”（當(dāng)然，你可以手動禁止事件傳播） 所以，這里的本質(zhì)是："瀏覽器內(nèi)部實現(xiàn)了一個事件傳播的機制"，你有信心自己實現(xiàn)一個嗎？
function Observer(obj) {
this.data = obj; // 對象掛載點
this.$p = Array.prototype.slice.call(arguments,1)[0] || "data"; // 實現(xiàn)事件冒泡儲存父級 名字
this.transformAll(obj); // 對obj對象進行 遍歷， 然后調(diào)用convat 進行defineProperty改寫
}
Observer.prototype.transformAll = function(obj) {
var keyarr = Object.keys(obj);
for (var i=0,len=keyarr.length;i
題目鏈接、我的代碼、瀏覽地址(打開控制臺查看)。
實現(xiàn)方式
在動態(tài)數(shù)據(jù)綁定（二）中需要實現(xiàn)一個事件系統(tǒng)，我的實現(xiàn)是在原型鏈上建立一個content屬性保存所有需要綁定的事件名稱和觸發(fā)函數(shù).如下：
Observer.prototype.content = {}
事件系統(tǒng)應(yīng)該是能監(jiān)聽所有的實例化對象綁定的函數(shù)，在判斷改寫和深度convat當(dāng)中都會創(chuàng)建一個新的實例化對象，如果寫到this上就無法通用了。
還有一個痛點是如何知道父級對象的key值，好在函數(shù)里面對基本類型和對象類型的區(qū)分十分明了，只要在檢測到是對象類型的哪一條路上多傳入一個參數(shù)，傳入當(dāng)前的屬性的key給下層，下層再利用這個key就好了。
想要得到冒泡，觸發(fā)事件的時候就一定要攜帶上父級的key信息，我使用了
new Observer(value,this.$p + "." + key);
set: function(newval){
var allkey = $p+ "." + key;
console.log("你設(shè)置了 "+ key + ", " + "新的值為 " + newval);
self.emit(allkey, newval); // 觸發(fā)形式為 father.child newval為傳入信息
if (newval instanceof Object ) {
new Observer(newval, allkey); // 如果改寫為對象
}
val = newval
}
emit($p+ "." + key, newval),觸發(fā)的時候就變成了data.name.firstName的形式，傳入的$p一定是保存著所有上層的key值，接著再在emit函數(shù)內(nèi)部解析一下 ，觸發(fā)data、name、firstName即可。
有個問題，現(xiàn)在函數(shù)的執(zhí)行順序是由上到下了，明天寫個setTimeout，剛好可以加深理解js的任務(wù)循環(huán)機制?
寫的很亂，脖子和腰都在抗議了，抽空從第一個任務(wù)寫起來，今天先合電腦睡覺??
文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/81838.html
摘要：向已被訪問的鏈接添加樣式。讓背景圖片大小水平方向擴大一倍，這樣才有移動與變化的空間。不足及改進總結(jié)來看，自己做得不夠，雖然也花了時間，不過能看出有敷衍的成分在。 一、前言 百度的前端技術(shù)學(xué)院IFE，2016年就聽說了，當(dāng)時自己也報名，還組成隊伍了，不過自己一個任務(wù)也沒完成就結(jié)束了，遺憾... 關(guān)注了IFE，知道2017年2月有新的一期培訓(xùn)，于是一直在等著報名，然后開始做里面發(fā)布的任務(wù)（...
摘要：向已被訪問的鏈接添加樣式。讓背景圖片大小水平方向擴大一倍，這樣才有移動與變化的空間。不足及改進總結(jié)來看，自己做得不夠，雖然也花了時間，不過能看出有敷衍的成分在。 一、前言 百度的前端技術(shù)學(xué)院IFE，2016年就聽說了，當(dāng)時自己也報名，還組成隊伍了，不過自己一個任務(wù)也沒完成就結(jié)束了，遺憾... 關(guān)注了IFE，知道2017年2月有新的一期培訓(xùn)，于是一直在等著報名，然后開始做里面發(fā)布的任務(wù)（...
摘要：向已被訪問的鏈接添加樣式。讓背景圖片大小水平方向擴大一倍，這樣才有移動與變化的空間。不足及改進總結(jié)來看，自己做得不夠，雖然也花了時間，不過能看出有敷衍的成分在。 一、前言 百度的前端技術(shù)學(xué)院IFE，2016年就聽說了，當(dāng)時自己也報名，還組成隊伍了，不過自己一個任務(wù)也沒完成就結(jié)束了，遺憾... 關(guān)注了IFE，知道2017年2月有新的一期培訓(xùn)，于是一直在等著報名，然后開始做里面發(fā)布的任務(wù)（...
摘要：返回表示保留該元素通過測試，則不保留。否則，的值在非嚴格模式下將是全局對象，嚴格模式下為。索引數(shù)組中正在處理的當(dāng)前元素的索引。當(dāng)執(zhí)行回調(diào)函數(shù)時用作的值參考對象。是數(shù)組組所以要帶，用轉(zhuǎn)換為數(shù)值類型。 代碼塊: var aqiData = [ [北京, 90], [上海, 50], [福州, 10], [廣州, 50], [成都, 90], ...
摘要：類型選擇器又名元素選擇器類型選擇器又名元素選擇器在標準中，元素選擇器又稱為類型選擇器。個位在整個選擇器中每包含一個元素選擇器或偽元素就在該列中加分。第四天，背景邊框列表鏈接和更復(fù)雜的選擇器 背景，邊框，列表，鏈接相關(guān)屬性 背景 MDN 背景 W3School 背景 元素的背景是指，在元素內(nèi)容、內(nèi)邊距和邊界下層的區(qū)域。 屬性 描述 background-color 為背景設(shè)置...
閱讀 2416·2021-11-11 16:54
閱讀 1219·2021-09-22 15:23
閱讀 3660·2021-09-07 09:59
閱讀 2010·2021-09-02 15:41
閱讀 3294·2021-08-17 10:13
閱讀 3061·2019-08-30 15:53
閱讀 1244·2019-08-30 13:57
閱讀 1216·2019-08-29 15:16
