为何通过link_to访问Rails页面会触发const变量重声明，刷新却正常？

核心原因：Turbo的页面加载机制 #

Rails 7默认启用了Turbo，当你用link_to跳转页面时，Turbo不会让浏览器完整刷新页面，而是通过AJAX请求新页面内容，再替换当前页面的<body>部分。这种情况下，之前页面的<script>已经在全局作用域声明了const chart_data，新加载的页面又重复声明同一个常量，就触发了Uncaught SyntaxError: redeclaration of const chart_data错误。

而刷新页面时，浏览器会重置整个执行环境：之前的全局变量、脚本执行上下文都会被清空，重新加载页面后声明const chart_data相当于第一次声明，自然不会有冲突。

解决方法 #

1. 用块级作用域包裹变量
   把变量限制在局部作用域内，避免污染全局：

   <script>
     {
       const chart_data = <%= sanitize @transactions %>;
       // 在此作用域内使用chart_data即可
     }
   </script>
   

2. 通过元素data属性传递数据
   把数据挂载到页面元素的自定义属性上，JS动态读取，从根源避免重复声明变量：

   <div id="transactions-container" data-data="<%= sanitize @transactions %>"></div>
   <script>
     const chart_data = JSON.parse(document.getElementById('transactions-container').dataset.data);
   </script>
   

内容的提问来源于stack exchange，提问作者broiling-clamshell