Rails内联Javascript和最佳实践_Javascript_Ruby On Rails_Coding Style

Rails内联Javascript和最佳实践

javascript ruby-on-rails coding-style

Rails内联Javascript和最佳实践,javascript,ruby-on-rails,coding-style,Javascript,Ruby On Rails,Coding Style,我对使用Rails有点陌生，我正在开发的一个应用程序进展顺利——不过我查看了生成的HTML并注意到了一些事情，如 <script type="text/javascript"> //<![CDATA[ Droppables.add(...); //]]> </script> // 散布在HTML中，这当然与我使用的地方相匹配： <%= drop_receiving_element ... %> 我想知道的是。。。有没有更好的方法来做到这

我对使用Rails有点陌生，我正在开发的一个应用程序进展顺利——不过我查看了生成的HTML并注意到了一些事情，如

<script type="text/javascript">
//<![CDATA[
Droppables.add(...);
//]]>
</script>

//

散布在HTML中，这当然与我使用的地方相匹配：

<%= drop_receiving_element ... %>

我想知道的是。。。有没有更好的方法来做到这一点，或者让它更干净？其中一些脚本标记来自partials，因此在这种情况下，将它们放在“页面底部”并没有真正的帮助

另一种选择可能是将所有这些“标记块”推送到一个数组中，然后将它们写到应用程序.rhtml文件中，但它仍然有点凌乱…

如果您真的想使用最佳实践，请不要使用内联javascript。保持你的HTML、CSS和Javascript干净，彼此分开。理想情况下，html文件应该在没有CSS和javascript的情况下可用

imo认为，最干净的方法就是使用简单的html/css构建应用程序，并使用不引人注目的javascript对其进行增强，以提供更好的用户体验

一种模式是在页面底部包含所有JS文件，并开始使用onDomReady等功能运行代码

根据这些评论，我想添加一些可能的选项，让您开始：

JQuery
尤伊
原型

<img src="/i/dont/exist.png" onerror="$(this).attr("src", "/i/do/exist.png")" />

onerror

$("img").live("error", function() {
  $(this).attr("src", "/i/do/exist.png");
});

如果你等到<代码> $（文档）。就绪< /Cord>将你的内容导入到DOM中的一个空容器元素中，用户将在一秒内看到空白点。这就是为什么当您的页面第一次加载时，提要会有一瞬间是空白的。即使您只是在dom的底部放置一个外部脚本文件，并在其中添加动态生成的html元素到页面，而不使用

$（document）.ready

<script>App.bootstrap({some: "json"});</script>
<nav id='navigation'></nav>
<header id='header'></header>
<section id='content'>
  // dynamic content here
</section>
<script>App.renderContent();</script>
<aside id='sidebar'>
  // dynamically toggle which one is selected with javascript
  <nav>
    <h3>Search By Category</h3>
    <ol>
      <li>
        <a href="/category-a">Category A</a>
      </li>
      <li>
        <a href="/category-b">Category B</a>
      </li>
    </ol>
  </nav>
</aside>
<script>App.renderSidebar();</script>
<footer id='footer'></footer>

App.bootstrap（{some:“json”}）；
//这里的动态内容
App.renderContent（）；



App.renderSidebar（）；

data-

rails.js

应用程序.js

module ApplicationHelper
  def facebook_tag
    content_tag :script, render(partial: 'layouts/facebook.js')
  end
end

<%= facebook_tag %>

<%= facebook_tag %>