百度前端学院学习：动态数据绑定（四）

Gilbertat 发布于2019-08-20 14:50 / 2457人阅读

摘要：模板的语法解析匹配实际数据替换模板拆分成两个主要是为了解决深对象的问题，目前看过别的通过都是通过并不是一个很好的方法。最后修改一下和函数

题目地址
源代码地址

任务分析

这个任务主要是通过解析模板，替换中间出现的属性，例子：


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

替换后：


    姓名：youngwind
    年龄：25

实现 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*)*}}|{{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()实际数据替换模板：

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

GPU云服务器云服务器前端学院 js动态绑定数据机器学习学院 js动态绑定数据可以用吗

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/81962.html

百度前端学院学习：动态数据绑定（三）

摘要：实现深层次数据变化如何逐层往上传播学习过的同学都知道，给一个元素绑定一个事件，这个元素的子元素触发这个事件，也会同样会触发它的所有父元素同样的事件。题目地址源代码地址处理上个任务的问题上个任务抛出了两个问题，一个是在初始化一个实例的时候如果传一个比较深的对象会被打平。把each和convert做出了一些修改： each()： each(obj, parents = []) { ...

codeGoogle 2019-08-20 14:42 评论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