前端架构师-week6- ejs源码讲解

news2024/11/28 14:37:49

ejs 源码详解——彻底搞懂模版动态渲染原理

ejs 执行流程

        源码实现思路非常有趣,实现难度实现流程不如前几章源码复杂。但是思路完全不同,用了一套新的思路来实现 ejs 模版渲染。重要的是通过这种思路开阔自己的眼界。ejs 的思路在 vue 中也有用到。

        核心点:掌握 compile 函数怎么生成的。

 

  • new Template: 初始化 Template 对象
  • compile: 编译 Template,并返回一个新的 Function,需要传入 data 参数完成渲染模版

 

ejs.compile 执行流程分析

深入讲解 ejs 编译原理

动态生成 Function+with 用法讲解

ejs compile 函数执行流程分析

const template = ejs.compile(html, options)
const compiledTemplate = template(data)
const compiledTemplate2 = template(data2)

        第一步生成一个动态的函数,动态函数在内存中动态添加,不是之前通过代码写好的。之前写好的代码是静态的,动态函数是根据字符串动态生成。因为 function 里面的内容是不确定的,根据我们传递的字符串才能决定。运行时动态生成 function,这是 compile 方法最核心的步骤。

        第二步拿到动态 function 后,调用这个 function 来实现用户注入 data。注入 data 是通过 with 方式。不停的生成 output,最后把 output 返回给用户生成 compiledTemplate。不同的 data,就会生成不同的 compiledTemplate 结果。

        template 是固定函数,可以被理解缓存在内存当中。一旦结束运行之后,template 就会消失。 

ejs.render 和 renderFile 原理讲解

        ejs 最核心的方法是 compile 方法,不管是 render 还是 renderFile 只是在 compile 方法外层做了一层封装。封装了一个 handleCache 方法,然后在 handleCache 方法里面还是会调用 compile 方法。理解 ejs 关键是理解 compile。

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

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

相关文章

分类预测 | Matlab实现CNN-GSSVM卷积神经网络结合网格搜索算法优化支持向量机多特征分类预测

分类预测 | Matlab实现CNN-GSSVM卷积神经网络结合网格搜索算法优化支持向量机多特征分类预测 目录 分类预测 | Matlab实现CNN-GSSVM卷积神经网络结合网格搜索算法优化支持向量机多特征分类预测预测效果基本介绍模型描述程序设计学习总结 预测效果 基本介绍 分类预测 | Matlab实…

如何在多个服务器上安装WordPress分布式部署

许多网络主机现在保证其服务的正常运行时间为 99.9%,但这仍然每年最多有 8.7 小时的停机时间。 许多公司不能够承担这种风险。例如。在超级碗比赛中失败的体育新闻网站可能会失去忠实的追随者。 我们通过设置维护高可用性 WordPress分布式部署配置来帮助 WordPres…

shell脚本之免交互

目录 一 . Here Document 免交互1.1 Here Document概述示例:支持变量替换 二. Expect基本命令: expect直接执行,需要使用 expect 命令去执行脚本嵌入执行模式,将 expect 过程融入 Shell 当中,方便执行和处理。 一 . Here Document…

camunda子流程(Subprocess)如何使用

在 Camunda 中,子流程(Subprocess)是一种可嵌入到主流程中的小型流程,可以用于处理复杂的业务逻辑,以提高流程的可读性和可维护性。使用子流程的好处包括: 1、分离复杂的业务逻辑:通过将复杂的…

一条查询语句在MySQL的处理过程

例如查询语句: select user_id、username from t_user where username "张三" and sex 1; 其在MySQL的执行流程如下: 客户端发起查询请求,与SQL 接口建立连接,SQL 接口确定用户是否有查询权限,没有权限…

TensorFlow详解4-RNN+LSTM(1)

提示:文章写完后,目录可以自动生成,如何生成可参考右边的帮助文档 文章目录 前言一、背景和知识点深度学习三大模型:RNN的优势: 二、RNN的局限性三、LSTMLSTM三重门机制:LSTM解决梯度消失的主要原理&#x…

Linux--进程信号(pending, block, Handler)集

信号在产生之后,到未被处理的这段时间内,是保存在进程的PCB结构体内的一张位图中的,位图的每个比特位的编号就代表着改信号是否产生,比特位为1表示该信号产生,0表示不存在。 本篇文章就来详细的解答信号在内核中具体的…

数字革命下的产品:百数十年变迁的启示与思考。

随着数字化时代的到来,软件开发成为各行各业不可或缺的一部分。然而,传统的软件开发方法需要长时间的开发周期,高昂的成本和大量的人力资源。因此,低代码开发平台应运而生。低代码开发平台通过简化开发人员的工作和加速软件开发流…

故障分析 | 一条本该记录到慢日志的 SQL 是如何被漏掉的

背景 生产环境中 select count(*) from table 语句执行很慢,已经远超 long_query_time 参数定义的慢查询时间值,但是却没有记录到慢日志中。在测试环境也很容易复现出该问题,慢查询日志确实没有记录 select count(*) 语句。 慢查询相关参数…

数据结构入门-排序

排序的概念及其英语 排序的概念 排序:所谓排序,就是使一串记录,按照其中的某个或某些关键字的大小,递增或递减的顺序排列起来的操作。稳定性:假定在待排序的记录序列中,存在多个具有相同的关键字的记录&a…

【网络】计算机中的网络

目录 🍁计算机网络 🍁计算机网络模型 🍁布线工程 🍁布线系统 🦐博客主页:大虾好吃吗的博客 🦐专栏地址:网络专栏 计算机网络 计算机网络的功能 数据通信、资源共享、增加可靠性、提…

Dubbo——SpringBoot集成Dubbo(@Autowired和@Reference的区别、Dubbo的服务治理)

Dubbo——原生API实现远程调用_Strine的博客-CSDN博客 在上一篇文章中我们讲了如何使用原生API发起远程调用,显然这种方式肯定是非常麻烦的,因此我们这里就讲如何使用SpringBoot去集成Dubbo将这些配置简化。 生产者服务 添加配置文件 dubbo:applicat…

如何安装Maven并在IDEA配置

下载 1.进入官网完成下载,下载好后解压到你喜欢的目录中去即可! Maven – Download Apache Maven 2.解压出来就能看到以下目录结构,我们关注conf目录即可 3.配置Maven的本地仓库,进入conf目录并打开settings.xml,往下…

8.3 综合案例2.0-扫码支付二维码生成

综合案例2.0-扫码支付二维码生成 扫码支付完整流程案例说明1.硬件2.连线图 搭建云平台环境1.添加设备2.创建设备类型3.功能定义(创建物模型) 代码1.更改MQTT信息2.测试 扫码支付完整流程 参考链接微信支付开发者文档 (1)商户后台…

数据分析09——Pandas中的索引设置/排序/数据统计(异常值处理)

1、Pandas中的索引设置: Series重置索引 重置索引:s2 s1.reindex([1, 2, 3, 4, 5]) # 这种情况即使列表中索引给多了也没事,会自动填充空值。重置索引:s3 s1.reindex([1, 2, 3, 4, 5], fill_value0) # 这种情况列表中索引给多了…

从0开始 莫比乌斯函数和反演 学习笔记

莫比乌斯 0 前言 建议先看这篇比较简略的文章(有大概了解) 莫比乌斯函数_为最后的荣光的博客-CSDN博客 再根据个人情况食用本篇博客 1 莫比乌斯函数 1 1 定义 首先对 n n n 唯一分解: 唯一分解: 唯一分解定理一篇就够了_求…

Springboot——根据需求创建后端接口

需求分析: 具体返回如下JSON格式数据 含有四个属性列:id 和 username 和photo 和followerCount 第一步: 首先按照下面文章创建一个模板项目 SpingBoot——SB整合MB的web项目模板_北岭山脚鼠鼠的博客-CSDN博客 第二步: 使用如下的建表语句在一个数据库中新建一个用户表 CREA…

【C++进阶之路】类和对象(下)

文章目录 一.再谈构造函数初始化对象的两种方式1.函数体内赋值2.初始化列表深入理解初始化列表 3.explicit隐式类型转换 二.static成员引言static成员static成员函数练习 三.友元引入友元函数友元类 四.内部类基本概念练习 五 .匿名对象引入匿名对象补充:编译器的优…

一百一十三、DBeaver——从hive同步数据到clickhouse

目标:把hive的DM层结果数据导出到clickhouse数据库,试了kettle、sqoop等多种方法都报错,尤其是kettle,搞了大半天发现还是不行。结果目前就只能用DBeaver同步数据。 准备工作:hive和clickhouse中都建好表 第一步&…

$nextTick与原生js先渲染dom再执行函数的方式

$nextTick与原生js先渲染dom再执行函数的方式 vue的$nextTick 简述 Vue.js 的 $nextTick 方法是用于在 DOM 更新后执行延迟回调的方法。 当 Vue.js 更新 DOM 后,有时候需要执行一些操作(如获取更新后的 DOM 元素的位置等),但是…