rails中的资源文件js、css以及layout

发表于:，更新于:，By Sally
大纲
  1. 1. 先说说资源文件的配置位置
  2. 2. 顺道说下，layout的引用
  3. 3. partial 在 view 中使用的局部视图渲染

先说说资源文件的配置位置

  • 在rails项目中，assets/ 目录下存放资源文件，一般的，我们的图片，js，css文件分别放在 assets/ 目录下的image/ js/ css/ 这三个文件夹中

  • 并且在application.css 和 application.js文件中，对文件进行声明

  • assets/javascripts/application.js

1
2
3
4
5
6
7
//= require jquery
//= require jquery_ujs
//= require jquery.ui.all
//= require jquery-ui
//= require select2.min
//= require jquery.validate.min
//= require additional-methods.js
  • assets/stylesheets/application.css
1
2
3
4
5
6
7
8
9
10
/*
 *= require bootstrap.min
 *= require customized_bootstrap
 *= require jquery.ui.all
 *= require select2.min
 *= require select2-bootstrap
 *= require validate
 *= require_self
 *= require lrtk
 */

  • 这里需要说明： 项目部署在生产模式下的时候，这些资源文件会被压缩，压缩时是根据文件的声明顺序进行的。

  • 这里需要说明： 在样式文件中，不仅支持css文件，还支持scss，可以使用ruby等简洁的语法。（先意会下，描述有问题）

  • 这里还需要注意：可能由于某些原因，我们重复使用了同一个js库的不同版本(1.0版本有a方法，2.0版本有b方法)。并且这个文件的引用顺序互相影响(先声明1.0库，a方法失效，先声明2.0方法，b方法失效)。那么此时就需要。ps:但是尽可能的使用统一版本，否则加载多个库影响响应速度。

  • 假设，这两个方法的调用不在同一个页面，那么我们就可以在head标签中，进行判断然后引用。(判断的变量，定义在controller中的action中)
1
2
3
4
5
<% if @is_decorating_case_show %>
  <%= javascript_include_tag 'jquery.min' %>
  <%= javascript_include_tag 'jquery.imgbox.pack' %>
  <%= javascript_include_tag 'jquery.jeditable' %>
<% end %>
  • 然后，需要在config/initializers/assets.rb 文件中进行配置，如下
1
2
3
4
5
6
7
# application.js, application.css, and all non-JS/CSS in app/assets folder are already added.
Rails.application.config.assets.precompile += %w( search.js )
Rails.application.config.assets.precompile += %w( products.js )
Rails.application.config.assets.precompile += %w( sandstone.js sandstone.css )
Rails.application.config.assets.precompile += %w( jquery.min.js )
Rails.application.config.assets.precompile += %w( jquery.imgbox.pack.js )
Rails.application.config.assets.precompile += %w( jquery.jeditable.js )

顺道说下，layout的引用

  • 默认，每个页面都是被app/views/layouts/application.html.erb 文件渲染的

  • 当然，你也可以定制页面该如何渲染并指定给该页面

1
2
3
4
5
6
7
8
# 在controller中，定义整个controller控制下的所有页面
class xxx < ApplicationController
  layout "filename"
end

# 当然，也可以在某个具体的action下使用
render :layout => false
render :layout => 'aaa'

partial 在 view 中使用的局部视图渲染

  • 在有限的好几个页面中，都使用了相同的局部布局，那么该布局可以抽取，然后
1
2
# 在view中使用
<%= render :partial => 'filename' %>