san.js源码解读之模版解析(parseTemplate)篇——readIdent函数

news2024/11/24 0:48:04

一、源码分析

/**
 * 读取ident
 * 这里的 ident 指标识符(identifier),也就是通常意义上的变量名
 * 这里默认的变量名规则为:由美元符号($)、数字、字母或者下划线(_)构成的字符串
 *
 * @inner
 * @param {Walker} walker 源码读取对象
 * @return {string}
 */
function readIdent(walker) {
    var match = walker.match(/\s*([\$0-9a-z_]+)/ig, 1)
, 1);

    // #[begin] error
    if (!match) {
        throw new Error('[SAN FATAL] expect an ident: ' + walker.source.slice(walker.index));
    }
    // #[end]

    return match[1];
}

readIdent 函数用来匹配 template 中用到的变量名(如下图)请添加图片描述

首先用到了 walk 类中的 match 函数,该函数源码如下(这里不是 walk 类全部代码而是列出了本次用到的代码)

/**
 * 字符串源码读取类,用于模板字符串解析过程
 *
 * @class
 * @param {string} source 要读取的字符串
 */
function Walker(source) {
    this.source = source; // 存储要解析的模版字符串
    this.len = this.source.length; // 获得字符串长度
    this.index = 0; // 初始话当前指针位置
}

/**
 * 向前读取符合规则的字符片段,并返回规则匹配结果
 *
 * @param {RegExp} reg 字符片段的正则表达式
 * @param {boolean} isMatchStart 是否必须匹配当前位置
 * @return {Array?}
 */
Walker.prototype.match = function (reg, isMatchStart) {
    reg.lastIndex = this.index; // 指定下一次匹配的起始索引

    // 如果匹配成功,exec() 方法返回一个数组,并更新正则表达式对象的 lastIndex 属性。完全匹配成功的文本将作为返回数组的第一项,从第二项起,后续每项都对应一个匹配的捕获组。
    var match = reg.exec(this.source);// exec() 可用来对单个字符串中的多次匹配结果进行逐条的遍历(包括捕获到的匹配),而相比之下, String.prototype.match() 只会返回匹配到的结果。
    if (match && (!isMatchStart || this.index === match.index)) {
        this.index = reg.lastIndex; // 更新下次匹配的起始索引
        return match;
    }
};

match 函数中主要用到了 exec 函数来进行正则表达式匹配,match 函数中需要注意一下几点

  1. 开始匹配之前对 lastIndex 进行赋值,在进行循环匹配时就形成了向前移动的指针。在每次匹配时开始的位置,
  2. isMatchStart 是一个必须匹配当前位置标识。当 isMatchStart 为 false 时,或者通过取反操作为 false时,就进行当前index和match.index进行相等比较,只有两者相等才可以是匹配当前位置,而其中 match.index 为‘匹配到的字符位于原始字符串的基于 0 的索引值’,this.index 在匹配的过程中也是动态更新的,所以可以使用两个值做比较。

在san中变量名由美元符号($)、数字、字母或者下划线()构成,为了匹配变量名给出如下正则表达式
请添加图片描述
上图可以看出变量名是如何匹配的,在 match 中 isMatchStart 表示为已经开启。为啥开启呐?下面看一下/\s*([$0-9a-z
]+)/ig,正则表达式如何匹配变量的

正确的变量命名
请添加图片描述

正确的变量命名它的index是从 0 开始的
请添加图片描述
不正确的变量命名是不是从 0 开始,也就是说 match.index 和 this.index 不相等。

注意:本例子中index是从0开始,在其他相关中可能不一样,但是如果isMatchStart标识开启了,那么match.index 和 this.index 必须相等

如果没有匹配到,则报错。如果匹配到就返回 match[1]即匹配到的值。
这里需要知道的是为啥是match[1] 而不是 match[0] 或者 [2]?这是因为 当exec 函数匹配成功,exec() 方法返回一个数组,并更新正则表达式对象的 lastIndex 属性。完全匹配成功的文本将作为返回数组的第一项,从第二项起,后续每项都对应一个匹配的捕获组。那么什么是捕获组呐?可以简单为正则表达式中使用括号‘()’括起来的就是一个捕获组,在匹配变量名表达式中可以看出([$0-9a-z_]+)是。所以是 match[1]

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

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

相关文章

虎去兔来(C++)

系列文章目录 进阶的卡莎C++_睡觉觉觉得的博客-CSDN博客数1的个数_睡觉觉觉得的博客-CSDN博客双精度浮点数的输入输出_睡觉觉觉得的博客-CSDN博客足球联赛积分_睡觉觉觉得的博客-CSDN博客大减价(一级)_睡觉觉觉得的博客-CSDN博客小写字母的判断_睡觉觉觉得的博客-CSDN博客纸币(…

python爬虫request和BeautifulSoup使用

request使用 1.安装request pip install request2.引入库 import requests3.编写代码 发送请求 我们通过以下代码可以打开豆瓣top250的网站 response requests.get(f"https://movie.douban.com/top250")但因为该网站加入了反爬机制,所以…

Python---练习:有一物,不知其数,三三数之余二,五五数之余三,七七数之余二,问物几何?

案例: 有一物,不知其数,三三数之余二,五五数之余三,七七数之余二,问物几何? 人话: 有一个数字,不知道具体是多少,用3去除剩2,用5去除剩3&#…

Vue 3.3.6 ,得益于WeakMap,比之前更快了

追忆往昔,穿越前朝,CSS也是当年前端三剑客之一,风光的很,随着前端跳跃式的变革,CSS在现代前端开发中似乎有点默默无闻起来。 不得不说当看到UnoCss之前,我甚至都还没听过原子化CSS[1]这个概念(…

业界中说的快速原型法是什么

快速原型法是一种软件开发过程,其核心思想是在开发初期快速构建一个系统的原型,即一个工作模型,以便用户和开发者能够更好地理解系统的需求和功能。这种方法强调快速迭代和用户参与,目的是更早地发现和修正问题,从而提…

微软:Octo Tempest是最危险的金融黑客组织之一

导语 最近,微软发布了一份关于金融黑客组织Octo Tempest的详细报告。这个组织以其高级社交工程能力而闻名,专门针对从事数据勒索和勒索软件攻击的企业。Octo Tempest的攻击手段不断演变,目标范围也不断扩大,成为了电缆电信、电子邮…

回流重绘零负担,网页加载快如闪电

🎬 江城开朗的豌豆:个人主页 🔥 个人专栏 :《 VUE 》 《 javaScript 》 📝 个人网站 :《 江城开朗的豌豆🫛 》 ⛺️ 生活的理想,就是为了理想的生活 ! 目录 ⭐ 专栏简介 📘 文章引言 一、回…

椭圆曲线点加的应用计算

一、点加应用 1.1 背景 假设一条椭圆曲线方程为 y^2 =x^3+ax+b确定这条椭圆曲线方程参数是p,a,b,G,n,h,除了参数a,b ,其他参数的意义 p为质数,(mod p)运算G为基点n为点G的阶h是椭圆曲线上所有点的个数m与n相除的商的整数部分1.2 方程(y^2 =x^3+x+6,P=11) 椭圆曲线方程y…

原始流,缓冲流性能比较

一.低级字节流一个一个字节复制 1.代码 package org.example;import java.io.*;public class day13 {//原视频路径private static final String file1 "D:\\temp\\day05\\改名.mp4";//目的视频路径private static final String file2 "D:\\temp\\day05\\不改…

消息队列中间件面试笔记总结RabbitMQ,Kafka,RocketMQ

文章目录 (一) Rabbit MQRabbitMQ 核心概念消息队列的作用Exchange(交换器)Broker(消息中间件的服务节点)如何保证消息的可靠性如何保证 RabbitMQ 消息的顺序性如何保证 RabbitMQ 高可用的?如何解决消息队列的延时以及过期失效问题消息堆积问…

服务运营 |论文解读: 住院病人“溢出”:一种近似动态规划方法

摘要 在住院床位管理中,医院通常会将住院病人分配到相对应的专科病房,但随着病人的入院和出院,可能会出现病人所需的专科病房满员,而其他病房却有空余床位的情况。于是就有了 "溢出 "策略,即当病人等候时间…

温湿度计传感器DHT11控制数码管显示verilog代码及视频

名称:温湿度计传感器DHT11控制数码管显示 软件:QuartusII 语言:Verilog 代码功能: 使用温湿度传感器DHT11采集环境的温度和湿度,并在数码管显示 本代码已在开发板验证 开发板资料: 大西瓜第一代FPGA升级…

leetCode 229. 多数元素 II + 摩尔投票法 + 进阶 + 优化空间

229. 多数元素 II - 力扣(LeetCode) 给定一个大小为 n 的整数数组,找出其中所有出现超过 ⌊ n/3 ⌋ 次的元素。 进阶:尝试设计时间复杂度为 O(n)、空间复杂度为 O(1)的算法解决此问题。 (1)哈希表 class …

Android-宝宝相册(第四次作业)

第四次作业-宝宝相册 题目 用Listview建立宝宝相册,相册内容及图片可自行设定,也可在资料文件中获取。给出模拟器仿真界面及代码截图。 (参考例4-8) 创建工程项目 创建名为baby的项目工程,最后的工程目录结构如下图所…

Linux 基本语句_8_C语言_文件控制

为了解决多个进程同时操作一个文件,产生一些情况,通常对文件进行上锁,已解决对共享文件的竞争 对打开文件进行各种操作: int fcentl(int fd, int cmd, .../*arg*/如果cmd与锁操作有关,那么fcentl函数的第三个参数就要…

从Mysql架构看一条查询sql的执行过程

1. 通信协议 我们的程序或者工具要操作数据库,第一步要做什么事情? 跟数据库建立连接。 首先,MySQL必须要运行一个服务,监听默认的3306端口。在我们开发系统跟第三方对接的时候,必须要弄清楚的有两件事。 第一个就是通…

38基于matlab的期货预测,利用PSO优化SVM和未优化的SVM进行对比,得到实际输出和期望输出结果。

基于matlab的期货预测,利用PSO优化SVM和未优化的SVM进行对比,得到实际输出和期望输出结果。线性核函数、多项式、RBF核函数三种核函数任意可选,并给出均方根误差,相对误差等结果,程序已调通,可直接运行。 3…

哈希算法:哈希算法在分布式系统中有哪些应用?

文章来源于极客时间前google工程师−王争专栏。 哈希算法除了上篇的四个应用(安全加密、数据校验、唯一标识、散列函数),还有三种应用:负载均衡、数据分片、分布式存储。 这三个应用都跟分布式系统有关。哈希算法是如何解决这些分…

Nginx的进程结构实例演示

可以参考《Ubuntu 20.04使用源码安装nginx 1.14.0》安装nginx 1.14.0。 nginx.conf文件中worker_processes 2;这条语句表明启动两个worker进程。 sudo /nginx/sbin/nginx -c /nginx/conf/nginx.conf开启nginx。 ps -ef | grep nginx看一下进程情况。 sudo /nginx/sbin/ng…

Java8与JDK1.8与JDK8之间的关系是什么?

1.Java8等价于JDK8 2.JDK8或者JDK1.8是由于自从JDK1.5/JDK5命名方式改变后遗留的历史问题。所以JDK8或者JDK1.8是等价的。 2004年9月30日,J2SE1.5发布。为了表示该版本的重要性,J2SE 1.5更名为Java SE 5.0,从此开始,如下图像jav…