https://juejin.im/post/5a83c7125188257a836c3508

#多种方式实现MVVM，本章先讲解基于defineProperty来实现，也就是类似于实现vue的mvvm功能。本系列有3种实现方式，defineProperty（VUE），脏检查（angular）,原生js实现（发布订阅者模式）

github地址 查看源码 https://github.com/honeydlp/mvvm.git

#vue.js 则是采用数据劫持结合发布者-订阅者模式的方式，通过Object.defineProperty()来劫持各个属性的setter，getter，在数据变动时发布消息给订阅者，触发相应的监听回调。
先看原理图，再结合代码
带你手把手撸mvvm,再也不怕面试被问倒了 - 图1
代码贴图了，今天用掘金code 总是显示在一行，所以截图了，抱歉哈,代码在github上

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Title</title>
  6. </head>
  7. <body>
  8. <div id="app">
  9.     <input type="text" v-model="msg">
  10.     {{msg}}
  11. </div>
  12. <script>
  14. // vue MVVM 的实现
  15. function MVVM (opts) {
  16.     this.data = opts.data;
  17.     this.el = opts.el;
  18.     var data = this.data;
  19.     var me = this;
  20.     var el = document.querySelector(this.el);
  21.     observer(data, this);
  22.     var dom = nodeToFragment(el, this);
  23.     el.appendChild(dom);
  24. }
  26. // 将el内元素 编译成fragment dom 片段
  27. function nodeToFragment (node, vm) {
  28.     var frag = document.createDocumentFragment();
  29.     var child;
  30.     while (child = node.firstChild) {
  31.         complie(child, vm);
  32.         frag.append(child);
  33.     }
  34.     return frag;
  35. }
  39. // 解析指令，{{}}
  40. function complie (node, vm) {
  41.     var reg = /\{\{(.*)\}\}/;
  42.     if (node.nodeType == 1) { // 元素
  43.         var attrs = node.attributes; // 拿到属性键值对
  44.         for (var i = 0, len = attrs.length; i < len; i++) {
  45.             if (attrs[i].nodeName == 'v-model') {
  46.                 var name = attrs[i].nodeValue;
  47.                 node.addEventListener('input', function (e) {
  48.                     vm[name] = e.target.value;
  49.                 })
  50.                 node.value = vm[name];
  51.                 node.removeAttribute('v-model');
  52.                 new Watch(vm, node, name, 'input'); // 添加个监听器
  53.             }
  54.         }
  55.     }
  57.     if (node.nodeType == 3) { // 元素或属性中的文本内容
  58.         if (reg.test(node.nodeValue)) {
  59.             var name = RegExp.$1;
  60.             name = name.trim();
  61.             node.nodeType = 'text';
  62.             new Watch(vm, node, name, 'text');
  63.         }
  64.     }
  65. }
  68. // 监听器
  69. function Watch (vm, node, name, nodeType) {
  70.     Dep.target = this;
  71.     this.name = name;
  72.     this.node = node;
  73.     this.vm = vm;
  74.     this.nodeType = nodeType;
  75.     this.update();
  76.     Dep.target = null;
  77. }
  79. Watch.prototype = {
  80.     update: function () {
  81.         this.get();
  82.         if (this.nodeType == 'text') {
  83.             this.node.nodeValue = this.value;
  84.         }
  85.         if (this.nodeType == 'input') {
  86.             this.node.value = this.value;
  87.         }
  88.     },
  89.     get: function () {
  90.         this.value = this.vm[this.name];
  91.     }
  92. };
  94. // observer
  95. function observer (data, vm) {
  96.     Object.keys(data).forEach(function (key) {
  97.         defineReactive(vm, key, data[key]);
  98.     })
  99. }
  101. function defineReactive (vm, key, val) {
  102.     var dep = new Dep();
  103.     Object.defineProperty(vm, key, {
  104.         get: function () {
  105.             if (Dep.target) {
  106.                 dep.addSub(Dep.target);
  107.             }
  108.             return val;
  109.         },
  110.         set: function (newVal) {
  111.             if (newVal == val) return;
  112.             val = newVal;
  113.             dep.notify();
  114.         }
  115.     })
  116. }
  118. function Dep () {
  119.     this.subs = [];
  120. }
  122. Dep.prototype = {
  123.     addSub: function (sub) {
  124.         this.subs.push(sub);
  125.     },
  126.     notify: function () {
  127.         this.subs.forEach(function (sub) {
  128.             sub.update();
  129.         })
  130.     }
  131. }
  133. // MVVM调用
  134. var vm = new MVVM({
  135.     el: '#app',
  136.     data: {
  137.         'msg': 'hello word'
  138.     }
  139. });
  140. </script>
  141. </body>
  142. </html>

参考文档：

white 改写

  1. function MVVM(opts) {
  2.     this.el = opts.el;
  3.     this.data = opts.data;
  4.     observer(this.data, this);
  5.     const el = document.querySelector(this.el);
  6.     const dom = nodeToFragment(el, this);
  7.     el.appendChild(dom);
  8. }
  10. function nodeToFragment(node, vm) {
  11.     const frag = document.createDocumentFragment();
  12.     let child;
  14.     while (child = node.firstChild) {
  15.         node.removeChild(child)
  16.         compile(child, vm);
  17.         frag.append(child)
  18.     }
  20.     return frag;
  21. }
  23. function compile(node, vm) {
  24.     const reg = /\{\{(.*)\}\}/;
  26.     if (node.nodeType === 1) {
  27.         const attrs = node.attributes;
  29.         for (let i = 0, len = attrs.length; i < len; i++) {
  30.             if (attrs[i].nodeName === 'v-model') {
  31.                 const name = attrs[i].nodeValue;
  32.                 node.addEventListener('input', function (e) {
  33.                     vm[name] = e.target.value;
  34.                 });
  35.                 new Watcher(vm, node, name, 'input')
  36.                 node.removeAttribute('v-model');
  37.             }
  38.         }
  39.     } else if (node.nodeType === 3) {
  40.         if (reg.test(node.nodeValue)) {
  41.             let name = RegExp.$1;
  42.             name = name.trim();
  43.             new Watcher(vm, node, name, 'text')
  44.         }
  45.     }
  46. }
  48. function observer(data, vm) {
  49.     Object.keys(data).forEach(key => {
  50.         defineReactive(vm, key, data[key]);
  51.     })
  52. }
  54. function defineReactive(vm, key, value) {
  55.     const dep = new Dep();
  57.     Object.defineProperty(vm, key, {
  58.         get() {
  59.             if (Dep.target) {
  60.                 dep.addSub(Dep.target);
  61.             }
  62.             return value;
  63.         },
  64.         set(newValue) {
  65.             if (newValue === value) return;
  66.             value = newValue;
  67.             dep.notify();
  68.         },
  69.     })
  70. }
  72. class Dep {
  73.     subs = [];
  75.     addSub(sub) {
  76.         this.subs.push(sub);
  77.     }
  79.     notify() {
  80.         this.subs.forEach(sub => {
  81.             sub.update();
  82.         })
  83.     }
  84. }
  86. class Watcher {
  87.     constructor(vm, node, name, nodeType) {
  88.         Dep.target = this;
  89.         this.name = name;
  90.         this.node = node;
  91.         this.vm = vm;
  92.         this.nodeType = nodeType;
  93.         this.update();
  94.         Dep.target = null;
  95.     }
  97.     update() {
  98.         if (this.nodeType === 'text') {
  99.             this.node.nodeValue = this.vm[this.name];
  100.         }
  101.         if (this.nodeType === 'input') {
  102.             this.node.value = this.vm[this.name];
  103.         }
  104.     }
  105. }