关于前端:微型Vue框架构建Part3Mount方法实现

• 如何给Vue对象的原型链增加$Mount办法initMout
• 为实在节点生成虚构DOM，具体实现办法contrucVNode
• 定义虚构Node节点类, VNode
• $Mount办法实现概览

相干链接

• PS： node节点的属性和办法
• PS：nodeType的值有哪些，代表什么意思

如何给Vue对象的原型链增加$Mount办法

• 将initMout办法导出，传入Vue对象

    /**
     * 在原型链上增加#mount办法
     * @param {*} Vue
     */
    export function initMout(Vue) {
      Vue.prototype.$mount = function (el) {
        const vm = this;
        this._el = el;
        mount(vm, el);
      };
    }
  

  将实在节点生成虚构DOM

• 每个实在DOM节点都会继承Node类，所以通过nodeName能晓得是HTML标签类型还是文本类型。（PS：node类的属性和办法）
• nodeType的值代表不同的含意，典型有1示意HTML标签，3示意文本标签（PS：nodeType的值有哪些，代表什么意思）

• nodeName是怎么定义文本类型的：两个节点间的空白局部和理论的文字都是文本类型

  1. 从<div id="app">标签后开始到 “文本内容”这个文字前是一个文本类型#text
  2. “文本类容”文字到 <span>标签前 是一个文本类型#text
  3. <span class="a">{{content}}</span>是个SPAN类型

```js
     <div id="app"> 
       文本内容：<span class="a">{{content}}</span> 
    </div>
```

• children属性就是下面代码块生成的虚构DOM
  
• 代码实现

    /**
     *  构建虚构DOM
     * @param {*} vm
     * @param {*} el 实在的DOM节点
     * @param {*} parent 父级节点
     */
    function contrucVNode(vm, el, parent) {
      const tag = el.nodeName;
      const children = []; // 虚构DOM下的虚构子节点
      const text = getTextContent(el);
      const data = "";
      const nodeType = el.nodeType;

      const vnode = new VNode(tag, el, children, text, data, parent, nodeType);

      // 实在DOM节点下是否还有子节点
      const childrenList = el.childNodes;

      for (let i = 0; i < childrenList.length; i++) {
        const childrenNode = contrucVNode(vm, childrenList[i], parent);
        if (childrenNode instanceof VNode) {
          vnode.children.push(childrenNode);
        }
      }

      return vnode;
    }

定义虚构Node节点类

    export default class Vnode {
      // node节点的内置属性和办法：https://developer.mozilla.org/en-US/docs/Web/API/Node
      // nodeType的值： https://developer.mozilla.org/zh-CN/docs/Web/API/Node/nodeType
      constructor(
        tag, // 标签类型， DIV、SPAN... #TEXT
        elm, // 对应实在节点,前期会依据这个属性操作实在DOM，如数据渲染
        children, // 以后节点下的虚构子节点(虚构DOM)
        text, // 以后节点中文本内容
        data, // VNodeData, 临时保留，暂无意义
        parent, // 父级节点
        nodeType // 节点类型
      ) {
        this.tag = tag;
        this.elm = elm;
        this.children = children;
        this.text = text;
        this.data = data;
        this.parent = parent;
        this.nodeType = nodeType;

        this.env = {}; // 以后节点的环境变量
        this.instructions = null; // 寄存Due指令，如v-for
        this.template = []; // 以后节点波及到的模板语法——形如{{ text }}
      }
    }