在 Turbolinks 中禁用特定头脚本的合并答案

【问题标题】：Disable merging of a specific head script in Turbolinks在 Turbolinks 中禁用特定头脚本的合并
【发布时间】：2017-10-03 20:50:55
【问题描述】：

我正在开发一个 Rails 应用程序，该应用程序在 application.html.erb 的 head 中呈现 JavaScript，其中包含以下内容：

<head>
  ...
  <script><%= render 'certified_mail/mail_list_loader.js' %></script>
</head>

上面代码渲染的 JS 部分通过控制器的实例变量传递参数进行 AJAX 调用：

# _mail_list_loader.js.erb
document.addEventListener("turbolinks:load", function() {
  $.ajax({
    url: '/certified_mail/mail_list',
    type: 'get',
    data: {
      page: <%= @page %>,
      rut: <%= @rut || 'null' %>,
      from: <%= @from || 'null' %>,
      to: <%= @to || 'null' %>,
      ids: <%= @outdated_message_ids.to_json.html_safe %>
    }
  });
});

由于 Turbolinks 会合并来自后续请求的 head 内容，因此每次 AJAX 调用的参数更改时，我都会在 head 中加载一个额外的 script，这会导致不需要的额外请求，如下图：

如何告诉 Turbolinks 在合并过程中不要考虑该特定脚本，这样我就可以避免那些额外的调用？

【问题讨论】：

标签： ruby-on-rails ruby ajax ruby-on-rails-5 turbolinks

【解决方案1】：

如何告诉 Turbolinks 在合并过程中不要考虑该特定脚本，这样我就可以避免那些额外的调用？

恐怕我不认为有一个很好的方法来做你所要求的。如果实例变量已更改，则需要附加并评估脚本。

我会推荐一种不同的方法，例如 the solution I proposed in your previous question。

我认为您所追求的是拆除事件侦听器，并在脚本执行后将其删除。我不建议这样做，因为它非常规，而且有点片状，但这是可能的。

<script id="mail-list-loader">
  // Remove the previously added event listener
  document.removeEventListener('turbolinks:load', mailListLoader)

  // Redefine the event handler and bind to the load event
  var mailListLoader = function() {
    $.ajax({
      url: '/certified_mail/mail_list',
      type: 'get',
      data: {
        page: <%= @page %>,
        rut: <%= @rut || 'null' %>,
        from: <%= @from || 'null' %>,
        to: <%= @to || 'null' %>,
        ids: <%= @outdated_message_ids.to_json.html_safe %>
      }
    })
  }
  document.addEventListener('turbolinks:load', mailListLoader)

  // Remove the script to prevent build up in the head
  document.head.removeChild(document.getElementById('mail-list-loader'))
</script>

正如我所说，我不建议这样做，因为您最终可能会遇到更多的麻烦，但它可以作为有效需要发生的演示。

希望对您有所帮助。

【讨论】：

【解决方案2】：

将脚本标签放在<body> 标签内怎么样？就我而言，我希望某些样式表 <link> 标签仅应用于一个页面，但在页面更改时不与另一页面 <link> 标签合并。所以我最终将那些不需要合并到<body>中的标签移动了。

【讨论】：