ruby-on-rails - Turbolinks 不友好？

Question

我完全明白为什么 Turbolinks 5 很棒，如果您正在阅读它，您可能也会这样做，但我对它与其他脚本的配合如此糟糕感到非常沮丧。

迄今为止，还没有简单的解释(人类可读的)来展示如何以允许它们运行的​​方式包装现有的 jQuery 脚本。以这个为例:https://github.com/Bttstrp/bootstrap-switch 。写得很好，简单易懂。您将 js 和 css 加载到 Assets 管道中并在某个页面上实例化它。

# view.html.erb
<input type="checkbox" class="switch"> switch button
<script type="text/javascript">
    $(".switch").bootstrapSwitch();
</script>

您转到 view.html，单击另一个页面，单击返回，您会看到两个按钮。

接下来，您花了 5 个小时寻找一种方法，让 Turbolinks 仅加载一次 bootstrapSwitch 实例(如果之前未加载过)。好吧，即使你这样做了，功能也会消失。单击它不会起作用。

$(document).on("turbolinks:load", function()... 将在每次 Turbolink 访问时加载它，目前，这是我让它工作的唯一方法不创建重复项是禁用 view.html 上的缓存

<%= content_for :head do %>
    <meta name="turbolinks-cache-control" content="no-cache">
<% end %>

感觉有点傻。

我认为这一切都与使用幂等有关 - https://github.com/turbolinks/turbolinks#making-transformations-idempotent但实际上你是如何做到这一点的呢？

有人可以以这个简单的插件为例，分享一个简单、优雅的解决方案来使其工作，然后我们可以用其他脚本重现它吗？

Answer 1

使用 Turbolinks 开发应用程序确实需要特定的方法才能使事情顺利运行。由于页面加载和缓存方式的差异，某些运行脚本的模式在使用 Turbolinks 时与不使用 Turbolinks 时的行为方式不同。一开始这可能看起来不友好，而且“陷阱”可能会令人沮丧，但我发现只要稍加理解，它就会鼓励更有组织、更健壮的代码:)

正如您所发现的，重复开关的问题在于插件在同一元素上被多次调用。这是因为 Turbolinks 在离开页面之前会缓存该页面，因此缓存版本包括任何动态添加的 HTML[1]，例如通过插件添加的东西。当向后/向前导航时，缓存的版本将被恢复，并且行为将被复制:/

那么如何解决这个问题呢？当使用添加 HTML 或事件监听器的代码时，通常最好在缓存页面之前拆除行为。 Turbolinks 事件是 turbolinks:before-cache。所以你的设置/拆卸可能是:

// app/assets/javascripts/switches.js
$(document)
  .on('turbolinks:load', function () {
    $('.switch').bootstrapSwitch()
  })
  .on('turbolinks:before-cache', function () {
    $('.switch').bootstrapSwitch('destroy')
  })

这有点难以测试，因为所有设置和拆卸都是在事件处理程序中完成的。更重要的是，类似的情况可能还有很多，因此为了防止重复，您可能需要引入自己的“迷你框架”来设置和拆除功能。下面逐步介绍如何创建基本框架。

这就是我们的目标:使用名称和函数调用 window.App.addFunction 来注册要调用的函数。该函数获取元素并调用插件。它返回一个带有用于拆卸的 destroy 函数的对象:

// app/assets/javascripts/switches.js
window.App.addFunction('switches', function () {
  var $switches = $('.switch').bootstrapSwitch()
  return {
    destroy: function () {
      $switches.bootstrapSwitch('destroy')
    }
  }
})

以下实现了addFunction，将添加的函数存储在functions属性中:

// app/assets/javascripts/application.js
// …
window.App = {
  functions: {},

  addFunction: function (name, fn) {
    this.functions[name] = fn
  }
}

我们将在应用初始化时调用每个函数，并将每个函数调用的结果存储在 results 数组中(如果存在):

// app/assets/javascripts/application.js
// …
var results = []

window.App = {
  // …
  init: function () {
    for (var name in this.functions) {
      var result = this.functions[name]()
      if (result) results.push(result)
    }
  }
}

拆除应用程序涉及销毁对任何结果调用destroy(如果存在):

// app/assets/javascripts/application.js
// …
window.App = {
  // …
  destroy: function () {
    for (var i = 0; i < results.length; i++) {
      var result = results[i]
      if (typeof result.destroy === 'function') result.destroy()
    }
    results = []
  }
}

最后我们初始化并拆卸应用程序:

$(document)
  .on('turbolinks:load', function () {
    window.App.init.call(window.App)
  })
  .on('turbolinks:before-cache', window.App.destroy)

将这些放在一起:

;(function () {
  var results = []

  window.App = {
    functions: {},

    addFunction: function (name, fn) {
      this.functions[name] = fn
    },

    init: function () {
      for (var name in this.functions) {
        var result = this.functions[name]()
        if (result) results.push(result)
      }
    },

    destroy: function () {
      for (var i = 0; i < results.length; i++) {
        var result = results[i]
        if (typeof result.destroy === 'function') result.destroy()
      }
      results = []
    }
  }

  $(document)
    .on('turbolinks:load', function () {
      window.App.init.call(window.App)
    })
    .on('turbolinks:before-cache', window.App.destroy)
})()

函数现在独立于调用它们的事件处理程序。这种解耦有几个好处。首先，它更易于测试:window.App.functions 中提供了函数。您还可以选择何时调用您的函数。例如，假设您决定不使用 Turbolinks，则唯一需要更改的部分是调用 window.App.init 时。

---

[1] 我认为这比默认浏览器行为(按“后退”使用户返回到首次加载时的页面)更好。 Turbolinks“返回”使用户返回到离开时的页面，这可能是用户所期望的。