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

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。

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

VMware安装Ubuntu系统

VMware安装Ubuntu系统 1.首先选择文件,点击新建虚拟机 2.选择自定义,点击下一步 3.点击下一步 4.选择稍后安装操作系统,点击下一步 5.选择Linus操作系统,版本选择Ubuntu64位,点击下一位 6.自己看图 7. 这里根据自…

Leetcode50. Pow(x, n)

Every day a Leetcode 题目来源&#xff1a;50. Pow(x, n) 解法1&#xff1a;递归 代码&#xff1a; /** lc appleetcode.cn id50 langcpp** [50] Pow(x, n)*/// lc codestart class Solution { public:double myPow(double x, int n){if (n 0)return 1.0;if (n < 0)re…

必定收藏:国内免费可用 ChatGPT 网页版

ChatGPT是一个基于人工智能的聊天机器人&#xff0c;它可以与用户进行自然语言交互。ChatGPT使用了最新的自然语言处理技术&#xff0c;包括深度学习和神经网络&#xff0c;以便更好地理解用户的意图和回答用户的问题。 ChatGPT可以回答各种问题&#xff0c;包括但不限于常见问…

让chatGPT给我写一个CSS,我太蠢了

前言 CSS这东西&#xff0c;让AI写的确有点难度&#xff0c;毕竟它写出来的东西&#xff0c;没办法直接预览&#xff0c;这是其次。重要的是CSS这东西怎么描述&#xff0c;不好描述啊&#xff0c;比如我让他给我制作一个这样的效果出来&#xff0c;没办法描述&#xff0c;所以…

5.13下周黄金最新行情走势分析及多空交易策略

近期有哪些消息面影响黄金走势&#xff1f;下周黄金多空该如何研判&#xff1f; ​黄金消息面解析&#xff1a;周五(5月12日)美市尾盘&#xff0c;现货黄金收报2010.23美元/盎司&#xff0c;下跌4.57美元或0.23%&#xff0c;日内最高触及2022.59美元/盎司&#xff0c;最低触及…

小程序组件

swiper swiper 和 swiper-item 结合使用&#xff0c;&#xff0c; swiper有默认高度 300rpx 属性&#xff1a; autoplay &#xff1a; 自动播放circular &#xff1a; 循环播放indicator-dots &#xff1a; 显示指示点indicator-active-color &#xff1a; 轮播选中的颜色 &…

cookie、session、token的区别是什么

前言 今天就来说说session、cookie、token这三者之间的关系&#xff01;最近这仨玩意搞得头有点大&#x1f923; 1.为什么会有它们三个&#xff1f; 我们都知道 HTTP 协议是无状态的&#xff0c;所谓的无状态就是客户端每次想要与服务端通信&#xff0c;都必须重新与服务端链接…

空调群控、智能报警,这些设备有点牛

空调绝对是夏季使用率高的电器之一&#xff0c;尤其是今年全国各地高温不断&#xff0c;说“命都是空调给的”都不为过...... 在家的时候&#xff0c;我们可以随手开关空调&#xff0c;非常方便&#xff0c;如果是学校教学楼、工厂宿舍、银行网点、办公大楼、机房等地的管理者…

一个打通基于XML管理Bean

目录 准备工作 添加依赖 引入配置文件 获取bean ①方式一&#xff1a;根据id获取 ②方式二&#xff1a;根据类型获取 ③方式三&#xff1a;根据id和类型 ④注意的地方 ⑤扩展知识 依赖注入之setter注入 ①创建学生类Student ②配置bean时为属性赋值 ③测试 依赖注…

ChatGPT搭建AI网站实战

1.概述 ChatGPT是一款基于GPT-3.5架构的大型语言模型&#xff0c;它能够进行自然语言处理和生成对话等任务。作为一款智能化的聊天机器人&#xff0c;ChatGPT有着广泛的应用场景&#xff0c;如在线客服、智能助手、个性化推荐等。今天笔者给大家分享一下如何使用ChatGPT的API模…

开发环境搭建和创建STM32工程

目录 一、开发环境搭建 1. STM32CubeMX 2.Keil安装 二、创建STM32工程 一、开发环境搭建 1. STM32CubeMX ST公司出品 工具链接 https://www.st.com/zh/development-tools/stm32cubemx.html STM32CubeMX是一种图形工具&#xff0c;通过分步过程可以非常轻松地配置STM32微控制器和…

【IIS搭建网站】如何使用本地电脑做服务器搭建web站点并公网访问

目录 前言 Windows网页设置 Windows IIS功能设置 IIS网页访问测试 Cpolar内网穿透 下载安装Cpolar Cpolar云端设置 3.3 Cpolar本地设置 公网访问测试 结语 前言 在网上各种教程和介绍中&#xff0c;搭建网页都会借助各种软件的帮助&#xff0c;比如网页运行的Apache…

字节面试挂在2面,复盘总结了经验,决定再战一次.....

先说下我基本情况&#xff0c;本科不是计算机专业&#xff0c;现在是学通信&#xff0c;然后做图像处理&#xff0c;可能面试官看我不是科班出身没有问太多计算机相关的问题&#xff0c;因为第一次找工作&#xff0c;字节的游戏专场又是最早开始的&#xff0c;就投递了&#xf…

算法修炼之练气篇——练气十八层

博主&#xff1a;命运之光 专栏&#xff1a;算法修炼之练气篇 前言&#xff1a;每天练习五道题&#xff0c;炼气篇大概会练习200道题左右&#xff0c;题目有C语言网上的题&#xff0c;也有洛谷上面的题&#xff0c;题目简单适合新手入门。&#xff08;代码都是命运之光自己写的…

轻松搭建冒险岛服务器-冒险岛私服搭建详细教程

想要拥有一个属于自己的冒险岛世界吗&#xff1f;想要一步步学习如何架设冒险岛服务器吗&#xff1f;本文将从如何选择服务器、安装系统、配置环境、搭建数据库、部署网站、上传文件、启动服务等8个方面&#xff0c;一步步为大家详细讲解冒险岛架设教程。让你轻松打造属于自己的…

Git常用操作:基础命令、生成公钥、webhook同步

这里写目录标题 下载安装GIT基础命令克隆初始化与仓库建立连接下拉代码提交代码清空本地缓存 本地生成GIT公钥webhook&#xff08;本地-码云-服务器代码同步&#xff09; 下载安装GIT 此处只介绍windows系统下的安装&#xff0c;linux一般都是自带git&#xff08;自行百度&…

Centos7安装Docker

0.安装Docker Docker 分为 CE 和 EE 两大版本。CE 即社区版&#xff08;免费&#xff0c;支持周期 7 个月&#xff09;&#xff0c;EE 即企业版&#xff0c;强调安全&#xff0c;付费使用&#xff0c;支持周期 24 个月。 Docker CE 分为 stable test 和 nightly 三个更新频道…

Java设计模式 14-访问者模式

访问者模式 这个模式用的很少&#xff0c;《设计模式》的作者评价为&#xff1a; 大多情况下&#xff0c;你不需要使用访问者模式&#xff0c;但是一旦需要使用它时&#xff0c;那就真的需要使用了 一、测评系统的需求 1)将观众分为男人和女人&#xff0c;对歌手进行测评&…

多态与虚函数

多态与虚函数 多态的引入多态与虚函数多态编译时多态运行时多态 多态的原理静态联编和动态联编 多态的引入 学过C继承的话应该都知道在继承中存在一种菱形继承&#xff0c;假设存在一个类&#xff08;person&#xff09;&#xff0c;其派生出两个子类&#xff0c;分别是studen…

ArcGIS栅格重采样与算法选择

本文介绍在ArcMap软件中&#xff0c;实现栅格图像重采样的具体操作&#xff0c;以及不同重采样方法的选择依据。 首先&#xff0c;如下图所示&#xff0c;是我们待重采样的栅格图像的属性界面。其中&#xff0c;可以看到此时栅格像元的边长为0.4867左右&#xff08;由于图层是地…