原理:

实现响应式需要: 1.数据联动(双向绑定) 2.需要捕获到修改
实现原理: 发布订阅 + 数据劫持 Object.defineProperty
双向绑定通过Object.defineProperty ,但要实现响应式还缺少通知,于是加入一个发布订阅

初始化加载:
使用变量的模板 —-> 生成虚拟Dom —->生成真实Dom
更新时:
劫持数据(data) —>watcher(可以看做是整个data) —-发布—> 使用变量的模板 —-> 更新虚拟Dom —->更新真实
image.png

代码

  1. <body>
  2.   <div id="app">
  3.     订阅视图1-<span class="box-1"></span>
  4.     订阅视图2-<span class="box-2"></span>
  5.   </div>
  6. </body>
  7. <script>
  8.   // 订阅器模型
  9.   let Dep = {
  10.     clientList: {}, //容器
  11.     //添加订阅 key: 唯一id, fn: 做什么事
  12.     listen: function (key, fn) {
  13.       //(短路表达式)是否添加过订阅 没有则为[] 并添加执行事件到clientList容器 统一执行
  14.       (this.clientList[key] || (this.clientList[key] = [])).push(fn)
  15.     },
  16.     //发布
  17.     trigger: function () {
  18.       //不接收参数 而是通过arguments 此处转换为真数组Array.prototype.slice.call(arguments);
  19.       //shift() 方法从数组中删除第一个元素，并返回该元素的值
  20.       let key = Array.prototype.shift.call(arguments);
  22.       //获取订阅的事件
  23.       let fns = this.clientList[key];
  24.       //如果没有事件
  25.       if (!fns || fns.length === 0) {
  26.         return false;
  27.       }
  28.       //执行事件
  29.       //for循环简写方式 定义变量i和fn 
  30.       //for (let i = 0, fn; fn = fns[i++];) {
  31.         //fn.apply(this, arguments)
  32.       //}
  33.       for (let i = 0; i < fns.length; i++) {
  34.         fns[i].apply(this, arguments)
  35.       }
  36.     }
  37.   }
  39.   //数据劫持
  40.   let dataHi = function ({
  41.     data,
  42.     tag,
  43.     datakey,
  44.     selector
  45.   }) {
  46.     let value = '';
  47.     //获取目标元素
  48.     let el = document.querySelector(selector);
  50.     Object.defineProperty(data, datakey, {
  51.       get: function () {
  52.         return value
  53.       },
  54.       set: function (val) {
  55.         value = val
  56.         //发布
  57.         Dep.trigger(tag, val)
  58.       }
  59.     })
  61.     //先订阅 后发布
  62.     //订阅 tag=目标元素 
  63.     Dep.listen(tag, function (text) {
  64.       el.innerText = text;
  65.     })
  66.   }
  69.     //调用
  70.   let obj = {};
  72.   dataHi({
  73.     data: obj,
  74.     tag: 'view-1',
  75.     datakey: 'one',
  76.     selector: '.box-1'
  77.   })
  79.   dataHi({
  80.     data: obj,
  81.     tag: 'view-2',
  82.     datakey: 'two',
  83.     selector: '.box-2'
  84.   })
  86.   //初次渲染 一次
  87.   obj.one = '这是视图1'
  88.   obj.two = '这是视图2'
  90.   //更新时 劫持数据,更新这赋值重新渲染 N次
  92. </script>

image.png