百度前端學院學習：動態數據綁定（三）

codeGoogle 發布于2019-08-20 14:42 / 1352人閱讀

摘要：實現深層次數據變化如何逐層往上傳播學習過的同學都知道，給一個元素綁定一個事件，這個元素的子元素觸發這個事件，也會同樣會觸發它的所有父元素同樣的事件。

題目地址
源代碼地址

處理上個任務的問題

上個任務拋出了兩個問題，一個是在初始化一個實例的時候如果傳一個比較深的對象會被打平。把each和convert做出了一些修改：

each()：

each(obj, parents = []) {
  Object.keys(obj).forEach(key => {
    this.convert(key, obj[key], parents)
  })
}

convert()：

convert(key, value, parents) {
  ...

  // 判斷傳入的 value 是否一個對象
  // 如果是一個對象的話，就在調用 each 函數
  if (Object.prototype.toString.call(value) === "[object Object]") {
    that.setData = value
    that.each(value, [...parents, key])
    that.setData = null
  }

  ...
}

上面代碼多了一個parents，這個是用來實現這個任務的功能，也就是事件冒泡而用的。

實現深層次數據變化如何逐層往上傳播

學習過 dom 的同學都知道，給一個元素綁定一個事件，這個元素的子元素觸發這個事件，也會同樣會觸發它的所有父元素同樣的事件。

上面用parents來存儲比較深的對象，每個對象的父的 key 值，在 setter 函數里面同樣做出一些修改：

...
Object.defineProperty(this.setData || this.data, key, {
  set: function (newValue) {
    ...

    // parents 存的是上一級 key
    // 循環 parents 實現逐層往上傳播
    parents.forEach(item => {
      that.emit(item, that.data[item])
    })
    
    ...
  }
})
...

另外一個問題

實現了深層次數據變化如何逐層往上傳播的功能后，發現一個問題。如果出事傳入一個這樣的對象：

let app = new Observer({
  name: {
    a: 1,
    b: {
      c: 2 
    }
  }
})

試著輸出app.data的值發現：

{
  b: {
    c: 2
  },
  name: {
    a: 1,
    b: {
      c: 2 
    }
  }
}

因為我們在convert()函數里面實現深度對象處理有一些問題，只需要在添加一個判斷就可以了：

convert(key, value, parents) {
  ...

  // parents 里有上級的 key 值，但是 setData 為 null 則直接跳出函數
  if (parents.length && !this.setData) {
    return
  }

  ...
}

云服務器 GPU云服務器前端學院 js動態綁定數據機器學習學院 js動態綁定數據可以用嗎

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

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

百度前端學院學習：動態數據綁定（四）

摘要：模板的語法解析匹配實際數據替換模板拆分成兩個主要是為了解決深對象的問題，目前看過別的通過都是通過并不是一個很好的方法。最后修改一下和函數題目地址源代碼地址任務分析這個任務主要是通過解析模板，替換中間出現的屬性，例子：姓名：{{user.name}} 年齡：{{user.age}} 替換后：姓名：youngwind 年齡：25 實現 el...

Gilbertat 2019-08-20 14:50 評論0 收藏0
百度前端學院學習：動態數據綁定（二）

摘要：在中添加一個用來存儲回調函數的變量實現和函數存儲的回調函數做法我是用一個對象去處理的，為屬性名，則是回調函數。題目地址源代碼地址處理深度對象題目有個要求是如果傳入的對象是比較深的對象，也就是 value 可以能是另外一個新的對象，也是要給那個對象的屬性加上 getter 和 setter 的，我的做法就是判斷每一個值是否是對象，然后在做一次遞歸處理。 each(obj) { ...

changfeng1050 2019-08-20 14:39 評論0 收藏0
百度前端技術學院2017學習總結

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

pkwenda 2019-08-29 12:35 評論0 收藏0
百度前端技術學院2017學習總結

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

ky0ncheng 2019-08-20 16:28 評論0 收藏0
百度前端技術學院2017學習總結

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

Jingbin_ 2019-08-01 16:49 評論0 收藏0