Question

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

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

但是，使用Rails 4.1，默认情况下jQuery包含在html的最后。我知道我可以将其移到标题中，或者我可以将上面的函数设置为window.onload或document.onload。但是我猜测Rails将jQuery移到最后有一个很好的理由，所以我很好奇这里要做的是什么？

Answer 1

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

Answer 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文件，但我记得脚本标签是阻止一，浏览器在加载你的javascript文件时不会继续解析html（或渲染css），这就是它在html末尾作为最后一个元素的原因。

编辑1： 通过重新阅读你的问题，我担心你实际上是直接在html中插入一些javascript代码。如果是这种情况，至少在rails包含jquery之后插入它在任何情况下，该练习是错误的，除非您正在构建一个包含大量javascript的大型Web应用程序（并且您可能会使用类似requirejs的东西），所以没有理由不这样做单个javascript文件（多个请求比单个请求慢，你应该总是将css合并为一个，javascript相同）。正如我所说，没问题，您的代码可以包含在所有页面中，只需确保#my_div仅存在于您实际需要运行该代码的位置。

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

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

对不起该名称，将js-spam-text替换为您想要的任何内容。例如js-alert-message，它是一个很好的候选者。

在Rails 4.1中放置特定于页面的jQuery代码的位置？

2 个答案: