我有一个应用程序，它使用一些 Javascript 来处理基本的 Ajax 请求，例如自动完成和实时搜索。例如，我通过以下方式实现了实时搜索；我发现了一些潜在的问题，想与您讨论一下，以便获得更好的代码。

app/controllers/company_controller.rb

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

app/views/companies/_companies.html.haml

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

app/views/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"
    });

public/javascripts/companies.js

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

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

public/javascripts/application.js

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

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

• 我在 _livesearch_box.html.haml 中有 Javascript 代码.
• 即使我把它放在 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)在某处(例如 app/coffeescripts/ 中)找到纯 javascript 代码并在 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)) %>") 使用 Ajax 请求将“投票这家公司”链接替换为“取消投票这家公司”链接(反之亦然)，并由 vote 呈现。和 unvote Controller 中的 Action 。 我知道有 coffee-haml-filter 可以在 haml 文件中编译 CoffeeScript，但这不是我真正需要的，而且通常被弃用并被视为肮脏的东西(？)。

所以问题至少是:

• 如何在我的 app/views/*/*.js.* 中使用 CoffeeScript ？
• 我应该有app/views/*/*.js.*吗？有文件吗？
• 如何以最高效优雅的方式删除所有元素 ID 和硬编码在 javascript 中的路径？

很抱歉问了这么长的问题，感谢您问完这个问题!

最佳答案

路线

有一些解决方案，例如 js-routes (我的 fork )这将允许你在你的 JS/CS 中编写 Router.post_path(3)。这样您就可以绕过硬编码 url。

混合 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)

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

硬编码 DOM 路径

如果您正在为特定的 dom 树(或特定的 View )编写代码，我不会认为这是一种不好的做法。编写不显眼的 JS 就像编写 CSS - 我们也在 CSS 中硬编码 #company_list_container，不是吗？

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

前端调用JS代码

要在静态 CoffeeScript 文件和 View 之间建立接口(interface)，我倾向于编写如下内容:

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

我的观点到此结束。然后这将调用我用 CoffeeScript 编写的函数，然后它将使用所有需要的脚本增强站点。可能有更好的方法(比如为 JavaScript 使用类似 Rails 的路由器 - 请参阅 Backbone.js)但它很简单并且适合我。

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

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

但是，我认为没有有效 的重构方法。我不得不做很多重构来移除我的 ERB/JS 困惑。不过还是值得的。

关于javascript - 在 Rails 应用程序中改进不显眼的 javascript(并可能使用 CoffeeScript)，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/5299887/