vue-mvvm(第一篇)

2021-11-27

学习vue源码之——————–>MVMV(一)

最近对vue的mvvm很感兴趣,于是乎在B站学习了一丢丢动手实践了一下下~~

本篇主要实现的Complire

整体思路:

new Vue(optiones) 传入options
Complire编译html中使用的指令和mastach语法
为了减少重绘和回流先创建文档片段document.createDocumentFragment进行dom操作
利用正则解析mastach语法
针对不同的element使用不同的额处理(textnode,elementnode)
从传入的option.data中取数据,赋值

vue.js

class Vue {
  constructor(options) {
    this.$el = options.el;
    this.$data = options.data();
    this.$options= options;
    // 编译模块
    new Complier(this.$el, this);
  }
}

Complie.js

// Complier
class Complier {
  constructor(el, vm) {
    this.el = document.querySelector(el);
    this.vm = vm;
    // 1.为了减少重绘和回流 获取文档碎片
    const fragment = this.node2Fragment(this.el);

    // 2.编译mastach语法
    this.complier(fragment);

    // 3.把文档碎片追加到document里面
    this.el.appendChild(fragment);
  }

  //complier
  complier(node) {
    const childNodes = node.childNodes;
    [...childNodes].forEach((node) => {
      if (this.isElementNode(node)) {
        // 标签节点
        // console.log('tagnode:', node);
        // 开始编译标签节点
        this.complierElementNode(node);
      } else {
        // text节点
        // console.log('textnode:', node);
        // 开始编译text节点
        this.complierElementText(node);
      }
      // 递归遍历
      if (node.childNodes) {
        this.complier(node);
      }
    });
  }
  // 编译tab节点
  complierElementNode(node) {
    // 识别指令
    const attributes = node.attributes;
    [...attributes].forEach((attr) => {
      const { name, value } = attr;
      if (this.isDirective(name)) {
        // v-text v-html v-on:click
        const [, directive] = name.split('-'); // test html on:click
        // text html on
        const [dirName, enentName] = directive.split(':');
        // 根据不同的指令去编译
        comploierUtil[dirName](node, value, this.vm, enentName);
        // 编译完成删除指令  <div v-text="test">哈哈哈</div> ---> <div>哈哈哈</div>
        node.removeAttribute('v-' + dirName);
      }
    });
  }

  // 编译text节点
  complierElementText(node) {
    const content = node.textContent;
    if (/\{\{(.*)\}\}/.test(content)) {
      console.log(content);
      comploierUtil['text'](node, content, this.vm);
    }
  }

  //node节点转化问文档碎片
  node2Fragment(node) {
    const f = document.createDocumentFragment();
    while (node.firstChild) {
      f.appendChild(node.firstChild);
    }
    return f;
  }

  //是否是标签节点
  isElementNode(node) {
    return node.nodeType === 1;
  }

  //是否是指令
  isDirective(key) {
    return key.startsWith('v-');
  }
}

const comploierUtil = {
  getValue(expr, vm) {
    return expr.split('.').reduce((pre, current) => {
      return pre[current];
    }, vm.$data);
  },
  // expr ---> key --> value
  text(node, expr, vm) {
    if (expr.indexOf('{{') !== -1) {
      expr = expr.replace(/\{\{(.*)\}\}/, '$1');
    }
    let value = this.getValue(expr.trim(), vm);
    this.updater.textUpdater(node, value);
  },
  html(node, expr, vm) {
    let value = this.getValue(expr, vm);
    this.updater.htmlUpdater(node, value);
  },
  model(node, expr, vm) {
    let value = this.getValue(expr, vm);
    this.updater.modelUpdater(node, value);
  },
  on(node, expr, vm, eventName) {
    let fn = vm.$options.methods && vm.$options.methods[expr];
    node.addEventListener(eventName, fn);
  },

  //更新的函数
  updater: {
    textUpdater(node, value) {
      node.textContent = value;
    },
    htmlUpdater(node, value) {
      node.innerHTML = value;
    },
    modelUpdater(node, value) {
      node.value = value;
    },
  },
};

tesx:

index.html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div id="app">
        <span>{{name}}</span>
        <div>
            {{test}}
        </div>
        <ul v-on:click="add">
            <li>1</li>
            <li>2</li>
            <li>3</li>
        </ul>
        <div v-text="test"></div>
        <div v-text="person.age"></div>
        <div v-html="html"></div>
        <input type="text" name="" id="" v-model="number">
    </div>
    <script src="./js/Complier.js"></script>
    <script src="./js/Mvue.js"></script>
    <script>
        new Vue({
            el: '#app',
            data() {
                return {
                    name: 'wuyupei',
                    test: 'aaa',
                    html: '<h1>hello vue</h1>',
                    person: {
                        age: 20
                    },
                    number: 18338323927
                }
            },
            methods: {
                add() {
                    console.log(1);
                }
            }
        })
    </script>
</body>

</html>

效果: