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>

总结

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

  • 横向借助第三方模。
  • 纵向深入底层原理。
相关文章
|
机器学习/深度学习 自然语言处理 语音技术
字正腔圆,万国同音,coqui-ai TTS跨语种语音克隆,钢铁侠讲16国语言(Python3.10)
按照固有的思维方式,如果想要语音克隆首先得有克隆对象具体的语言语音样本,换句话说,克隆对象必须说过某一种语言的话才行,但现在,coqui-ai TTS V2.0版本做到了,真正的跨语种无需训练的语音克隆技术。 coqui-ai TTS实现跨语种、无需训练克隆语音的方法是基于Tacotron模型,该模型使用了一种音素输入表示来鼓励在不同语种之间共享模型容量。此外,还引入了对抗损失项,以鼓励模型将说话者身份与语音内容进行解耦。这使得模型能够在不同语种之间进行语音合成,而无需在任何双语或平行示例上进行训练。
字正腔圆,万国同音,coqui-ai TTS跨语种语音克隆,钢铁侠讲16国语言(Python3.10)
|
JSON 前端开发 JavaScript
AVUE:前端搬砖神器,一套基于vue+elementUI的框架
AVUE:前端搬砖神器,一套基于vue+elementUI的框架
2847 0
AVUE:前端搬砖神器,一套基于vue+elementUI的框架
|
XML Java 数据库连接
Mybatis引用静态常量或者枚举类型
Mybatis引用静态常量或者枚举类型
856 0
|
JSON 前端开发 数据可视化
AMIS【部署 01】amis前端低代码框架可视化编辑器amis-editor本地部署流程
AMIS【部署 01】amis前端低代码框架可视化编辑器amis-editor本地部署流程
3833 0
|
缓存 资源调度 前端开发
微前端-qiankun:vue3-vite 接入 vue3、nuxt3、vue2、nuxt2等子应用
微前端-qiankun:vue3-vite 接入 vue3、nuxt3、vue2、nuxt2等子应用
3142 0
|
1月前
|
人工智能 Ubuntu Linux
CC Switch怎么用:添加供应商、一键切换全攻略(全网最详细)
CC Switch 是一款免费开源的桌面工具,专为统一管理 AI 编程工具(如 Claude Code、Codex、Gemini CLI)的 API 供应商而设计。它提供图形化界面,支持一键切换官方/中转/自建供应商,集成 MCP、提示词、Skills 管理及用量统计,大幅简化配置流程。(239字)
|
7月前
|
Shell API
最新,通过GACCode配置Codex桌面客户端使用方案!
本指南详解Codex桌面端配置流程:①安装客户端;②获取gaccode.com的API Key(无订阅可邮件申请);③创建并编辑~/.codex/config.toml文件,配置gac模型提供方与gpt-5.4模型;④导出CODEX_API_KEY环境变量;⑤重启应用即可开始智能对话。
最新,通过GACCode配置Codex桌面客户端使用方案!
|
JavaScript 前端开发 索引
JS遍历数组里数组下的对象,根据数组中对象的某些值,组合成新的数组对象
这篇文章介绍了如何在JavaScript中遍历数组里数组下的对象,并根据对象的某些属性值组合成一个新的数组对象。主要内容包括使用ES6的`for...of`循环来遍历数组对象,然后根据需要提取对象中的属性值,并将它们放入新的对象中,最终形成一个新的对象数组以供使用。
|
NoSQL 测试技术 Redis
Redis批量删除Key的三种方式
Redis批量删除Key是优化数据库性能的重要操作,本文介绍三种高效方法:1) 使用通配符匹配(KEYS/SCAN+DEL),适合不同数据规模;2) Lua脚本实现原子化删除,适用于需要事务保障的场景;3) 管道批量处理提升效率。根据实际需求选择合适方案,注意操作不可逆,建议先备份数据,避免内存溢出或阻塞。
|
人工智能 自然语言处理 JavaScript
受够垃圾翻译!CodeBuddy 8 分钟造神器,划词秒翻 + 自动适配所有网页
本文介绍如何使用CodeBuddy结合蓝耘API开发一款高效翻译插件。通过CodeBuddy的智能代码生成功能与蓝耘API的强大翻译能力,解决了现有翻译工具质量差、速度慢、定制难等问题。具体步骤包括获取蓝耘API、安装CodeBuddy插件、生成README文件及代码、测试与优化插件功能。最终实现划词秒翻、自动适配网页的翻译工具,适用于GitHub等技术场景。项目代码已开源,用户可通过链接注册并体验。
1491 1