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

資訊專欄INFORMATION COLUMN

百度前端學(xué)院學(xué)習(xí):動態(tài)數(shù)據(jù)綁定(二)

changfeng1050 / 2075人閱讀

摘要:在中添加一個用來存儲回調(diào)函數(shù)的變量實(shí)現(xiàn)和函數(shù)存儲的回調(diào)函數(shù)做法我是用一個對象去處理的,為屬性名,則是回調(diào)函數(shù)。

題目地址
源代碼地址

處理深度對象

題目有個要求是如果傳入的對象是比較深的對象,也就是 value 可以能是另外一個新的對象,也是要給那個對象的屬性加上 getter 和 setter 的,我的做法就是判斷每一個值是否是對象,然后在做一次遞歸處理。

each(obj) {
  Object.keys(obj).forEach(key => {
    // 如果值是一個對象的話
    if (Object.prototype.toString.call(obj[key]) === "[object Object]") {
      // 遞歸自身
      this.each(obj[key])
    } else {
      this.convert(key, obj[key])
    }
  })
}

這里用了Object.prototype.toString.call()來判斷值是什么類型,因?yàn)槭褂?b>typeof的話,object、array 和 null 都會返回 object,不是我想要的結(jié)果。

實(shí)現(xiàn) $watch

題目還有另外一個要求就是實(shí)現(xiàn)$watch的功能,用過 Vue 的同學(xué)都知道,我們可以用這個函數(shù)去監(jiān)聽一個值的變化,并且傳入一個回調(diào)函數(shù),如果值發(fā)生變話的話,就執(zhí)行回調(diào)函數(shù)。

constructor中添加一個用來存儲回調(diào)函數(shù)的變量:

...
this.watchProperties = {}
...

實(shí)現(xiàn)$watchemit函數(shù):

存儲 watch 的回調(diào)函數(shù)做法我是用一個對象去處理的,key 為屬性名,value 則是回調(diào)函數(shù)。

$watch(name, fn) {
  this.watchProperties[name] = fn
}

emit(name, val) {
  if (this.watchProperties[name] && typeof this.watchProperties[name] === "function") {
    this.watchProperties[name](val)
  }
}

convert中添加:

convert(key, value) {
    ...
    Object.defineProperty(this.setData || this.data, key, {
      ...
      set: function (newValue) {
        ...
        // 調(diào)用 emit 執(zhí)行 watchProperties 里的回調(diào)函數(shù)
        // key 為屬性名
        // newValue 為新設(shè)置的值
        that.emit(key, newValue)
        ...
      }
    })
  }

最后一步,暴露$watch方法:

constructor(json) {
    ...
    return {
      ...
      // 這里要注意,修改一下上下文的環(huán)境
      $watch: this.$watch.bind(this)
    }
  }

這里需要使用bind去修改執(zhí)行的時(shí)候上下的環(huán)境,否則無法訪問watchProperties

還沒完成的功能

$watch函數(shù)不能夠監(jiān)聽比較深的對象的屬性。

新建一個示例的時(shí)候,如果傳入一個深對象,會被打平:

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

console.log(app.data)
// 會輸出
/*
  [object Object] {
    a: 1,
    b: 2
  }
*/

文章版權(quán)歸作者所有,未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為,您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址:http://specialneedsforspecialkids.com/yun/81813.html

相關(guān)文章

  • 百度前端學(xué)院學(xué)習(xí)動態(tài)數(shù)據(jù)綁定(三)

    摘要:實(shí)現(xiàn)深層次數(shù)據(jù)變化如何逐層往上傳播學(xué)習(xí)過的同學(xué)都知道,給一個元素綁定一個事件,這個元素的子元素觸發(fā)這個事件,也會同樣會觸發(fā)它的所有父元素同樣的事件。 題目地址源代碼地址 處理上個任務(wù)的問題 上個任務(wù)拋出了兩個問題,一個是在初始化一個實(shí)例的時(shí)候如果傳一個比較深的對象會被打平。把each和convert做出了一些修改: each(): each(obj, parents = []) { ...

    codeGoogle 評論0 收藏0
  • 百度前端學(xué)院學(xué)習(xí)動態(tài)數(shù)據(jù)綁定(四)

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

    Gilbertat 評論0 收藏0
  • 百度前端技術(shù)學(xué)院2017學(xué)習(xí)總結(jié)

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

    pkwenda 評論0 收藏0
  • 百度前端技術(shù)學(xué)院2017學(xué)習(xí)總結(jié)

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

    ky0ncheng 評論0 收藏0
  • 百度前端技術(shù)學(xué)院2017學(xué)習(xí)總結(jié)

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

    Jingbin_ 評論0 收藏0

發(fā)表評論

0條評論

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