在rails项目中写页面时总少不了用js实现一些动态效果，比较幸运的是rails默认引入jquery，这就意味者我们可以非常方便的使用jquery库，并且这也是rails支持的方式.在刚开始写jquery代码的一段时间里，通常直接在页面中写js代码

#view.html.slim:
javascript:
  jquery code goes here ...

当然这样写是非常不好的，如果后期js代码越来越多，维护起来会很困难，尤其当js和html代码不是一个人写的时候.所以用引入插件的方式(笔者目前水平还写不出一个大的插件)，通过DOM对象引用我们定义的方法实现更好,这样我们可以把js代码放在assets/javascript目录下面:

那么问题来了，我们的js文件并不是作用于项目的每个页面，如果通过application全部require进来，有的页面因为不需要这段代码，会报错找不到相应的dom对象．那现在就要考虑如何让相应的js文件仅作用于对应需要该效果的页面, 你可以参考这里：http://brandonhilkert.com/blog/page-specific-javascript-in-rails/

思路：首先我们先给每个页面的body添加一个独有的类，然后让拥有这个类的页面来加载这段js代码.

#views/layouts/application.html.slim
body class="#{controller.controller_path.gsub('/','__')}__#{controller.action_name}"     #指定页面body的唯一类生成如：body.home__index, body.posts__show等

在js文件中写js代码：

function haha(){
  js codes ......
}
$("body.home__index").ready(function(){
  haha();
});

这就保证了这段js代码只会应用在home#index这个页面中。

下面说说在如何写个简单的插件:

#定义js方法,将代码放到assets/javascript目录下面，通过DOM调用
;(function(){
  $.fn.xctabs = function(){
  var _leftLi = this.find(".left ul li");
  var _rightLi = this.find(".right ul li");
  _leftLi.each(function(index) {
    var $this=$(this);
    $(this).click(function(){
    _rightLi.eq(index).fadeIn("fast").siblings().fadeOut("fast");
     });
  });
  }
})(jQuery);

$("body.home__index").ready(function(){
  xctabs();
});

注意事项：

  1. ;(function(){ })(jQuery);的写法. 前面”;”为了避免在前面有别人写的代码忘记使用;结束时造成的错误.

  2. jquery插件的3中开发方式(这里采用的是第二种方式)

  通过$.extend() 来拓展jquery（只定义用于jquery本身的静态方法， 类别级）

  通过$.fn向jquery添加新的方法（最佳用于jquery插件开发， 定义可用于全局jquery对象的方法， 对象级）$.fn=$.prototype

  通过$.widget()应用jquery ui的部件工厂方式创建。（该方式较为复杂，一般不会使用）