rails程序中加载js

最新推荐文章于 2024-09-15 08:08:21 发布

江城守望者

最新推荐文章于 2024-09-15 08:08:21 发布

阅读量2.2k

点赞数

CC 4.0 BY-SA版权

分类专栏： rails 文章标签： javascript

本文链接：https://blog.youkuaiyun.com/LUOYEGUFEI129/article/details/78981314

rails 专栏收录该内容

17 篇文章

订阅专栏

在Rails应用中，加载JavaScript通常有两种方式：直接在视图中编写JS代码或通过Asset Pipeline加载外部JS文件。直接编写时，可以在视图中创建命名的`javascript_tag`。而使用Asset Pipeline，只需在`assets/javascripts`目录下定义JS文件，Rails会自动加载。在生产环境，需预编译资源以应用指纹标记。如果同时使用两种方式，外部文件的JS会优先执行。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

常用的方式有两种：
1. 直接在view中写javascript代码；
2. 通过Asset Pipeline加载app/assets/javascripts中的js文件

对于第一种方式，我的习惯做法是在app/views/layout/application.html.erb中定义名称为javascript的yield，然后在需要js的view中使用content_for插入js代码：

# app/views/layout/application.html.erb
<html>
  <!-- other html code -->
  <body>
   <!-- other html code  -->
   <%= yield :javascript %>
  </body>
</html>

# app/views/users/show.html.erb
<% content_for :javascript do %>
  <script type="text/javascript">
    (function(){
      $(".edit-node").click(function(){
        alert("df");
        $("#edit-form").show();
        return false;
      });
    })()
  </script>
<% end %>

对于第二种方式，我们只需要在app/assets/javascripts中定义一个js文件，写入上面的js代码就可以实现同样的效果。

# app/assets/javascripts/application.js

//= require_tree .

require_tree .会自动加载当前目录下的所有js文件，这样一来，我们就不用在view子文件中使用javascript_include_tag引入js文件了，如果没有上面那行代码的话，我们就要手动引入了

# app/assets/javascripts/application.js

//= require home

然后在config/initializers/assets.rb中添加：

Rails.application.config.assets.precompile += %w( home.js )

注意：
1. 在生产环境中需要预编译资源：rake assets:precompile RAILS_ENV=production，此命令会将app/assets下的文件编译到public/assets，并为它们打上指纹标记。
2. 同时使用上面两种js加载方式时，第二种优先执行。