Proxy 实现双向绑定

前端
Proxy 用于修改某些操作的默认行为，也可以理解为在目标对象之前架设一层拦截，外部所有的访问都必须先通过这层拦截，因此提供了一种机制，可以对外部的访问进行过滤和修改。

  1. <!DOCTYPE html>
  2. <html>
  4. <head>
  5.   <meta charset=“utf-8”>
  6.   <title>Proxy双向绑定</title>
  7. </head>
  9. <body>
  10.   <div id=“app”>
  11.     <input type=“text” v-model=“count”>
  12.     <div v-bind=“count”></div>
  13.   </div>
  14.   <script type=“text/javascript”>
  15.     class CustomFunc {
  16.       constructor(options) {
  17.         this.$el = document.querySelector(options.el);
  18.         this._binding = {};
  19.         this._observer(options.data);
  20.         this._compile(this.$el);
  21.       }
  22.       _pushWatcher(watcher) {
  23.         if (!this._binding[watcher.key]) {
  24.           this._binding[watcher.key] = [];
  25.         }
  26.         this._binding[watcher.key].push(watcher);
  27.       }
  28.       /*
  29.        observer的作用是能够对所有的数据进行监听操作，通过使用Proxy对象
  30.        中的set方法来监听，如有发生变动就会拿到最新值通知订阅者。
  31.       */
  32.       _observer(datas) {
  33.         const me = this;
  34.         const handler = {
  35.           set(target, key, value) {
  36.             const rets = Reflect.set(target, key, value);
  37.             me._binding[key].map(item => {
  38.               item.update();
  39.             });
  40.             return rets;
  41.           }
  42.         };
  43.         this.$data = new Proxy(datas, handler);
  44.       }
  45.       /*
  46.        指令解析器，对每个元素节点的指令进行扫描和解析，根据指令模板替换数据，以及绑定相对应的更新函数
  47.       */
  48.       _compile(root) {
  49.         const nodes = Array.prototype.slice.call(root.children);
  50.         const data = this.$data;
  51.         nodes.map(node => {
  52.           if (node.children && node.children.length) {
  53.             this._compile(node.children);
  54.           }
  55.           const $input = node.tagName.toLocaleUpperCase() === “INPUT”;
  56.           const $textarea = node.tagName.toLocaleUpperCase() === “TEXTAREA”;
  57.           const $vmodel = node.hasAttribute(‘v-model’);
  58.           // 如果是input框 或 textarea 的话，并且带有 v-model 属性的
  59.           if (($vmodel && $input) || ($vmodel && $textarea)) {
  60.             const key = node.getAttribute(‘v-model’);
  61.             this._pushWatcher(new Watcher(node, ‘value’, data, key));
  62.             node.addEventListener(‘input’, () => {
  63.               data[key] = node.value;
  64.             });
  65.           }
  66.           if (node.hasAttribute(‘v-bind’)) {
  67.             const key = node.getAttribute(‘v-bind’);
  68.             this._pushWatcher(new Watcher(node, ‘innerHTML’, data, key));
  69.           }
  70.         });
  71.       }
  72.     }
  73.     /*
  74.      watcher的作用是 链接Observer 和 Compile的桥梁，能够订阅并收到每个属性变动的通知，
  75.      执行指令绑定的响应的回调函数，从而更新视图。
  76.     */
  77.     class Watcher {
  78.       constructor(node, attr, data, key) {
  79.         this.node = node;
  80.         this.attr = attr;
  81.         this.data = data;
  82.         this.key = key;
  83.       }
  84.       update() {
  85.         this.node[this.attr] = this.data[this.key];
  86.       }
  87.     }
  88.   </script>
  89.   <script type=“text/javascript”>
  90.     new CustomFunc({
  91.       el: ‘#app’,
  92.       data: {
  93.         count: 0
  94.       }
  95.     });
  96.   </script>
  97. </body>
  99. </html>

本文链接地址: Proxy 实现双向绑定

发表回复

您的电子邮箱地址不会被公开。 必填项已用*标注