Turbolinks 5：在特定页面添加来自其他站点的外部JavaScript文件

Question

我正在使用turbolinks 5 beta 1，对于某些特定页面，我想加载外部JavaScript文件。

举个例子，我有一个联系人页面，希望通过加载谷歌地图API来显示地图。当访问根页面时不应加载该文件，而是在单击到达联系人页面链接后再进行加载。

在Turbolinks 2中可以生成JavaScript脚本标签，但似乎不再起作用。

如果需要的话，还可以检查JavaScript是否已经加载，否则可以异步加载它。

像这样：

loadScript = (src, callback) ->
  script = document.createElement("script")
  script.type = "text/javascript"
  script.onload = callback if callback
  document.getElementsByTagName("head")[0].appendChild(script)
  script.src = src

initialize = ->
  # init map here

load = ->
  if $('#gmap').size > 0
    if typeof(google) == 'function'
      initialize()
    else
      loadScript 'https://maps.googleapis.com/maps/api/js?&callback=initialize'

$(document).on 'turbolinks:load', -> load()

这是处理该问题的唯一方式吗？还是有更简单的方法吗？

- mordaroso

---

Mordaroso，根据此评论，您的解决方案非常好：https://github.com/turbolinks/turbolinks/issues/107#issuecomment-236436760。 我们可以在turbolinks gem中打开一个PR，添加一个带有您发布的代码的辅助JavaScript函数，以便开发人员可以轻松使用它，否则创建一个新的gem来提供此辅助程序。 - ZedTuX

Answer 1

看看alphinejs。它是为此目的而构建的。根据文档，

Alpine.js以比Vue或React等大型框架低得多的成本为您提供了反应式和声明性的自然特性。您可以保留DOM，并根据需要添加行为。将其视为JavaScript的Tailwind。

- Salvation Arinze

Answer 2

现在你可以尝试 stimulus。

它是专门为页面特定的 JavaScript 动态效果而设计的。

• 像<%= javascript_pack_tag 'merchant' %>这样添加一个新的脚本标签
• 在 merchant 文件中，你可以依赖 stimulus 来处理 turbolinks 和 jquery 的 ready 事件。

你甚至可以使用 webpack 和 es6。

// hello_controller.js
import { Controller } from "stimulus"

export default class extends Controller {
  static targets = [ "name", "output" ]

  greet() {
    this.outputTarget.textContent =
      `Hello, ${this.nameTarget.value}!`
  }
}

- hacker Zhang

---

虽然这个链接可能回答了问题，但最好在此处包含答案的基本部分并提供参考链接。如果链接页面更改，仅链接的答案可能会失效。-【来自审查】 - Harsha Biyani

明白了 @HarshB。我是新来的，还在努力融入。 - hacker Zhang