在 Rails 4.1 中将页面特定的 jQuery 代码放在哪里？

Posted 2023-05-09

【中文标题】在 Rails 4.1 中将页面特定的 jQuery 代码放在哪里？

【英文标题】：Where to put page-specific jQuery code in Rails 4.1?

【发布时间】：2014-06-07 14:27:45

【问题描述】：

我想在 Rails 4.1 项目的特定页面上放置一些使用 jQuery 的简单 javascript 代码：

$( "#my_div" ).on( "click", function() 
  alert( $( this ).text() );
);

然而，在 Rails 4.1 中，jQuery 默认包含在 html 的最后。我知道我可以将它移到标题中，或者我可以将上面的内容放在设置为window.onload 或document.onload 的函数中。但我猜 Rails 将 jQuery 移到最后是有充分理由的，所以我很好奇这里应该做什么？

【问题讨论】：

将该文件放入公用文件夹并在所需页面上加载此脚本。虽然这不是最好的解决方案，但可能会有所帮助

【参考方案1】：

在您的 application.js 中，您可以更改它们被调用的顺序，有时必须更改该顺序以使一切运行或正确加载。我必须这样做一次，这是一项相当乏味的工作。

【讨论】：

我想我明白你在说什么......但是，我想要仅在单个页面中运行的 JavaScript 代码。我不希望 JavaScript 代码在其他任何地方运行。所以 application.js 不是我想要搞砸的。

在布局或 html 视图文件顶部使用 javascript include 标签，如

在加载 jQuery 库之前，javascript 包含标签仍然会加载它，不是吗？

是的，如果您在应用程序中加载 jquery 文件，则将在加载主文件后加载特定的部分。

【参考方案2】：

你不应该有“页面特定”的代码，理论上你应该有一个大的 JS 文件。

您的代码不是“特定于页面”的，我的意思是，如果您的页面中没有#my_div，代码将无法运行，但没关系。

在此澄清之后，您的代码应该在 app/assets/javascript 的 javascript 文件中，并且您应该在 jquery_ujs 之后使用 //= require yourfile 或其他内容（不记得正确）来要求它现在）。

你应该把你的代码放在一个“document.ready”事件中，这个事件在jquery中是这样处理的：

$(function() 
  $( "#my_div" ).on( "click", function() 
    alert( $( this ).text() );
  );
);

有关 document.ready 的更多详细信息，请访问 JQuery documentation

这确保您的代码仅在所有页面加载后执行（包括 javascript、css 等），因此当您执行代码时，不会有任何问题。

一个示例 application.js 文件可能如下所示：

//= require jquery_ujs
//= require yourfile
//= require_tree .

Rails 将代码放在 html 末尾的原因是为了在加载 javascript 代码（这是一个繁重的操作）之前可以查看您的 html（和 CSS），以便用户可以开始交互/阅读您的网站这样。同样通过这种方式，您可以确保正确加载所有内容，因为应该解析最后一个元素。 如果我没记错的话，我记得一些关于“同步加载 javascript”的内容，我不记得是网络请求还是实际加载了 javascript 文件，但我记得 script 标签是 blocking 一，浏览器在加载你的javascript文件时不会继续解析html（或渲染css），这就是为什么它在html末尾作为最后一个元素的原因。

编辑 1： 通过重新阅读您的问题，恐怕您实际上是直接在 html 中插入了一些 javascript 代码。如果是这种情况，至少在 jquery 包含在 rails 之后插入它。 无论如何，这种做法是错误的，除非您正在使用大量 javascript 构建大型 Web 应用程序（并且您可能会使用 requirejs 之类的东西），否则没有理由不使用单个 javascript 文件（多个请求比单个请求慢，您应该始终将 css 合并为一个，对于 javascript 也是如此）。正如我所说，没问题，您的代码可以包含在所有页面中，只需确保#my_div 仅出现在您真正希望该代码运行的位置。

以这种方式将代码绑定到一个类可能会更好（这可能是正确的做法）：

$(".js-spam-text").on("click", function() 
  alert($(this).text());
);

对不起这个名字，用你想要的任何东西替换 js-spam-text。例如 js-alert-message 它是一个很好的候选。

【讨论】：

在某些情况下，您希望 JavaScript/jQuery 代码仅针对单个页面执行

如果是这种情况，请使用某种类型的 If 来执行此操作，您始终可以将一个类添加到正文标记并仅在正文中执行页面的脚本标签存在（或者即使特定类存在于页面中的任何位置）。不要以不同的方式执行此操作，您绝对可以仅在特定页面上执行 javascript 代码，而无需将其拆分为多个 javascript 文件。 没有理由不在一个文件中包含 javascript。如果您需要在视图和 javascript 之间共享一些数据并且不想执行 ajax 调用，请使用 gon：github.com/gazay/gon

我同意，在某些情况下您只希望该代码在一页上。具体来说，对于部分。我理解为什么人们希望所有 javascript 代码集中放置以实现可维护性，但我不同意关于如何执行 以及在何处存储 的笼统概括。