本文共 4234 字，大约阅读时间需要 14 分钟。
写在前面
一个好的架构需要经过血与火的历练，一个好的工程师需要经过无数项目的摧残。
昨天博主分析了一下在vue中，最为基础核心的api，parse函数，它的作用是将vue的模板字符串转换成ast，从而构建vnode，构建指令，实现virtual dom，然后在这基础之上实现双向绑定等。
今天博主就来详细的实现一个拥有核心功能的htmlParse函数，看看它内部的实现逻辑，了解它是怎么样去解析一个vue模板的。
小目标
我们最终的目标是将html转换成ast对象，那么首先我们定一个小目标：
我希望将上面的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 = /^]+>/i; var comment = /^ 我们执行 parse("<div id='test1'><div></div></div>"); 大功告成哈哈哈哈哈 呃。
神马，你还想问我细节问题？
正好给你培养一下读代码的能力哈，思路有了，代码有了，拉下去调试调试哈。当然博主在下一章还会详细介绍的。
写在后面
mvvm框架和webpack的出现确实改变了前端的开发方式，使得学习前端变成了一门有着深入学问的课题。在我们日常开发中应该不断地学习，归纳，总结，寻找新的思想，对原有的代码有好的补充和好的改进。
写的不好，谢谢大家观看。 后续有空会新增更多关于开发的知识分享。
如果你有什么疑问，你可以联系我，或者在下方评论。
发表评论
最新留言
关于作者
