Rails 中 Turbo 导致 JS 变量重复声明的根源与解决方案-js教程-PHP中文网

Rails 中 Turbo 导致 JS 变量重复声明的根源与解决方案

Rails 7 默认启用 Turbo，通过缓存并复用页面 DOM 来实现快速导航；但未清理旧脚本时，重复插入标签会导致 const 变量二次声明报错，而硬刷新会重建完整上下文，故无此问题。

rails 7 中 turbo 导致 js 变量重复声明的根源与解决方案：rails 7 默认启用 turbo，通过缓存并复用页面 dom 来实现快速导航；但未清理旧脚本时，重复插入 `<script>` 标签会导致 `const` 变量二次声明报错，而硬刷新会重建完整上下文，故无此问题。</script>

在 Rails 7 应用中，当你使用 link_to 跳转到含内联脚本的页面（如 <script>const chart_data = <%= sanitize @transactions %>;</script>）时，Turbo 会通过 Turbo Frame 或 Turbo Drive 复用当前页面的和已执行的 JS 上下文，并仅替换内容。但关键问题在于：Turbo 不会自动移除前一页中已注入的 <script></script> 标签——这意味着每次跳转都会重新执行该 <script></script> 块，从而对 const chart_data 发起第二次声明，触发 Uncaught SyntaxError: redeclaration of const chart_data。

而手动刷新（F5 或地址栏回车）则绕过 Turbo 缓存机制，触发完整 HTML 文档重载（full page reload），浏览器清空 JS 执行环境后重新解析整个页面，自然避免了变量重复声明。

✅ 推荐解决方案（按优先级排序）

1. 禁用 Turbo（快速验证 & 局部修复）

适用于单页或临时调试：

添加 data: { turbo: false } 后，链接将退化为传统 HTTP GET 请求，强制整页刷新，行为等同于手动 reload。

⚠️ 注意：这不是长期方案，会丢失 Turbo 带来的用户体验优势（如平滑过渡、保留表单状态等）。

2. 改用模块化、防重复执行的 JS 初始化模式（推荐）

避免在视图中直接写 const 声明，改为「声明 + 挂载」分离：

<!-- index.html.erb -->
<div id="chart-container" data-chart-data="<%= j @transactions.to_json %>"></div>
<script type="module">
  // ✅ 安全：模块脚本天然具有作用域隔离，且不会重复执行
  import { renderChart } from "/assets/charts.js";
  document.addEventListener("turbo:load", () => {
    const el = document.getElementById("chart-container");
    if (el && !el.dataset.chartRendered) {
      const data = JSON.parse(el.dataset.chartData);
      renderChart(data);
      el.dataset.chartRendered = "true"; // 防重复渲染
    }
  });
</script>

对应 app/javascript/charts.js：

Comprehensive Three.js 3D graphics reference

详细的 Three.js 3D 图形参考，涵盖场景设置、相机、几何体、材质、光照、动画、控制器、加载器、数学工具和调试。

下载

export function renderChart(data) {
  // 实际图表逻辑，如 Chart.js 初始化
  console.log("Rendering chart with", data.length, "transactions");
}

✅ 优势：

利用 turbo:load 事件精准控制执行时机；
dataset 标记确保同一元素只初始化一次；
JSON 数据通过 data-* 属性传递，规避模板内联 JS 的语法风险；
符合 Rails 7+ 的 JS 架构演进方向（ESM + Import Maps / JS Bundler）。

3. 全局统一处理：封装安全的 `declareOnce` 工具函数

若需保留部分内联脚本习惯，可定义一个防重声明工具：

<script>
  window.declareOnce = (name, value) => {
    if (typeof window[name] === 'undefined') {
      Object.defineProperty(window, name, {
        value,
        writable: false,
        enumerable: true,
        configurable: false
      });
    }
  };
</script>

然后在视图中使用：

<script>
  declareOnce('chart_data', <%= raw @transactions.to_json %>);
</script>

? 原理：Object.defineProperty 确保属性不可被后续 const/let/var 覆盖，且 writable: false + configurable: false 提供强防护。

? 关键总结

场景	行为	是否触发重声明
`link_to`（默认 Turbo）	DOM 局部替换，`<script></script>` 重复执行	✅ 是
浏览器刷新（F5）	全量重建 JS 环境	❌ 否
`data-turbo="false"`	强制整页 reload	❌ 否
`turbo:load` + `dataset` 标记	按需、单次执行	❌ 否