60行代码 | Proxy实现一个数据驱动简易DEMO

时间 2020-04-09

标签代码 proxy 实现一个数据驱动简易 demo 繁體版

原文原文链接

运行截图

本文能作的

带你了解一下Proxy的使用
了解经过插值表达式怎么实现简易版的数据驱动
代码仅是简单Demo，参考了50行代码的MVVM，感觉闭包的艺术，一篇好文章，由于时间，沉底了，掏出来再学习一下~

<!DOCTYPE html>
<html lang="zh-CN">

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>pVue-proxy-mvvm</title>
</head>

<body>
  <div id="app">
    <p>hello, {{ name }}</p>
    <div>
      <span>author: {{ author }}</span>
      <span style="margin-left: 24px">time: {{ time }}</span>
    </div>
  </div>

  <script> // 当初始的 HTML 文档被彻底加载和解析完成以后,DOMContentLoaded 事件被触发, 无需等待样式表、图像和子框架的完成加载。 document.addEventListener("DOMContentLoaded", () => { const vm = new pVue({ el: "#app", data: { name: "Proxy", time: new Date(), author: "arley", }, }) for (let i = 0; i < 10; i++) { setTimeout(() => { this.data.name = `pVue, update: ${i}` // this === window }, 200 * (i + 1)) } }) class pVue { constructor(options) { const { el, data } = options this.options = options this._nodes = {} // 存在插值表达式的节点 window.data = this.onProxy(data) // 监听数据变化 this.render(document.querySelector(el)) // 首次替换插值表达式为data内的初始值 } onProxy(data) { const that = this const handler = { set(target, property, value, receiver) { // 监听到值变化，再一次替换插值表达式为新值 that._nodes[property].node.innerHTML = that._nodes[property].defaultData.replace( new RegExp(`{{\\s*${property}\\s*}}`, "g"), value ) return Reflect.set(target, property, value) }, } return new Proxy(data, handler) } render(node) { Array.prototype.forEach.call(node.childNodes, (child) => { if ( !child.firstElementChild && /\{\{(.+?)\}\}/.test(child.innerHTML) ) { const key = RegExp.$1.trim() this._nodes[key] = { // 保存含有插值的dom节点 和 本来的插值表达式内容 node: child, defaultData: child.innerHTML } // 替换插值表达式为data的真正内容 child.innerHTML = child.innerHTML.replace( new RegExp(`{{\\s*${key}\\s*}}`, "g"), this.options.data[key] ) } else if (child.firstElementChild) { // 当前节点下还有其余节点 this.render(child) } }) } } </script>
</body>

</html>
复制代码

结尾讨论

Vue中的MVVM和Vue的对应关系究竟是什么样子的呐？由于看到了不少不一样的版本，有疑惑。javascript

M: xxx
V: xxx
VM: xxx