如何防止加载不正确的 .js.coffee 文件

Question

在我的 rails 应用程序中，似乎所有 .js.coffee 文件都被加载到每个页面，无论如何。我遇到的问题是正在加载locations.js.coffee 文件，然后在函数中返回一个空值，因为locations.js.coffee 文件正在查找的表在任何其他页面上都不存在不是位置页面。

注意：在每个文件中：users.js.coffee、locations.js.coffee 和campaigns.js.coffee 我分别放置了console.log("users.coffee loaded") 、console.log("locations.coffee loaded") 和console.log("campaigns.coffee loaded") 看看是否已经加载

例如，刷新位置页面会成功输出到控制台：

但冒险进入用户或活动页面将尝试加载文件 locations.js.coffee，但由于 locatrions.js.coffee 所依赖的 ID 为 #restaurantLocations 的表在用户或活动中不存在，因此结果错误是：

对于行：table.columns().eq(0).each (colIdx) 在文件 locations.js.coffee 中。

如何防止此错误或仅允许为正确的页面加载正确的文件并阻止其他页面加载？

（剩余的locations.js.coffee代码）：

jQuery ->
  console.log("locations.coffee loaded")

  # Setup - add a text input to each footer cell
  $("#restaurantLocations tfoot th").each ->
    title = $("#restaurantLocations thead th").eq($(this).index()).text()
    $(this).html "<input type=\"text\" placeholder=\"Search " + title + "\" />"

  # DataTable
  table = $("#restaurantLocations").DataTable()

    # Apply the search
  table.columns().eq(0).each (colIdx) ->
    $("input", table.column(colIdx).footer()).on "keyup change", ->
      table.column(colIdx).search(@value).draw()

  # Hiding the id column, but for use for data manipulation
  table.column( 0 ).visible( false )

  # Allowing multi-select
  $("#restaurantLocations tbody").on "click", "tr", ->
    $(this).toggleClass "selected"

  # Allowing deletion (works)
  $("#deleteLocations").click ->
    multiSelected = table.rows(".selected").data()
    table.rows(".selected").remove().draw false
    for locationSelected in multiSelected
      id = locationSelected[0]
      $.ajax({
        url: "/locations/" + id,     # Note: $.ajax setup works as setting /locations/(id number) will allow deletion
        type: "post",
        dataType: "json",
        data: {"_method":"delete"}
      })

  # Conditional 'Select All' (works)
  $("#selectAllLocations").click ->
    table.$('tr', {"filter":"applied"}).addClass "selected"

  # Deselecting all (works)
  $("#deSelectAllLocations").click ->
    table.$("tr").removeClass "selected"

Answer 1

默认情况下，Rails 在app/assets/javascripts/application.js 包含一个文件，它需要app/assets/javascripts 中的所有其他文件。然后，默认应用程序布局包含该文件。

还有其他方式来组织您的资产，包括controller-specific assets。这些需要自定义您的资产配置。

但是，我不建议这样做。如果您可以编写 JavaScript 以使其可以包含在每个页面上，并且在不需要的页面上不执行任何操作，那就更好了。

有很多方法可以做到这一点：一种简单的方法是使用 jQuery 在页面正文或页面上的其他位置查找特定类。

在上面的代码中，您需要做的就是将 if $("#restaurantLocations").length > 0 包裹在整个事物周围（但在 jQuery 回调函数内）。

这会给您带来一些好处：

• 配置更简单，遵循 Rails 默认约定，更易于理解。
• 它对应用程序的更改更具弹性。如果您需要在新页面上使用该 JavaScript，或者在现有页面上不再需要它，您只需要添加或删除相关的类（或您正在搜索的任何标记），而不是对您的脚本标签大惊小怪或资产清单中的 require 语句。
• 它避免了重复。如果不同页面上的脚本共享共同的依赖关系，则需要在两个顶级脚本中都需要它们。
• 这对用户来说更好，因为在预编译资产后，您最终会在应用程序的每个页面上使用一个连接和压缩的文件。用户只需下载一次，然后在导航到其他页面时，它将从缓存中加载。除非有大量 JavaScript 仅限于大多数用户从未访问过的页面，否则将所有内容结合起来会更有效。

阅读The Asset Pipeline Rails Guide，详细了解资产在 Rails 中的工作方式。