如何实现EJS模板与外部JS文件共用同一个数组变量

EJS模板运行在服务端渲染阶段，独立JS文件运行在用户浏览器端，二者不在同一个运行上下文，独立JS默认无法读取EJS渲染时传入的变量，需要通过全局变量注入的方式实现同一份数据的共享，具体操作如下：

操作步骤 #

• 在EJS模板中注入全局变量，这段脚本必须放在独立JS文件引入标签之前，保证JS加载执行时变量已经初始化完成：

<!-- 把服务端的array序列化成JS字面量，挂载到window全局对象 -->
<script>
  // 注意这里必须用<%- %>输出，不要用<%= %>，后者会转义引号导致JSON语法错误
  window.sharedArray = <%- JSON.stringify(array) %>;
</script>
<!-- 之后再引入你的独立JS文件 -->
<script src="/path/to/your/independent.js"></script>

• EJS模板内的遍历渲染逻辑保持原有写法即可，直接使用服务端传入的array变量渲染列表：

<% for (var i = 0; i<array.length;i++){ %>
  <li><%= array[i] %></li>
<%}%> 

• 修改独立JS文件内的逻辑，直接读取全局挂载的共享数组即可，这个数组和EJS渲染用的是同一份服务端输出的数据：

function change() {
  this.innerHTML = window.sharedArray[0];
}

注意事项 #

• 禁止直接在独立JS文件里写array变量读取：独立JS文件默认不会经过EJS引擎解析，直接写会抛出array is not defined的引用错误。
• 如果数组内容包含用户提交的不可信内容，序列化输出前建议做XSS转义，避免恶意脚本注入。
• 该方式拿到的是页面首次渲染时的数组快照，后续服务端的数组更新不会自动同步到前端，需要重新请求接口才能获取最新值。

内容的提问来源于stack exchange，提问作者worker2