题目地点
源代码地点

使命分析

这个使命主如果经由过程剖析模板，替代中心涌现的属性，例子：

<div id="app">
    <p>姓名：{{user.name}}</p>
    <p>岁数：{{user.age}}</p>
</div>

替代后：

<div id="app">
    <p>姓名：youngwind</p>
    <p>岁数：25</p>
</div>

完成 el 属性：

重要修正一些constructor()就能够了：

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

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

之前我们直接传入一个对象就是data，如今我们须要如许做：

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

剖析 html 模板

剖析 html 模板重要分两块，一个是剖析模板，别的一个是用来替代数据。

templateMatch()模板的语法剖析婚配：

templateMatch(temp, data) {
  this.html = temp
  
  temp.match(/{{\w*(.\w*)*}}|{{\s\w*(.\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()现实数据替代模板：

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]) 
  }
}

拆分红两个主如果为了处理深对象的题目，现在看过别的经由过程都是经由过程eval()并非一个很好的要领。

末了修正一下constructor()和setter函数：

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)
    }
  })
}