好家伙,书接上回

在上一篇Vue源码学习(二):渲染第一步,模板解析中,我们完成了模板解析

现在我们继续,将模板解析的转换为ast语法树

1.前情提要

代码已开源https://github.com/Fattiger4399/analytic-vue.git手动调试一遍,

胜过我解释给你听一万遍

function start(tag, attrs) { //开始标签
    console.log(tag, attrs, '开始的标签')
}

function charts(text) { //获取文本
    console.log(text, '文本')
}

function end(tag) { //结束的标签
    console.log(tag, '结束标签')
}

在这里,我们知道start,charts,end分别可以拿到

我们的`开始标签`,`文本`,`结束标签`

效果如下:(仔细看,这也是我们实验要用到的例子)

随后我们开始改造这几个方法

2.代码详解

2.1.ast树节点的结构

确定我们ast树节点的结构:

let root; //根元素
let createParent //当前元素的父亲
let stack = [] 
function createASTElement(tag, attrs) {
    return {
        tag,
        attrs,
        children: [],
        type: 1,
        parent: null
    }
}

节点元素分别为

tag:标签名
attrs:标签属性
children:子元素(数组)
type:类型(后面会用到,目前”1″代表标签”3″代表文本)
parent:父元素

2.2.start()方法

function start(tag, attrs) { //开始标签
    let element = createASTElement(tag, attrs) //生成一个开始标签元素
    //查看root根元素是否为空
    //若是,将该元素作为根
    //非原则
    if (!root) {
        root = element
    }
    createParent = element
    stack.push(element)
    console.log(tag, attrs, '开始的标签')
}

此处,生成一个开始标签元素,判断root是否为空,若为空,则将该元素作为根元素

随后将该元素作为父元素.

2.3.charts()方法

function charts(text) { //获取文本
    console.log(text, '文本')
    // text = text.replace(/a/g,'')
    if(text){
        createParent.children.push({
            type:3,
            text
        })
    }
    // console.log(stack,'stack')
}

这个好理解,将”文本内容”作为父元素的孩子

2.4.end()方法

function end(tag) { //结束的标签
    let element = stack.pop()
    createParent = stack[stack.length - 1]
    if (createParent) { //元素闭合
        element.parent = createParent.tag
        creat服务器托管网eParent.children.push(element)
    }
    console.log(tag, '结束标签')
}

此处,我们先将栈stack最新的元素弹出栈(作为当前元素,我们要对他进行操作),

随后获取栈的前一个元素作为父元素,

当前元素的父元素属性指向父元素的标签属性

随后将该元素推入父元素的children中,

emmmm,我还是说人话吧

假设现在stack=[‘div’,’h1′]

然后pop了,createParent = ‘h1’

‘h1′.parent =>’div’

‘div’.children =>’h1′

(多看几遍就理解了,其实非常简单)

来看看最终实现的ast语法树长什么样子

(父子关系和谐)

搞定啦!

3.完整代码

const attribute =
    /^s*([^s"'/=]+)(?:s*(=)s*(?:"([^"]*)"+|'([^']*)'+|([^s"'=`]+)))?/
//属性 例如:  {id=app}
const ncname = `[a-zA-Z_][-.0-9_a-zA-Z]*`; //标签名称
const qnameCapture = `((?:${ncname}:)?${ncname})` //
const startTagOpen = new RegExp(`^//标签开头
const startTagClose = /^s*(/?)>/ //匹配结束标签 的 >
const endTag = new RegExp(`^]*>`) //结束标签 例如

const defaultTagRE = /{{((?:.|r?n)+?)}}/g

let root; //根元素
let createParent //当前元素的父亲
let stack = []
function createASTElement(tag, attrs) {
return {
tag,
attrs,
children: [],
type: 1,
parent: null
}
}

function start(tag, attrs) { //开始标签
let element = createASTElement(tag, attrs) //生成一个开始标签元素
//查看root根元素是否为空
//若是,将该元素作为根
//非原则
if (!root) {
root = element
}
createParent = element
stack.push(element)
console.log(tag, attrs, ‘开始的标签‘)
}

function charts(text) { //获取文本
console.log(text, ‘文本‘)
// text = text.replace(/a/g,”)
if(text){
createParent.children.push({
type:3,
text
})
}
// console.log(stack,’stack’)
}

function end(tag) { //结束的标签
let element服务器托管网 = stack.pop()
createParent = stack[stack.length – 1]
if (createParent) { //元素闭合
element.parent = createParent.tag
createParent.children.push(element)
}
console.log(tag, ‘结束标签‘)
}

export function parseHTML(html) {
while (html) { //html 为空时,结束
//判断标签
let textEnd = html.indexOf(‘‘) //0
// console.log(html,textEnd,’this is textEnd’)
if (textEnd === 0) { //标签
// (1) 开始标签
const startTagMatch = parseStartTag() //开始标签的内容{}
if (startTagMatch) {
start(startTagMatch.tagName, startTagMatch.attrs);
continue;
}
// console.log(endTagMatch, ‘结束标签’)
//结束标签
let endTagMatch = html.match(endTag)
if (endTagMatch) {
advance(endTagMatch[0].length)
end(endTagMatch[1])
continue;
}
}
let text
//文本
if (textEnd > 0) {
// console.log(textEnd)
//获取文本内容
text = html.substring(0, textEnd)
// console.log(text)
}
if (text) {
advance(text.length)
charts(text)
// console.log(html)
}
}
function parseStartTag() {
//
const start = html.match(startTagOpen) // 1结果 2false
// console.log(start,’this is start’)
// match() 方法检索字符串与正则表达式进行匹配的结果
// console.log(start)
//创建ast 语法树
if (start) {
let match = {
tagName: start[1],
attrs: []
}
// console.log(match,’match match’)
//删除开始标签
advance(start[0].length)
//属性
//注意多个遍历
//注意>
let attr //属性
let end //结束标签
//attr=html.match(attribute)用于匹配
//非结束位’>’,且有属性存在
while (!(end = html.match(startTagClose)) && (attr = html.match(attribute))) {
// console.log(attr,’attr attr’); //{}
// console.log(end,’end end’)
match.attrs.push({
name: attr[1],
value: attr[3] || attr[4] || attr[5]
})
advance(attr[0].length)
//匹配完后,就进行删除操作
}
//end里面有东西了(只能是有”>”),那么将其删除
if (end) {
// console.log(end)
advance(end[0].length)
return match
}
}
}
function advance(n) {
// console.log(html)
// console.log(n)
html = html.substring(n)
// substring() 方法返回一个字符串在开始索引到结束索引之间的一个子集，
// 或从开始索引直到字符串的末尾的一个子集。
// console.log(html)
}
// console.log(root)
return root
}服务器托管，北京服务器托管，服务器租用 http://www.fwqtg.net
机房租用，北京机房租用，IDC机房托管， http://www.fwqtg.net

相关推荐: 【从零开始学微服务】07.微服务常用的开发框架

大家好，欢迎来到万猫学社，跟我一起学，你也能成为微服务专家。微服务架构该怎么落地？选用什么样的技术栈？所有的互联网公司都在积极尝试自己的微服务落地方案。 Spring Cloud 其中在Java领域最引人注目的就是 Spring Cloud 提供的方案了。 …

Vue源码学习(三):渲染第二步,创建ast语法树