在Rails应用程序中改进不引人注目的javascript(并可能使用CoffeeScript)

Question

我有一个应用程序,它使用一些Javascript来执行基本的Ajax请求,例如自动完成和实时搜索.例如,我通过以下方式实现了实时搜索; 我发现了一些潜在的问题,并希望与您讨论这个问题,以便有更好的代码.

应用程序/控制器/ company_controller.rb

def livesearch
  @companies = Company.search(params[:query])
  render :partial => "companies", :locals => {:companies => @companies}
end

应用程序/视图/公司/ _companies.html.haml

- if companies.empty?
  None
- else
  %table#company_list
    %tr
      %th Name
      %th Description
      %th Products
      %th
    = render companies

应用程序/视图/公司/ _livesearch_box.html.haml

= content_for :scripts, "jlivesearch companies"
= form_tag "#", :autocomplete => :off, :remote => true do
  %span.light
    Search:  
  = text_field_tag :search
  :javascript
    $('#search').livesearch({
      searchCallback: update_listed_companies,
      queryDelay: 200,
      innerText: "Search companies"
    });

公共/ Java脚本/ companies.js

function update_listed_companies(query) {
  if(typeof query == "undefined")
    query = "";

  $("#company_list_container").showWith(
    "/companies/livesearch?query=" + query,
    false
  );
}

公共/ Java脚本/ application.js中

(function($) {
  $.fn.showWith = function (what, popup) {
    element = this;
    $.get(what, function(data) {
      element.html(data);
      if(popup)
        element.bPopup();
    });
    return element;
  };
})(jQuery);

以下是让我对代码的最优性产生怀疑的事情:

• 我有Javascript代码_livesearch_box.html.haml.
• 即使我把它放在一个public/javascripts/companies_livesearch.js我必须硬编码#search它的部分.
• 我有#company_list_container(这是_companies.html.haml渲染的div )硬编码public/javascripts/companies.js.
• 我有/companies/liveseach?query=硬编码的路径public/javascript/companies.js.
• 我没有使用CoffeeScript,主要是因为它期望(至少如果你使用Barista)在某处找到纯粹的javascript代码(例如in app/coffeescripts/)并编译它public/javascripts.但在我的应用程序中,我也有一些.js.erb文件app/views/companies; 例如,我有一个投票系统,在app/views/companies/_vote.js.erb中使用以下 内容: $("#vote_link_<%= escape_javascript(@company.id.to_s) %>").html("<%= escape_javascript(vote_link_for(@company)) %>") 用"Unvote this company"替换"投票给这家公司"链接(反之亦然) Ajax请求,由控制器中的vote和unvote操作呈现.我知道有一个coffee-haml-filter可以在haml文件中编译CoffeeScript,但它不是我真正需要的东西,而且通常被弃用并被视为脏东西(？).

所以问题至少是:

• 如何在我的咖啡馆app/views/*/*.js.*？
• 我应该有app/views/*/*.js.*文件吗？
• 如何以最有效和最优雅的方式删除javascripts中所有那些元素ID和那些硬编码的路径？

很抱歉这个问题很长,并且感谢你们走到尽头!

Answer 1

路线

有一些解决方案,比如js-routes(我的fork),它允许你Router.post_path(3)在JS/CS中编写.这样你就可以绕过硬编码网址.

混合JS和ERB

我建议你不要混淆JS和Ruby.在大多数情况下,您可以通过重构JS代码来解决这个问题,结果将更容易阅读,并且可以简单地移动到纯JS/CS文件中.

# based on your vote-link example and assuming that your link
# looks like:
#
# %a(href="#"){:"data-company-id" => @company.id} Vote
# => <a href="#" data-company-id="6">Vote</a>

makeAllCompaniesVotable: () ->
  $('.company a.voteLink').click ->
    companyId = $(this).data('company-id')
    $.ajax
      url: Router.vote_company_path(companyId)
      # ...

除非你做邪恶的eval-magic,否则你甚至都不需要escape_javascript.但是你必须从你的局部内部删除JavaScript.jquery.livequery使过渡更容易.

$(`.company`).livequery ->
  # do something with $(this)

每次将a .company插入文档时都会调用.

硬编码DOM路径

如果您正在为特定的dom-tree(或特定视图)编写代码,我不认为这是一种不好的做法.编写不引人注目的JS就像编写CSS一样 - 我们#company_list_container也在CSS中进行硬编码,不是吗？

$("#vote_link_<%= escape_javascript(@company.id.to_s) %>") # this is ugly though

从前端调用JS代码

要在静态CoffeeScript文件和视图之间建立接口,我倾向于编写如下内容:

:javascript
  $(function(){Companies.index()});
  $(function(){Application.globalEnhancements()});

在我的观点结束时.然后,这将调用我使用CoffeeScript编写的函数,然后使用所有需要的脚本增强该站点.可能有更好的方法(比如有一个类似Rails的JavaScript路由器 - 请参阅Backbone.js),但它很简单,对我有用.

如果我经常需要一些数据(例如:current_user):

:javascript
  window.current_user = #{current_user.to_json};

但是我不认为有一种有效的重构方法.我不得不做很多重构来删除我的ERB/JS混乱.不过还是值得的.