Vue源码分析[1][模拟插值语法]

1.单文件的时候会使用到mount函数进行挂载

模拟插值语法

  <div id="app">
    <p>{{name}}{{fff}}</p>
    <p>{{message}}</p>
  </div>

  //1.获取DOM
  let tempNode = document.querySelector('#app');
  //正则表达式里 花括号是有特殊含义的 因此我们要对花括号进行转义
  //.+表示里边可以匹配任意的字符 ? 表示取消贪婪
  //加圆括号,目的是通过正则将括号内的字符取出来
  //g代表全局模式
  let regular = /\{\{(.+?)\}\}/g

  //2.创建变量
  var data = {
      name:'zs',
      message: "abc",
      fff:'hahaha'
  };
  //3.将数据放入模板
  //Vue源码中DOM->字符串模板->抽象语法树->真正的DOM
  //在本文档中，我们暂时使用真正的DOM元素
  function compiler(template,data){
    let childNodes = template.childNodes;
    for(let i = 0 ; i < childNodes.length; i++){
      let type = childNodes[ i ].nodeType;
      //查看子节点的类型 1 元素 3 文本节点
      if( type === 3 ) {
        let text = childNodes[ i ].nodeValue;

        //使用replace方法,将正则表达式替换为我们需要的

        /*
        replace是一个字符串的方法,可接受两个参数
        分两种情况
        1.接受两个字符串,使用param1替换String中的param2,返回一个全新替换后的String
        2.接受param1为正则表达式,param2为回调函数,正则每匹配到一次,调用一次回调函数
        */

        //将替换后的结果重新赋给节点
        text = text.replace(regular , function ( _ , g){

          //取到的值刚好是data里的属性
          let key = g.trim();
          let value = data[ key ];
          return value
        })
        childNodes[ i ].nodeValue = text
        //这里有尝试过下面的方式,以为会更便捷,但是没有考虑到{{}}有很多组的情况,所以必须得到新的text然后将这个整体全部替换掉
        /*
        text.replace(regular , function ( _ , g){
          let key = g.trim();
          childNodes[ i ].nodeValue  = data[ key ];
        })
        */
        
        //trim方法
        /*
        trim() 方法会从一个字符串的两端删除空白字符。在这个上下文中的空白字符是所有的空白字符 (space, tab, no-break space 等) 以及所有行终止符字符（如 LF，CR等）。

        */
      }
      else if ( type === 1 ) {
        compiler( childNodes[ i ], data );
      }
    }
  }
  console.log(tempNode);
  //dom是引用类型,所以需要重新深拷贝一份node
  operateNode = tempNode.cloneNode(true);
  compiler(operateNode , data);
  console.log(operateNode);
  app.parentNode.replaceChild(operateNode , app)

标签：operateNode,字符,Vue,插值,text,源码,let,childNodes,data
来源： https://www.cnblogs.com/funk1/p/16310172.html