5

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

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

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

4

2 回答 2

0

你不应该有“页面特定”的代码，考虑到理论上你应该有一个大的 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 文档中找到

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

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

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

Rails 将代码放在 html 末尾的原因是，这样可以在加载 javascript 代码（这是一个繁重的操作）之前查看您的 html（和 CSS），因此用户可以以这种方式开始交互/阅读您的网站. 同样通过这种方式，您可以确保正确加载所有内容，因为应该解析最后一个元素。
如果我没记错的话，我记得一些关于“同步加载 javascript”的内容，我不记得是网络请求还是实际加载了 javascript 文件，但我确实记得 script 标签是一个阻塞标签，浏览器在加载您的 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 它是一个很好的候选者。

于 2014-04-23T07:52:52.123 回答
0

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

于 2014-04-23T07:46:15.550 回答