Rails内联Javascript和最佳实践
我对使用Rails 有点新意，我正在开发的应用程序进展顺利 – 不过我正在查看生成的HTML并注意到……
// 洒在HTML周围，当然与我使用的地方相匹配：
我想知道的是……有更好的方法来做到这一点，还是让它更干净？ 其中一些脚本标签来自部分标签，因此将它们放在“页面底部”并不能真正帮助解决这种情况。
另一种选择可能是将所有这些“标记块”推入一个数组，然后将它们写在application.rhtml文件中，但它仍然有点凌乱……
好吧，如果你真的想要使用最佳实践…不要使用内联JavaScript。 保持您的HTML，CSS和Javascript清洁并彼此分离。 理想情况下，html文件应该可以在没有CSS和javascript的情况下使用。
最简洁的方法是使用普通的html / css构建你的应用程序，并使用不引人注目的javascript来增强它，以提供更好的用户体验。
这种模式是将所有JS文件包含在页面底部，并开始使用onDomReady等function运行代码。
根据评论，我想添加一些可能的选项来帮助您入门：
- JQuery的
- YUI
- 原型
最佳做法是删除所有内联JavaScript。 但是，有3个案例我遇到了你绝对需要内联javascript的问题：
1.解决图像错误
如果图像标记引用了不存在的图像路径，则防止图像错误出现的唯一方法（即使在Web检查器中）也是这样做的：
以下方法不起作用，因为在您有时间使用jQuery获取图像之前执行了onerror事件：
$("img").error(function() { $(this).attr("src", "/i/do/exist.png") });
下面的代码不起作用，因为onerror事件不会冒泡：
$("img").live("error", function() { $(this).attr("src", "/i/do/exist.png"); });
所以你必须使用内联javascript。
2.在页面加载时呈现javascript模板
如果您等到$(document).ready将您的$(document).ready绘制到dom中的一个空容器元素中，则用户将看到空白点一瞬间。 这就是为什么当您的Twitter页面首次加载时，Feed暂时为空白。 即使您只是将一个外部脚本文件放在dom的底部，并且在那里您将动态生成的html元素附加到您的页面，甚至没有使用$(document).ready ，它仍然为时已晚。 添加容器元素后，必须立即附加动态节点：
// dynamic content here
3.您使用JSON引导您的应用程序
如果您正在使用JSON + javascript模板，最好将第一组数据引导到响应主体中，方法是将其包含在页面中（也在上面的dom示例中）。 这使得您不需要额外的ajax请求来呈现内容。
其他一切都应该使用Unobtrusive Javascript完成
Rails有很多javascript助手，谢天谢地，在Rails 3中，大多数（全部？）都是不引人注目的; 他们现在正在使用data-属性和外部rails.js文件。 然而，许多部分ruby部分javascript的gem倾向于仍然编写辅助方法添加复杂的javascript内联：
- https://github.com/rubaidh/google_analytics
- https://github.com/scrubber/jquery_grid_for_rails
- https://github.com/sandipransing/rails_tiny_mce
- https://github.com/phronos/rails_datatables
这很有帮助，但我认为只有一个清晰的自述文件描述如何将javascript添加到您的application.js更有用。 外部javascript使得更容易定制/扩展function，它可以让您更好地控制系统，并最大限度地减少html页面的重复（因此响应体更小，浏览器可以缓存外部javascript文件）。 除非您需要处理丢失的图像，即时渲染或引导一些json，否则您可以将其他所有内容放在外部javascript文件中，而不必使用Rails javascript / ajax帮助程序。
这困扰了我一段时间，我最终想出了一个双管齐下的方法。
如果您正在为封闭域开发Web应用程序，其中搜索引擎性能和JavaScript不是问题，那么只需务实并让Rails的javascript助手做他们的事情。
如果你正在为网络开发，那么做Tomh sugested并用普通的html / css编码，然后增强onDomReady。
如果你仍然想使用像使用内联javascript的button_to_remote这样的Rails助手，那么编写你的页面加载处理程序以向服务器发送Ajax请求。 然后，您可以使用page.replace / page.replace_html将常规页面元素替换为从帮助程序返回的代码。
我还建议使用不引人注目的Javascript方法并使用jQuery 。
有关如何使用Rails执行此操作的精彩入门教程，请查看Ryan Bates的这个jQuery + Rails截屏video 。
如果你想继续使用jQuery的帮助器，那么看看jRails ，但是如果你这样做，你仍然会违反不引人注目的Javascript前提。
有时，内联JavaScript对于关键的快速视图（例如，某些登录页面）或小型片段（例如，Facebook SDK初始化，Analytics / Kissmetrics初始化脚本等）非常有用，其中不使用外部库可以加速页面加载。 对于这些情况，我建议在布局中使用部分_facebook.js.erb，并定义一个帮助器：
module ApplicationHelper def facebook_tag content_tag :script, render(partial: 'layouts/facebook.js') end end
然后，创建文件_facebook.js.erb并使用定义的帮助程序在application.html.erb中包含内联JavaScript：
<%= facebook_tag %>
对于任何其他情况，例如您提到内联JavaScript的部分内容，我建议使用不引人注目的JavaScript，如其他答案所示。