Vue源码系列讲解——模板编译篇【二】(整体运行流程)

目录

1. 整体流程

2. 回到源码

3. 总结


1. 整体流程

上篇文章中我们说了,在模板解析阶段主要做的工作是把用户在<template></template>标签内写的模板使用正则等方式解析成抽象语法树(AST)。而这一阶段在源码中对应解析器(parser)模块。

解析器,顾名思义,就是把用户所写的模板根据一定的解析规则解析出有效的信息,最后用这些信息形成AST。我们知道在<template></template>模板内,除了有常规的HTML标签外,用户还会一些文本信息以及在文本信息中包含过滤器。而这些不同的内容在解析起来肯定需要不同的解析规则,所以解析器不可能只有一个,它应该除了有解析常规HTML的HTML解析器,还应该有解析文本的文本解析器以及解析文本中如果包含过滤器的过滤器解析器。

另外,文本信息和标签属性信息却又是存在于HTML标签之内的,所以在解析整个模板的时候它的流程应该是这样子的:HTML解析器是主线,先用HTML解析器进行解析整个模板,在解析过程中如果碰到文本内容,那就调用文本解析器来解析文本,如果碰到文本中包含过滤器那就调用过滤器解析器来解析。如下图所示:

2. 回到源码

解析器的源码位于/src/complier/parser文件夹下,其主线代码如下:

// 代码位置:/src/complier/parser/index.js/*** Convert HTML string to AST.*/
export function parse(template, options) {// ...parseHTML(template, {warn,expectHTML: options.expectHTML,isUnaryTag: options.isUnaryTag,canBeLeftOpenTag: options.canBeLeftOpenTag,shouldDecodeNewlines: options.shouldDecodeNewlines,shouldDecodeNewlinesForHref: options.shouldDecodeNewlinesForHref,shouldKeepComment: options.comments,start (tag, attrs, unary) {},end () {},chars (text: string) {},comment (text: string) {}})return root
}

从上面代码中可以看到,parse 函数就是解析器的主函数,在parse 函数内调用了parseHTML 函数对模板字符串进行解析,在parseHTML 函数解析模板字符串的过程中,如果遇到文本信息,就会调用文本解析器parseText函数进行文本解析;如果遇到文本中包含过滤器,就会调用过滤器解析器parseFilters函数进行解析。

3. 总结

本篇文章主要梳理了模板解析的整体运行流程,模板解析其实就是根据被解析内容的特点使用正则等方式将有效信息解析提取出来,根据解析内容的不同分为HTML解析器,文本解析器和过滤器解析器。而文本信息与过滤器信息又存在于HTML标签中,所以在解析器主线函数parse中先调用HTML解析器parseHTML 函数对模板字符串进行解析,如果在解析过程中遇到文本或过滤器信息则再调用相应的解析器进行解析,最终完成对整个模板字符串的解析。

了解了模板解析阶段的整体运行流程后,接下来,我们就对流程中所涉及到的三种解析器分别深入分析,逐个击破。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/684199.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

c语言操作符(上)

目录 ​编辑 原码、反码、补码 1、正数 2、负数 3、二进制计算1-1 移位操作符 1、<<左移操作符 2、>>右移操作符 位操作符&、|、^、~ 1、&按位与 2、|按位或 3、^按位异或 特点 4、~按位取反 原码、反码、补码 1、正数 原码 反码 补码相同…

STM32 HAL库 STM32CubeMX -- IWDG(独立看门狗)

STM32 HAL库 STM32CubeMX -- IWDG 一、IWDG简介二、独立看门狗的工作原理三、驱动函数初始化函数HAL IWDG Init()初始化函数HAL IWDG Init()其他宏函数 四、超时时间计算第一种办法第二种办法&#xff08;推荐&#xff09; 一、IWDG简介 看门狗(Watchdog)就是MCU上的一种特殊的…

【AIGC】Stable Diffusion的模型入门

下载好相关模型文件后&#xff0c;直接放入Stable Diffusion相关目录即可使用&#xff0c;Stable Diffusion 模型就是我们日常所说的大模型&#xff0c;下载后放入**\webui\models\Stable-diffusion**目录&#xff0c;界面上就会展示相应的模型选项&#xff0c;如下图所示。作者…

计算机网络——多媒体网络

前些天发现了一个巨牛的人工智能学习网站 通俗易懂&#xff0c;风趣幽默&#xff0c;忍不住分享一下给大家&#xff0c; 跳转到网站 小程一言 我的计算机网络专栏&#xff0c;是自己在计算机网络学习过程中的学习笔记与心得&#xff0c;在参考相关教材&#xff0c;网络搜素…

保育员考试怎么搜题找答案?9个不限次的公众号和软件分享啦! #经验分享#学习方法

学会运用各类学习辅助工具和资料&#xff0c;是大学生培养自主学习能力和信息获取能力的重要途径之一。 1.粉鹿搜题 这是一个公众号 使用方法也很简单&#xff0c;将题目发送至公众号后台&#xff0c;即可得到题目答案~ 下方附上一些测试的试题及答案 1、下列哪项是聚合式联…

DS Wannabe之5-AM Project: DS 30day int prep day18

Q1. What is Levenshtein Algorithm? Levenshtein算法&#xff0c;也称为编辑距离算法&#xff0c;是一种量化两个字符串之间差异的方法。它通过计算将一个字符串转换成另一个字符串所需的最少单字符编辑操作次数来实现。这些编辑操作包括插入、删除和替换字符。Levenshtein距…

掌握Go并发:Go语言并发编程深度解析

&#x1f3f7;️个人主页&#xff1a;鼠鼠我捏&#xff0c;要死了捏的主页 &#x1f3f7;️系列专栏&#xff1a;Golang全栈-专栏 &#x1f3f7;️个人学习笔记&#xff0c;若有缺误&#xff0c;欢迎评论区指正 前些天发现了一个巨牛的人工智能学习网站&#xff0c;通俗易懂&…

第三讲 数据存储

面向磁盘的架构 DBMS 假定数据库的主要存储位置位于非易失性磁盘【non-volatile disk】上。 DBMS 的组件管理非易失性【non-volatile】和易失性【volatile】存储之间的数据移动。 为了理解来回移动数据的影响&#xff0c;我们首先要先理解存储层次结构是什么样的。 存储层次【…

文生图提示词:气候特征

天气和气候 --气候特征 Climate Features 气候特征的基本词汇&#xff0c;涵盖了温度和湿度的变化&#xff0c;以及它们在不同气候类型中的体现。 Hot 炎热 Cold 寒冷 Warm 温暖 Cool 凉爽 Humid 湿润 Dry 干燥 Mild 温和 Chilly 冷飕飕 Freezing 冰冻 Sweltering 酷热 Frosty …

RK3568平台开发系列讲解(实验篇)杂项设备驱动实验

🚀返回专栏总目录 文章目录 一、什么是杂项设备驱动二、杂项设备的注册和卸载三、杂项设备驱动实验代码沉淀、分享、成长,让自己和他人都能有所收获!😄 一、什么是杂项设备驱动 在 Linux 中,把无法归类的五花八门的设备定义成杂项设备。相较于字符设备,杂项设备有以下两…

企业数字化转型战略规划与实践:迈向未来的关键之举

在信息技术的不断革新和全球数字化浪潮的推动下&#xff0c;企业数字化转型已经成为当今商业世界中不可或缺的一项战略规划。随着技术的进步&#xff0c;企业必须积极应对数字化转型的挑战&#xff0c;并将其作为发展的关键驱动力。本文将探讨企业数字化转型的重要性&#xff0…

幻兽帕鲁联机服务器搭建新手小白教程

这里分为两种搭建方式&#xff0c;都是采用的一键搭建的傻瓜式教程&#xff0c;1分钟就可以搞定。 一、通过阿里云一键部署幻兽帕鲁服务器 以下教程基于阿里云服务器来搭建幻兽帕鲁游戏服务器&#xff0c;通过一键部署的方式&#xff0c;最快1分钟即可完成部署。 阿里云一键…

【白话前端】一篇文章区分js库和js框架

假定你选择自助游&#xff0c;你需要找不同服务商帮你解决吃住行的问题&#xff0c;这些服务商就是js库。你也可以选择旅行社&#xff0c;给你全解决&#xff0c;这是js框架。 JavaScript库和框架都是用于简化Web开发的工具&#xff0c;但它们之间有一些区别。 JavaScript库&a…

【Java多线程】Thread类的基本用法

目录 Thread类 1、创建线程 1.1、继承 Thread&#xff0c;重写run 1.2、实现 Runnable&#xff0c;重写run 1.3、使用匿名内部类&#xff0c;继承 Thread&#xff0c;重写run 1.4、使用匿名内部类&#xff0c;实现 Runnable&#xff0c;重写run 1.5、使用 lambda 表达式…

Swift Combine 级联多个 UI 更新,包括网络请求 从入门到精通十六

Combine 系列 Swift Combine 从入门到精通一Swift Combine 发布者订阅者操作者 从入门到精通二Swift Combine 管道 从入门到精通三Swift Combine 发布者publisher的生命周期 从入门到精通四Swift Combine 操作符operations和Subjects发布者的生命周期 从入门到精通五Swift Com…

KMS知识管理系统:一文扫盲,体验为王,落地为皇

知识管理系统是学习型组织的必备&#xff0c;重要性不言而喻&#xff0c;但是往往在执行中不能落地&#xff0c;本位尝试做些KMS的扫盲。 一、KMS是什么 知识管理系统&#xff08;英语&#xff1a;Knowledge management system&#xff09;是一种用于管理和共享企业内部知识的…

如何为你的幻兽帕鲁服务器手动配置虚拟内存或Swap、Zram

其实非常简单&#xff0c;如果是Windows系统服务器的话&#xff0c;直接远程连接到服务器桌面。 连上之后&#xff0c;打开设置&#xff0c;找到“高级系统设置” 可以参考视频教程&#xff1a; 拒绝卡顿&#xff01;幻兽帕鲁服务器内存优化攻略&#xff01; 详细教程地址&…

深度学习之梯度下降算法

梯度下降算法 梯度下降算法数学公式结果 梯度下降算法存在的问题随机梯度下降算法 梯度下降算法 数学公式 这里案例是用梯度下降算法&#xff0c;来计算 y w * x 先计算出梯度&#xff0c;再进行梯度的更新 import numpy as np import matplotlib.pyplot as pltx_data [1.0,…

2024 前端面试题(GPT回答 + 示例代码 + 解释)No.21 - No.40

本文题目来源于全网收集&#xff0c;答案来源于 ChatGPT 和 博主&#xff08;的小部分……&#xff09; 格式&#xff1a;题目 h3 回答 text 参考大佬博客补充 text 示例代码 code 解释 quote 补充 quote 上一篇链接&#xff1a;2024 前端面试题&#xff08;GPT回答 示例…

基于HTML5实现动态烟花秀效果(含音效和文字)实战

目录 前言 一、烟花秀效果功能分解 1、功能分解 2、界面分解 二、HTML功能实现 1、html界面设计 2、背景音乐和燃放触发 3、燃放控制 4、对联展示 5、脚本引用即文本展示 三、脚本调用及实现 1、烟花燃放 2、燃放响应 3、烟花canvas创建 4、燃放声音控制 5、实际…