EJS模板的全局变量实现

简介: > 知识补充:什么是EJS? EJS 是一个用 JavaScript 语言生成 HTML 页面的模板库,所以对前端开发者非常友好,几乎没有额外的学习成本。常在 Node.js 服务端使用。# 问题背景目前我们的网盘系统使用了类似淘宝中途岛架构的方式,服务端用Node.js 来渲染HTML模板,其中服务端使用的模板引擎就是 EJS。由于不同页面需要引用的CDN资源不一样,所以编写成了不同
知识补充:什么是EJS? EJS 是一个用 JavaScript 语言生成 HTML 页面的模板库,所以对前端开发者非常友好,几乎没有额外的学习成本。常在 Node.js 服务端使用。

问题背景

目前我们的网盘系统使用了类似淘宝中途岛架构的方式,服务端用Node.js 来渲染HTML模板,其中服务端使用的模板引擎就是 EJS。

由于不同页面需要引用的CDN资源不一样,所以编写成了不同的渲染模板,比如登录页面。而模板中的一些变量的需要经常地改动,比如CDN资源的版本信息。由于模板之间都某些CDN资源是共享的,比如国际化的资源文件、第三方SDK,所以希望设置一个全局变量实现统一修改,而不是到每个模板配置项中进行复制粘贴。

我们进行模板编辑的运维平台,目前并没有提供跨模板共享变量的功能,但是为了方便渲染逻辑的复用,提供了模板引用的功能,也就是说一些公共模板可以被页面模板所引用。

解决思路

官方文档

EJS 功能比较简单,文档也非常简单(估计一千字左右),不到一页。
翻遍文档也没找到全局变量的使用说明

三方示例

既然官方找不到正解,看看“民间”有没有解决方案。

网上搜索发现,比较接近的一种实现方式是在 express.js 中保存全局变量,然后在渲染模板的时候传入。

基本上就是借助Node.js服务端来实现,这种方案需要对代码进行改动,不能通过配置实现,方式并不优雅。

深入底层

回到问题本身,目的在于复用一些配置,能够在版本更新的时候做到一处修改每个模板都生效,而不是不同模板重复修改(版本号)。

在浏览器和Node.js 环境中,我们可以通过 window 或 Global 默认全局变量来传递参数。但其实在 ESM 和 CommonJS 的模块机制中还有另一种实现方式,那就是用一个模块(或配置文件)专门来保存全局变量,然后其它模块按需引用。在EJS模板上实现会遇到一个问题:模板不支持导出变量,只支持变量引入。

有没有办法把模板的变量导出来了呢?

答案当然是有的,熟悉 JavaScript 语言的同学都知道,函数调用的入参如果为对象数据类型的时候使用的是浅拷贝,也就是说函数内部可以对入参进行修改,然后函数调用方就可以得到最新的值。只是为了避免产生副作用,这种修改入参的方式在开发的时候并不推荐,很少用到。

最后的实现方式如下:

// Variable 模板
<%
  // Config once, run anywhere!
  var font = config.font || "font_1664786_pvgug973rb8";
  config.fontURL = `//at.alicdn.com/t/${font}.js`;
  ......
%>
<% var config = {} %>
<%- include('Variable', {config}) %>
<script src="<%=config.fontURL%>"></script>

总结

遇到技术问题如果官方没有提供解决方案的话,如果在官方文档上找不到实现方式的话,可以在两个思路方向上进行突破:

  • 横向借助第三方模。
  • 纵向深入底层原理。
相关文章
|
关系型数据库 MySQL Linux
【Linux】jdk & Tomcat & MySql的安装及Linux后端接口部署
【Linux】jdk & Tomcat & MySql的安装及Linux后端接口部署
251 0
axios设置请求头无效
axios设置请求头无效
1353 0
|
7月前
|
存储 人工智能 弹性计算
数智化转型不是“买硬件”,DeepSeek一体机别乱上
过去一个月,DeepSeek一体机成为热门生意,各厂商纷纷推出相关产品。然而,其是否为企业最优解仍需探讨。云厂商如华为云已上线DeepSeek系列模型推理服务,提供全面部署方案。本文对比两种典型部署方式,解析一体机的算力短板与场景局限,并探讨云服务的成本、稳定性和数据安全优势。大模型落地需回归企业核心诉求,理性选择而非盲目跟风。文中强调技术自由度与场景丰富度的重要性,建议企业在数智化转型中谨慎决策,确保技术投入带来长期价值。
328 27
|
JSON 前端开发 JavaScript
总结 Vue3 的一些知识点:Vue3 Ajax(axios)
总结 Vue3 的一些知识点:Vue3 Ajax(axios)
|
SQL 数据库连接 API
SqlAlchemy 2.0 中文文档(五十五)(3)
SqlAlchemy 2.0 中文文档(五十五)
382 1
|
SQL 数据库连接 API
SqlAlchemy 2.0 中文文档(二十八)(1)
SqlAlchemy 2.0 中文文档(二十八)
323 2
|
前端开发
从XHR、Promise到手动封装简易axios
从XHR、Promise到手动封装简易axios
217 0
|
缓存 负载均衡 Oracle
面试官:说下你在项目中是如何处理高并发的???
面试官:说下你在项目中是如何处理高并发的???
555 0
面试官:说下你在项目中是如何处理高并发的???
|
SQL 存储 分布式计算
Spark与Hive的集成与互操作
Spark与Hive的集成与互操作
|
开发工具 git
git revert 多条已提交的记录
我需要撤销最后的四个提交 如果用git revert 一个一个revert 挺费劲,可以用git revert OLDER_COMMIT^..NEWER_COMMIT 这种格式,对应我的工程就是 $ git revert 54b23c2251acde.
5868 0