代码

  1. class Watcher{
  2.     // 通过回调函数实现更新的数据通知到视图
  3.     constructor(expr, vm, cb){
  4.         this.expr = expr;
  5.         this.vm = vm;
  6.         this.cb = cb;
  7.         this.oldVal = this.getOldVal();
  8.     }
  9.     // 获取旧数据
  10.     getOldVal(){
  11.         // 在利用getValue获取数据调用getter()方法时先把当前观察者挂载
  12.         Dep.target = this;
  13.         const oldVal = compileUtil.getValue(this.expr, this.vm);
  14.         // 挂载完毕需要注销，防止重复挂载 (数据一更新就会挂载)
  15.         Dep.target = null;
  16.         return oldVal;
  17.     }
  18.     // 通过回调函数更新数据
  19.     update(){
  20.         const newVal = compileUtil.getValue(this.expr, this.vm);
  21.         if(newVal !== this.oldVal){
  22.             this.cb(newVal);
  23.         }
  24.     }
  25. }
  27. // Dep类存储watcher对象，并在数据变化时通知watcher
  28. class Dep{
  29.     constructor(){
  30.         this.watcherCollector = [];
  31.     }
  32.     // 添加watcher
  33.     addWatcher(watcher){
  34.         this.watcherCollector.push(watcher);
  35.     }
  36.     // 数据变化时通知watcher更新
  37.     notify(){
  38.         this.watcherCollector.forEach(w=>w.update());
  39.     }
  40. }
  42. // 定义观察者
  43. class Observer{
  44.     constructor(data){
  45.         this.observe(data);
  46.     }
  47.     // data是一个对象，可能嵌套其它对象，需要采用递归遍历的方式进行观察者绑定
  48.     observe(data){
  49.         if(data && typeof data === 'object'){
  50.             Object.keys(data).forEach(key =>{
  51.                 this.defineReactive(data, key, data[key]);
  52.             })
  53.         }
  54.     }
  55.     // 通过 object.defineProperty方法对对象属性进行劫持
  56.     defineReactive(obj, key, value){
  57.         // 递归观察
  58.         this.observe(value);
  59.         const dep = new Dep();
  60.         Object.defineProperty(obj, key, {
  61.             enumerable: true,
  62.             configurable: false,
  63.             get(){
  64.                 // 订阅数据变化时，往Dev中添加观察者
  65.                 Dep.target && dep.addWatcher(Dep.target);
  66.                 return value;
  67.             },
  68.             // 采用箭头函数在定义时绑定this的定义域
  69.             set: (newVal)=>{
  70.                 if(value === newVal) return;
  71.                 this.observe(newVal);
  72.                 value = newVal;
  73.                 // 通知watcher数据发生改变
  74.                 dep.notify();
  75.             }
  76.         })
  77.     }
  78. }
  80. // 编译模版具体执行
  81. const compileUtil = {
  82.     getValue(expr, vm){
  83.         // 处理 person.name 这种对象类型，取出真正的value
  84.         return expr.split('.').reduce((data,currentVal)=>{
  85.             return data[currentVal];
  86.         }, vm.$data)
  87.     },
  88.     setVal(expr, vm, inputValue){
  89.         expr.split('.').reduce((data,currentVal)=>{
  90.             data[currentVal] = inputValue;
  91.         }, vm.$data)
  92.     },
  93.     getContent(expr, vm){
  94.         // {{person.name}}--{{person.age}}
  95.         // 防止修改person.name使得所有值全部被替换
  96.         return expr.replace(/\{\{(.+?)\}\}/g, (...args)=>{
  97.             return this.getValue(args[1], vm);
  98.         });
  99.     },
  100.     text(node, expr, vm) {
  101.         let value;
  102.         if(expr.indexOf('{{')!==-1){
  103.             value = expr.replace(/\{\{(.+?)\}\}/g, (...args)=>{
  104.                 // text的 Watcher应在此绑定，因为是对插值{{}}进行双向绑定
  105.                 // Watcher的构造函数的 getOldVal()方法需要接受数据或者对象，而{{person.name}}不能接收
  106.                 new Watcher(args[1], vm, ()=>{
  107.                     this.updater.textUpdater(node, this.getContent(expr, vm));
  108.                 });
  109.                 return this.getValue(args[1], vm);
  110.             });
  111.         }else{
  112.             value = this.getValue(expr, vm);
  113.         }
  114.         this.updater.textUpdater(node, value);  
  115.     },
  116.     html(node, expr, vm) {
  117.         let value = this.getValue(expr, vm);
  118.         // html对应的 Watcher
  119.         new Watcher(expr, vm, (newVal)=>{
  120.             this.updater.htmlUpdater(node, newVal);
  121.         })
  122.         this.updater.htmlUpdater(node, value);
  123.     },
  124.     model(node, expr, vm) {
  125.         const value = this.getValue(expr, vm);
  126.         // v-model绑定对应的 Watcher, 数据驱动视图
  127.         new Watcher(expr, vm, (newVal)=>{
  128.             this.updater.modelUpdater(node, newVal);
  129.         });
  130.         // 视图 => 数据 => 视图
  131.         node.addEventListener('input', (e)=>{
  132.             this.setVal(expr, vm, e.target.value);
  133.         })
  134.         this.updater.modelUpdater(node, value);
  135.     },
  136.     on(node, expr, vm, detailStr) {
  137.         let fn = vm.$options.methods && vm.$options.methods[expr];
  138.         node.addEventListener(detailStr,fn.bind(vm), false);
  139.     },
  140.     bind(node, expr, vm, detailStr){
  141.         // v-on:href='...' => href='...'
  142.         node.setAttribute(detailStr, expr);
  143.     },
  144.     // 视图更新函数
  145.     updater: {
  146.         textUpdater(node, value) {
  147.             node.textContent = value;
  148.         },
  149.         htmlUpdater(node, value){
  150.             node.innerHTML = value;
  151.         },
  152.         modelUpdater(node, value){
  153.             node.value = value;
  154.         }
  155.     }
  157. }
  159. // 编译HTML模版对象
  160. class Compiler {
  161.     constructor(el, vm) {
  162.         this.el = this.isElementNode(el) ? el : document.querySelector(el);
  163.         this.vm = vm;
  164.         // 1. 将预编译的元素节点放入文档碎片对象中，避免DOM频繁的回流与重绘，提高渲染性能
  165.         const fragments = this.node2fragments(this.el);
  166.         // 2. 编译模版
  167.         this.compile(fragments);
  168.         // 3. 追加子元素到根元素
  169.         this.el.appendChild(fragments);
  170.     }
  171.     compile(fragments) {
  172.         // 1.获取子节点
  173.         const childNodes = fragments.childNodes;
  174.         // 2.递归循环编译
  175.         [...childNodes].forEach(child => {
  176.             // 如果是元素节点
  177.             if (this.isElementNode(child)) {
  178.                 this.compileElement(child);
  179.             } else {
  180.                 // 文本节点
  181.                 this.compileText(child);
  182.             }
  183.             //递归遍历
  184.             if(child.childNodes && child.childNodes.length){
  185.                 this.compile(child);
  186.             }
  187.         })
  188.     }
  189.     compileElement(node) {
  190.         let attributes = node.attributes;
  191.         // 对于每个属性进行遍历编译
  192.         // attributes是类数组，因此需要先转数组
  193.         [...attributes].forEach(attr => {
  194.             let {name,value} = attr; // v-text="msg"  v-html=htmlStr  type="text"  v-model="msg"
  195.             if (this.isDirector(name)) { // v-text  v-html  v-mode  v-bind  v-on:click v-bind:href=''
  196.                 let [, directive] = name.split('-');
  197.                 let [compileKey, detailStr] = directive.split(':');
  198.                 // 更新数据，数据驱动视图
  199.                 compileUtil[compileKey](node, value, this.vm, detailStr);
  200.                 // 删除有指令的标签属性 v-text v-html等，普通的value等原生html标签不必删除
  201.                 node.removeAttribute('v-' + directive);
  202.             }else if(this.isEventName(name)){
  203.                 // 如果是事件处理 @click='handleClick'
  204.                 let [, detailStr] = name.split('@');
  205.                 compileUtil['on'](node, value, this.vm, detailStr);
  206.                 node.removeAttribute('@' + detailStr);
  207.             }
  209.         })
  211.     }
  212.     compileText(node) {
  213.         // 编译文本中的{{person.name}}--{{person.age}}
  214.         const content = node.textContent;
  215.         if(/\{\{(.+?)\}\}/.test(content)){
  216.             compileUtil['text'](node, content, this.vm);
  217.         }
  218.     }
  219.     isEventName(attrName){
  220.         // 判断是否@开头
  221.         return attrName.startsWith('@');
  222.     }
  223.     isDirector(attrName) {
  224.         // 判断是否为Vue特性标签
  225.         return attrName.startsWith('v-');
  226.     }
  227.     node2fragments(el) {
  228.         // 创建文档碎片对象
  229.         const f = document.createDocumentFragment();
  230.         let firstChild;
  231.         while (firstChild = el.firstChild) {
  232.             f.appendChild(firstChild);
  233.         }
  234.         return f;
  235.     }
  236.     isElementNode(node) {
  237.         // 元素节点的nodeType属性为 1
  238.         return node.nodeType === 1;
  239.     }
  240. }
  243. class MVue {
  244.     constructor(options) {
  245.         // 初始元素与数据通过options对象绑定
  246.         this.$el = options.el;
  247.         this.$data = options.data;
  248.         this.$options = options;
  249.         // 通过Compiler对象对模版进行编译，例如{{}}插值、v-text、v-html、v-model等Vue语法
  250.         if (this.$el) {
  251.             // 1. 创建观察者
  252.             new Observer(this.$data);
  253.             // 2. 编译模版
  254.             new Compiler(this.$el, this);
  255.             // 3. 通过数据代理实现 this.person.name = '海贼王——路飞'功能，而不是this.$data.person.name = '海贼王——路飞'
  256.             this.proxyData(this.$data);
  257.         }
  258.     }
  259.      //用vm代理vm.$data
  260.      proxyData(data){
  261.         for(let key in data){
  262.             Object.defineProperty(this,key,{
  263.                 get(){
  264.                     return data[key];
  265.                 },
  266.                 set(newVal){
  267.                     data[key] = newVal;
  268.                 }
  269.             })
  270.         }
  271.     }
  272. }

参考

【1】mvvm
【2】ImitateVue