标签：operateNode 字符 Vue 插值 text 源码 let childNodes data

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

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。