国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

【ife】動態數據綁定（三）自己的實現

fuyi501 / 3181人閱讀

摘要：實現方式在動態數據綁定二中需要實現一個事件系統，我的實現是在原型鏈上建立一個屬性保存所有需要綁定的事件名稱和觸發函數如下事件系統應該是能監聽所有的實例化對象綁定的函數，在判斷改寫和深度當中都會創建一個新的實例化對象，如果寫到上就無法通用了。

題目 
深層次數據變化如何逐層往上傳播?
let app2 = new Observer({
    name: {
        firstName: "shaofeng",
        lastName: "liang"
    },
    age: 25
});

app2.$watch("name", function (newName) {
    console.log("我的姓名發生了變化，可能是姓氏變了，也可能是名字變了。")
});

app2.data.name.firstName = "hahaha";
// 輸出：我的姓名發生了變化，可能是姓氏變了，也可能是名字變了。
app2.data.name.lastName = "blablabla";
// 輸出：我的姓名發生了變化，可能是姓氏變了，也可能是名字變了。
觀察到了嗎？firstName 和 lastName 作為 name 的屬性，其中任意一個發生變化，都會得出以下結論："name 發生了變化。"這種機制符合”事件傳播“機制，方向是從底層往上逐層傳播到頂層。


這現象想必你們也見過，比如：“點擊某一個DOM元素，相當于也其父元素和其所有祖先元素。”（當然，你可以手動禁止事件傳播） 所以，這里的本質是："瀏覽器內部實現了一個事件傳播的機制"，你有信心自己實現一個嗎？
我的代碼 
function Observer(obj) {
  this.data = obj; // 對象掛載點
  this.$p = Array.prototype.slice.call(arguments,1)[0] || "data"; // 實現事件冒泡儲存父級 名字
  this.transformAll(obj); // 對obj對象進行 遍歷， 然后調用convat 進行defineProperty改寫
}

Observer.prototype.transformAll = function(obj) {
  var keyarr = Object.keys(obj);
  for (var i=0,len=keyarr.length;i

題目鏈接、我的代碼、瀏覽地址(打開控制臺查看)。


實現方式

在動態數據綁定（二）中需要實現一個事件系統，我的實現是在原型鏈上建立一個content屬性保存所有需要綁定的事件名稱和觸發函數.如下：


Observer.prototype.content = {}


事件系統應該是能監聽所有的實例化對象綁定的函數，在判斷改寫和深度convat當中都會創建一個新的實例化對象，如果寫到this上就無法通用了。


還有一個痛點是如何知道父級對象的key值，好在函數里面對基本類型和對象類型的區分十分明了，只要在檢測到是對象類型的哪一條路上多傳入一個參數，傳入當前的屬性的key給下層，下層再利用這個key就好了。


想要得到冒泡，觸發事件的時候就一定要攜帶上父級的key信息，我使用了


    new Observer(value,this.$p + "." + key); 


    set: function(newval){
      var allkey = $p+ "." + key;
      console.log("你設置了 "+ key + ", " + "新的值為 " + newval);
      self.emit(allkey, newval);  // 觸發形式為 father.child    newval為傳入信息
      if (newval instanceof Object ) {
        new Observer(newval, allkey);  // 如果改寫為對象
      }
      val =  newval
    }


emit($p+ "." + key, newval),觸發的時候就變成了data.name.firstName的形式，傳入的$p一定是保存著所有上層的key值，接著再在emit函數內部解析一下 ，觸發data、name、firstName即可。


有個問題，現在函數的執行順序是由上到下了，明天寫個setTimeout，剛好可以加深理解js的任務循環機制?


寫的很亂，脖子和腰都在抗議了，抽空從第一個任務寫起來，今天先合電腦睡覺??

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/81838.html

相關文章

  • 百度前端技術學院2017學習總結

    摘要：向已被訪問的鏈接添加樣式。讓背景圖片大小水平方向擴大一倍，這樣才有移動與變化的空間。不足及改進總結來看，自己做得不夠，雖然也花了時間，不過能看出有敷衍的成分在。 一、前言 百度的前端技術學院IFE，2016年就聽說了，當時自己也報名，還組成隊伍了，不過自己一個任務也沒完成就結束了，遺憾... 關注了IFE，知道2017年2月有新的一期培訓，于是一直在等著報名，然后開始做里面發布的任務（...

    pkwenda 評論0 收藏0

  • 百度前端技術學院2017學習總結

    摘要：向已被訪問的鏈接添加樣式。讓背景圖片大小水平方向擴大一倍，這樣才有移動與變化的空間。不足及改進總結來看，自己做得不夠，雖然也花了時間，不過能看出有敷衍的成分在。 一、前言 百度的前端技術學院IFE，2016年就聽說了，當時自己也報名，還組成隊伍了，不過自己一個任務也沒完成就結束了，遺憾... 關注了IFE，知道2017年2月有新的一期培訓，于是一直在等著報名，然后開始做里面發布的任務（...

    ky0ncheng 評論0 收藏0

  • 百度前端技術學院2017學習總結

    摘要：向已被訪問的鏈接添加樣式。讓背景圖片大小水平方向擴大一倍，這樣才有移動與變化的空間。不足及改進總結來看，自己做得不夠，雖然也花了時間，不過能看出有敷衍的成分在。 一、前言 百度的前端技術學院IFE，2016年就聽說了，當時自己也報名，還組成隊伍了，不過自己一個任務也沒完成就結束了，遺憾... 關注了IFE，知道2017年2月有新的一期培訓，于是一直在等著報名，然后開始做里面發布的任務（...

    Jingbin_ 評論0 收藏0

  • IFE JS練習(二|三) 數組的sort,forEach,slice和filter方法

    摘要：返回表示保留該元素通過測試，則不保留。否則，的值在非嚴格模式下將是全局對象，嚴格模式下為。索引數組中正在處理的當前元素的索引。當執行回調函數時用作的值參考對象。是數組組所以要帶，用轉換為數值類型。 代碼塊: var aqiData = [ [北京, 90], [上海, 50], [福州, 10], [廣州, 50], [成都, 90], ...

    Aomine 評論0 收藏0

  • ife2018 零基礎學院 day 4

    摘要：類型選擇器又名元素選擇器類型選擇器又名元素選擇器在標準中，元素選擇器又稱為類型選擇器。個位在整個選擇器中每包含一個元素選擇器或偽元素就在該列中加分。第四天，背景邊框列表鏈接和更復雜的選擇器 背景，邊框，列表，鏈接相關屬性 背景 MDN 背景 W3School 背景 元素的背景是指，在元素內容、內邊距和邊界下層的區域。 屬性 描述 background-color 為背景設置...

    shinezejian 評論0 收藏0

發表評論

0條評論

最新活動
閱讀需要支付1元查看
<