【vuejs深入三】vue源码解析之二 htmlParse解析器的实现-阿里云开发者社区

开发者社区> grootzhang> 正文

【vuejs深入三】vue源码解析之二 htmlParse解析器的实现

简介: 写在前面   一个好的架构需要经过血与火的历练,一个好的工程师需要经过无数项目的摧残。   昨天博主分析了一下在vue中,最为基础核心的api,parse函数,它的作用是将vue的模板字符串转换成ast,从而构建vnode,构建指令,实现virtual dom,然后在这基础之上实现双向绑定等。
+关注继续查看

写在前面

  一个好的架构需要经过血与火的历练,一个好的工程师需要经过无数项目的摧残。

  昨天博主分析了一下在vue中,最为基础核心的api,parse函数,它的作用是将vue的模板字符串转换成ast,从而构建vnode,构建指令,实现virtual dom,然后在这基础之上实现双向绑定等。【vuejs深入二】vue源码解析之一,基础源码结构和htmlParse解析器

  今天博主就来详细的实现一个拥有核心功能的htmlParse函数,看看它内部的实现逻辑,了解它是怎么样去解析一个vue模板的。

小目标

  我们最终的目标是将html转换成ast对象,那么首先我们定一个小目标:

<div id="div1"></div>

  我希望将上面的html解析成ast格式,类似于下面:

{
  "tag":"div",
  "attrs":[
            {  "id":"div1" }
   ],
   "children":[],
   "type":1
}    

       最终想要达成的第一个小目标是可以将div标签字符串输出成这样一个object格式,tag表示标签名称,attrs表示属性,children表示这个div所有的子节点,type的话表示节点的类型,我们今天只三个类型:

1.元素类型,也就是标签类型,所有用<tag attr=""></tag>这样的标签。2.变量text,现在我们实现一个{{text}}的变量转换,它其实是一个节点。3.普通文本,普通文本包括普通文字和空格、换行。

 

基本结构

  基本结构的设计决定的代码能扩展多远,如果一开始结构设计错误,最后在新加入的功能无法嵌入的时候,那就只有重构一条路可以走了。

  首先理清楚我们的思路。

  匹配单个字符》匹配标签》匹配属性》匹配文本》匹配结束标签

  然后,你想啊,html标签都是有开始,有结束的。那么这里问题就来了,可以想到的方式,解析一个标签的开始与结束吧,例如我们使用正则匹配开始标签<div id='div1'> 然后找到结束标签</div>,这样是不是就可以解析div里面的内容了?

       难。

      开始标签比较好找,结束标签就恶心了,例如 <div><div></div></div> ,,完了,怎么区分嵌套关系?第一个<div>到底匹配哪一个结束标签?

     这个思路是错的,很难。

  那么我们换个思路,如果我们单个字符匹配呢,

 例如我们匹配一个 <div><div></div></div>,

   ok 脑补步骤

 1。匹配到 <   匹配到这个字符我就可以认为,后面的要么是开始标签,要么是结束标签。

    2。用正则匹配从<到后面的字符,如果是开始标签,现在记录一下,啊,我遇到了一个开始标签<div>  顺便用正则记录attrs

    3. 现在我们匹配走走走。。。走到<div></div></div>   

    4.又匹配到一个 < 老步骤啊。

    5.发现是开始标签,再次记录,啊,我又遇到一个开始标签  <div>  顺便用正则记录attrs

   6. 现在我们匹配走走走。。。走到</div></div>  

   7. 又匹配到一个 < 老步骤啊。

   8.发现是一个结束标签</div> ,嗯?结束标签!它是谁的结束标签?想一想。。。。。。应该是最后一个遇到的开始标签吧。  第一个遇到的结束标签不就是最后一个开始标签的结束么?

   9.啊,结束了一个。 

   10.再匹配,再完成。

    恩。。。思路清晰了有没有,来实现走一个:

  //转化HTML至AST对象
  function parse(template){
    var currentParent; //当前父节点
    var root; //最终生成的AST对象
    var stack = []; //插入栈
    var startStack = []; //开始标签栈
    var endStack = [];  //结束标签栈
    //console.log(template);
    parseHTML(template,{
      start:function start(targetName,attrs,unary,start,end,type,text){//标签名 ,attrs,是否结束标签,文本开始位置,文本结束位置,type,文本,
        var element = {   //我们想要的对象
          tag:targetName,
          attrsList:attrs,
          parent:currentParent,  //需要记录父对象吧
          type:type,
          children:[]
        }
        if(!root){ //根节点哈
          root = element;
        }
        if(currentParent && !unary){ //有父节点并且不是结束标签?
          currentParent.children.push(element);  //插入到父节点去
          element.parent = currentParent;  //记录父节点
        }
        if (!unary) {  //不是结束标签?
            if(type == 1){
               currentParent = element;//不是结束标签,当前父节点就要切换到现在匹配到的这个开始标签哈,后面再匹配到
               startStack.push(element);  //推入开始标签栈
            }
             stack.push(element);  //推入总栈
         }else{
           endStack.push(element);  //推入结束标签栈
           currentParent = startStack[endStack.length-1].parent;   //结束啦吧当前父节点切到上一个开始标签,这能理解吧,当前这个已经结束啦
         }
         //console.log(stack,"currentstack")
      },
      end:function end(){

      },
      chars:function chars(){

      }
    });
    console.log(root,"root");
    return root;
  };
  /**
   * Not type-checking this file because it's mostly vendor code.
   */

  /*!
   * HTML Parser By John Resig (ejohn.org)
   * Modified by Juriy "kangax" Zaytsev
   * Original code by Erik Arvidsson, Mozilla Public License
   * http://erik.eae.net/simplehtmlparser/simplehtmlparser.js
   */

  // Regular Expressions for parsing tags and attributes
  var singleAttrIdentifier = /([^\s"'<>/=]+)/;
  var singleAttrAssign = /(?:=)/;
  var singleAttrValues = [
    // attr value double quotes
    /"([^"]*)"+/.source,
    // attr value, single quotes
    /'([^']*)'+/.source,
    // attr value, no quotes
    /([^\s"'=<>`]+)/.source
  ];
  var attribute = new RegExp(
    '^\\s*' + singleAttrIdentifier.source +
    '(?:\\s*(' + singleAttrAssign.source + ')' +
    '\\s*(?:' + singleAttrValues.join('|') + '))?'
  );
  // could use https://www.w3.org/TR/1999/REC-xml-names-19990114/#NT-QName
  // but for Vue templates we can enforce a simple charset
  var ncname = '[a-zA-Z_][\\w\\-\\.]*';
  var qnameCapture = '((?:' + ncname + '\\:)?' + ncname + ')';
  var startTagOpen = new RegExp('^<' + qnameCapture);
  var startTagClose = /^\s*(\/?)>/;
  var endTag = new RegExp('^<\\/' + qnameCapture + '[^>]*>');
  var doctype = /^<!DOCTYPE [^>]+>/i;
  var comment = /^<!--/;
  var conditionalComment = /^<!\[/;

//偷懒哈  上面的正则是我在vue上拿下来的,这个后期可以研究,下面的话简单的写两个用用,和vue原版的是有一些差别的

    //{{变量}}

  var varText = new RegExp('{{' + ncname + '}}');
  //空格与换行符
  var space = /^\s/;
  var checline = /^[\r\n]/;
    /**
      type 1普通标签
      type 2代码
      type 3普通文本
    */
  function parseHTML(html,options){
    var stack = []; //内部也要有一个栈
    var index = 0;  //记录的是html当前找到那个索引啦
    var last; //用来比对,当这些条件都走完后,如果last==html 说明匹配不到啦,结束while循环
    var isUnaryTag = false;

    while(html){
      last = html;
      var textEnd = html.indexOf('<');
      if(textEnd === 0){ //这一步如果第一个字符是<那么就只有两种情况,1开始标签  2结束标签
        //结束标签
        var endTagMatch = html.match(endTag); //匹配
        if(endTagMatch){
          console.log(endTagMatch,"endTagMatch");
          isUnaryTag = true;
          var start = index;
          advance(endTagMatch[0].length); //匹配完要删除匹配到的,并且更新index,给下一次匹配做工作
          options.start(null,null,isUnaryTag,start,index,1);
          continue;
        }
        //初始标签
        var startMatch = parseStartTag();
        if(startMatch){
          parseStartHandler(startMatch);//封装处理下
          console.log(stack,"startMatch");
          continue;
        }
      }

      if(html === last){
        console.log(html,"html");
       break;
      }
    }
    function advance (n) {
      index += n;
      html = html.substring(n);
    }
    //处理起始标签 主要的作用是生成一个match 包含初始的attr标签
    function parseStartTag(){
      var start = html.match(startTagOpen);
      if(start){
        var match = {
           tagName: start[1],       // 标签名(div)
           attrs: [],               // 属性
           start: index             // 游标索引(初始为0)
       };
       advance(start[0].length);
       var end, attr;
       while (!(end = html.match(startTagClose)) && (attr = html.match(attribute))) {//在endClose之前寻找attribute
           advance(attr[0].length);
           match.attrs.push(attr);
       }
       if (end) {
           advance(end[0].length);      // 标记结束位置
           match.end = index;      //这里的index 是在 parseHTML就定义 在advance里面相加
           return match         // 返回匹配对象 起始位置 结束位置 tagName attrs
       }

      }
    }
    //对match进行二次处理,生成对象推入栈
    function parseStartHandler(match){
      var _attrs = new Array(match.attrs.length);
      for(var i=0,len=_attrs.length;i<len;i++){  //这儿就是找attrs的代码哈
        var args = match.attrs[i];
        var value = args[3] || args[4] || args[5] || '';
        _attrs[i] = {
          name:args[1],
          value:value
        }
      }
      stack.push({tag: match.tagName,type:1, lowerCasedTag: match.tagName.toLowerCase(), attrs: _attrs}); //推栈
      options.start(match.tagName, _attrs,false, match.start, match.end,1);  //匹配开始标签结束啦。
    }

  }

我们执行   parse("<div id='test1'><div></div></div>");  大功告成哈哈哈哈哈  呃。

    

神马,你还想问我细节问题?

正好给你培养一下读代码的能力哈,思路有了,代码有了,拉下去调试调试哈。当然博主在下一章还会详细介绍的。

写在后面

  mvvm框架和webpack的出现确实改变了前端的开发方式,使得学习前端变成了一门有着深入学问的课题。在我们日常开发中应该不断地学习,归纳,总结,寻找新的思想,对原有的代码有好的补充和好的改进。

       写的不好,谢谢大家观看。 后续有空会新增更多关于开发的知识分享。  

       如果你有什么疑问,你可以联系我,或者在下方评论。

 

======================================================== 转载请注明出处。

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
OAF_文件系列5_实现OAF解析XML文件javax.xml.parsers(案例)
20150729 Created By BaoXinjian 一、摘要 通过javax.xml.parsers.DocumentBuilder解析从系统系统导入的XML文件 此过程需要用到一些包方法 1.
820 0
7.数据本地化CCString,CCArray,CCDictionary,tinyxml2,写入UserDefault.xml文件,操作xml,解析xml
 数据本地化 A CCUserDefault 系统会在默认路径cocos2d-x-2.2.3\projects\Hello\proj.win32\Debug.win32下生成一个名为UserDefault.xml.所有的key皆为char *型,value类型为bool intfloat double std::string. 读操作
1249 0
20+免费精美响应式Html5 网站模板02(含源码)
20+免费精美响应式Html5 网站模板02(含源码)
6 0
Spark in action on Kubernetes - Spark Operator的原理解析
在上篇文章中,向大家介绍了如何使用Spark Operator在kubernetes集群上面提交一个计算作业。今天我们会继续使用上篇文章中搭建的Playgroud进行调试与解析,帮助大家更深入的理解Spark Operator的工作原理。
12701 0
Apache Spark 3.0.0重磅发布 —— 重要特性全面解析
开发了近两年(自2018年10月份至今)的Apache SparkTM 3.0.0正式发布! Apache SparkTM 3.0.0版本包含3400多个补丁,是开源社区做出巨大贡献的结晶,在Python和SQL功能方面带来了重大进展并且将重点聚焦在了开发和生产的易用性上。同时,今年也是Spark开源10周年,这些举措反映了Spark自开源以来,是如何不断的满足更广泛的受众需求以及更多的应用场景
3108 0
CSS 全解析实战(二)-HTML基础强化
1 HTML常见元素和理解(1) HTML 常见元素 viewport 标签适配移动端 HTML 重要属性 2 HTML常见元素和理解(2) 标签的 HTML5新属性 href 规定链接的目标地址 target 规定在何处打开链接文档 表格 label 为 input 元素定义标注(标记)。
860 0
+关注
grootzhang
我是张泰峰,从事开发工作,目前在一家跨境电商担任高级开发工程师
37
文章
0
问答
文章排行榜
最热
最新
相关电子书
更多
《2021云上架构与运维峰会演讲合集》
立即下载
《零基础CSS入门教程》
立即下载
《零基础HTML入门教程》
立即下载