百度前端學(xué)院學(xué)習(xí)：動(dòng)態(tài)數(shù)據(jù)綁定（四）

Gilbertat 發(fā)布于2019-08-20 14:50 / 2483人閱讀

摘要：模板的語法解析匹配實(shí)際數(shù)據(jù)替換模板拆分成兩個(gè)主要是為了解決深對象的問題，目前看過別的通過都是通過并不是一個(gè)很好的方法。最后修改一下和函數(shù)

題目地址
源代碼地址

任務(wù)分析

這個(gè)任務(wù)主要是通過解析模板，替換中間出現(xiàn)的屬性，例子：


    姓名：{{user.name}}
    年齡：{{user.age}}

替換后：


    姓名：youngwind
    年齡：25

實(shí)現(xiàn) el 屬性：

主要修改一些constructor()就可以了：

constructor(json) {
  this.el = document.querySelector(json.el)
  ...
  this.html = ""

  this.each(json.data)
  ...
}

之前我們直接傳入一個(gè)對象就是data，現(xiàn)在我們需要這樣做：

const app = new Observer({
  el: "#app",
  data: {
    user: {
      name: "john",
      age: 19
    }
  }
})

解析 html 模板

解析 html 模板主要分兩塊，一個(gè)是解析模板，另外一個(gè)是用來替換數(shù)據(jù)。

templateMatch()模板的語法解析匹配：

templateMatch(temp, data) {
  this.html = temp
  
  temp.match(/{{w*(.w*)*}}|{{sw*(.w*)*s}}/g).forEach(item => {
    const key = item.slice(2, item.length - 2).trim()
    
    this.templateReplace(key, data, item)
  })
  
  this.el.innerHTML = this.html
  this.html = ""
}

templateReplace()實(shí)際數(shù)據(jù)替換模板：

templateReplace(key, data, template) {
  const index = key.indexOf(".")
  
  if (index > 0) {
    this.templateReplace(key.slice(index + 1), data[key.slice(0, index)], template)
  } else {
    console.log(template, data[key])
    this.html = this.html.replace(template, data[key]) 
  }
}

拆分成兩個(gè)主要是為了解決深對象的問題，目前看過別的通過都是通過eval()并不是一個(gè)很好的方法。

最后修改一下constructor()和setter函數(shù)：

constructor() {
  ...
  this.templateMatch(this.el.innerHTML, this.data)
  ...
}

convert() {
  ...
  
  Object.defineProperty(this.setData || this.data, key, {
    ...
    set: function (newValue) {
      ....
      
      this.templateMatch(this.el.innerHTML, this.data)
    }
  })
}

GPU云服務(wù)器云服務(wù)器前端學(xué)院 js動(dòng)態(tài)綁定數(shù)據(jù) 機(jī)器學(xué)習(xí)學(xué)院 js動(dòng)態(tài)綁定數(shù)據(jù)可以用嗎

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

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

相關(guān)文章

百度前端學(xué)院學(xué)習(xí)：動(dòng)態(tài)數(shù)據(jù)綁定（三）

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

codeGoogle 2019-08-20 14:42 評論0 收藏0
百度前端學(xué)院學(xué)習(xí)：動(dòng)態(tài)數(shù)據(jù)綁定（二）

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

changfeng1050 2019-08-20 14:39 評論0 收藏0
百度前端技術(shù)學(xué)院2017學(xué)習(xí)總結(jié)

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

pkwenda 2019-08-29 12:35 評論0 收藏0
百度前端技術(shù)學(xué)院2017學(xué)習(xí)總結(jié)

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

ky0ncheng 2019-08-20 16:28 評論0 收藏0
百度前端技術(shù)學(xué)院2017學(xué)習(xí)總結(jié)

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

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