vue.js源码练习

桃扇骨 2021-07-26 14:40 396阅读 0赞

html

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
    </head>
    <body>
        <div id="app">
            <input type="text" v-model="school.name">
            <div>{
       {school.name}}</div>
            <div>{
       {school.age}}</div>
            <div>{
       {getName}}</div>
            <ul>
                <li>1</li>
                <li>1</li>
            </ul>
            <button v-on:click="change">点我</button>
            <div v-html="message"></div>
        </div>
    </body>
    <script src="vue.js"></script>
    
    <script>
        let vm = new Vue({
            el:'#app',
            data:{
                school:{
                    name:'张三',
                    age:10
                },
                message:'信息'
            },
            computed:{
                getName(){
                    return this.school.name+'李四'
                }
            },
            methods:{
                change(){
                    return this.school.name='王五'
                }
            },
            
        })
    </script>
    </html>

vue.js

// 订阅者
    class Dep {
      constructor() {
        this.subs = []; // 存放所有的watcher
      }
      // 订阅
      addSub(watcher) {
        this.subs.push(watcher);
      }
      // 发布
      notify() {
        this.subs.forEach(watcher => watcher.update());
      }
    }
    // 观察者 (发布订阅)
    class Watcher {
      constructor(vm, expr, cb) {
        this.vm = vm;
        this.expr = expr;
        this.cb = cb;
        // 默认先存放一个老值
        this.oldValue = this.get();
      }
      get() {
        Dep.target = this; // 先把自己放在target上
        // 取值 把这个观察者和数据关联起来
        let value = CompileUtil.getVal(this.vm, this.expr);
        Dep.target = null;
        return value;
      }
      update() {
        // 更新操作 数据变化后 会调用观察者的update方法
        let newValue = CompileUtil.getVal(this.vm, this.expr);
        if (newValue !== this.oldValue) {
          this.cb(newValue);
        }
      }
    }
    class Observer {
      // 实现数据劫持功能
      constructor(data) {
        this.observer(data);
      }
      observer(data) {
        if (data && typeof data === "object") {
          // 如果是对象
          for (let key in data) {
            this.defineReactive(data, key, data[key]);
          }
        }
      }
      defineReactive(obj, key, value) {
        this.observer(value); // 如果多个对象嵌套,递归
        let dep = new Dep(); // 给每一个属性 都加上具有发布订阅的功能
        Object.defineProperty(obj, key, {
          get() {
            // 创建watcher时 会渠道对应的内容， 并且把watcher放到了全局上
            Dep.target && dep.addSub(Dep.target);
            return value;
          },
          set: newValue => {
            this.observer(newValue); // 当赋值新对象的时候,把新对象改成get set模式
            value = newValue;
            dep.notify();
          }
        });
      }
    }
    // 把实例属性data编译到页面上
    class Compiler {
      constructor(el, vm) {
        // 判断el属性 是不是一个原色 如果不是元素 那就获取元素
        this.el = this.isElementNode(el) ? el : document.querySelector(el);
        // 把当前节点中的原色获取到 放到内存中
        this.vm = vm;
        let fragment = this.node2framnet(this.el);
        // 把节点中的内容进行替换
    
        // 编译模板 用数据编译
        this.compile(fragment);
        // 把内容再塞进页面中
        this.el.appendChild(fragment);
      }
      isDirective(attrName) {
        return attrName.startsWith("v-");
      }
      // 编译元素
      compileElement(node) {
        let attributes = node.attributes;
        [...attributes].forEach(attr => {
          let { name, value: expr } = attr;
          if (this.isDirective(name)) {
            let [, directive] = name.split("-"); // v-model v-html
            let [directiveName, eventName] = directive.split(":");
            // 需要调用不同的指令来处理
            CompileUtil[directiveName](node, expr, this.vm, eventName);
          }
        });
      }
      // 编译文本
      compileText(node) {
        // 判断当前文本节点中的内容是否包含{
       {}}
        let content = node.textContent;
        if (/\{\{(.+?)\}\}/.test(content)) {
          // 文本节点
          CompileUtil["text"](node, content, this.vm);
        }
      }
      // 用来编译内存中的模板
      compile(node) {
        let childNodes = node.childNodes;
        [...childNodes].forEach(child => {
          if (this.isElementNode(child)) {
            this.compileElement(child);
            // 如果是元素的话需要把自己传进去遍历子节点
            this.compile(child);
          } else {
            this.compileText(child);
          }
        });
      }
      // 把节点移入到内存中
      node2framnet(node) {
        // 创建一个文档碎片
        let fragment = document.createDocumentFragment();
        let firstChild;
        while ((firstChild = node.firstChild)) {
          fragment.appendChild(firstChild);
        }
        return fragment;
      }
      isElementNode(node) {
        // 是不是元素节点
        return node.nodeType === 1;
      }
    }
    CompileUtil = {
      // 根据表达式取到对应的数据
      getVal(vm, expr) {
        return expr.split(".").reduce((data, current) => {
          return data[current];
        }, vm.$data);
      },
      setValue(vm, expr, value) {
        return expr.split(".").reduce((data, current, index, arr) => {
          if (index === arr.length - 1) {
            return (data[current] = value);
          }
          return data[current];
        }, vm.$data);
      },
      model(node, expr, vm) {
        // node是节点 expr 是表达式 vm是当前实例
        // 给输入框赋予value属性 node.value = xxx
        let fn = this.updater["modelUpdater"];
        new Watcher(vm, expr, newValue => {
          // 给输入框添加一个观察者 如果数据更新会触发此方法 给输入框赋值
          fn(node, newValue);
        });
        node.addEventListener("input", e => {
          let value = e.target.value;
          console.log(value);
          this.setValue(vm, expr, value);
        });
        let value = this.getVal(vm, expr);
        fn(node, value);
      },
      html(node, expr, vm) {
        let fn = this.updater["htmlUpdater"];
        new Watcher(vm, expr, newValue => {
          fn(node, this.getContentValue(vm, expr)); // 返回了一个全新的字符串
        });
        let value = this.getVal(vm, expr);
        fn(node, value);
      },
      getContentValue(vm, expr) {
        return expr.replace(/{\{(.+?)\}\}/g, (...args) => {
          return this.getVal(vm, args[1]);
        });
      },
      on(node, expr, vm, eventName) {
        node.addEventListener(eventName, e => {
          vm[expr].call(vm, e); //this.change
        });
      },
      text(node, expr, vm) {
        let fn = this.updater["textUpdater"];
        let content = expr.replace(/\{\{(.+?)\}\}/g, (...args) => {
          new Watcher(vm, args[1], newValue => {
            fn(node, this.getContentValue(vm, expr)); // 返回了一个全新的字符串
          });
          return this.getVal(vm, args[1]);
        });
        fn(node, content);
      },
      bind() {},
      updater: {
        modelUpdater(node, value) {
          node.value = value;
        },
        htmlUpdater(node, value) {
          node.innerHTML = value;
        },
        textUpdater(node, value) {
          node.textContent = value;
        }
      }
    };
    class Vue {
      constructor(options) {
        this.$el = options.el;
        this.$data = options.data;
        this.computed = options.computed;
        this.methods = options.methods;
        if (this.$el) {
          // 把数据全部转化成Object.defineProperty来定义
          new Observer(this.$data);
    
          for (let key in this.computed) {
            Object.defineProperty(this.$data, key, {
              get: () => {
                return this.computed[key].call(this);
              }
            });
          }
          for (let key in this.methods) {
            Object.defineProperty(this, key, {
              get: () => {
                return this.methods[key];
              }
            });
          }
          // 把数据获取操作 vm上的取值操作 都代理到 vm.$data
          this.proxyVm(this.$data);
          // 编译末班
          new Compiler(this.$el, this);
        }
      }
      proxyVm(data) {
        for (let key in data) {
          Object.defineProperty(this, key, {
            get() {
              return data[key];
            }
          });
        }
      }
    }