如何使用资产管道在 rails 中导入 javascript

Question

在我的应用程序中，我有一个控制器支持一个非常复杂的对象，该对象有很多用 coffescript 编写的 javascript。

我想将 javascript 安排在几个单独的文件上，以便更好地安排代码，尽管我不知道如何导入这些额外的文件。

例如，我的文件app/assets/javascripts/general_functions.js.coffee包含以下内容：

# rounds a number
roundNumber = (rnum, rlength = 5) ->
  pow = Math.pow( 10, rlength )
  newnumber = Math.round(rnum*pow)/pow
  parseFloat(newnumber)

# floors a number
floorNumber = (rnum, rlength = 5) ->
  pow = Math.pow( 10, rlength )
  newnumber = Math.floor(rnum*pow)/pow
  parseFloat(newnumber)

# returns true if the str ends with suffix
endsWith = (str, suffix) ->
  str.indexOf(suffix, str.length - suffix.length) !=   -1

# returns the absolute value of a number (always >= 0)
abs = (num) -> 
  if num < 0 then - num else num

如何将其导入到需要这些功能的app/assets/javascripts/projects.js.coffee中？

我试过添加

//= require general_functions

到app/assets/javascripts/application.js ，没有成功

有任何想法吗？

谢谢，

Answer 1

没有成功，我猜浏览器告诉你你的general_functions.js.coffee函数都不存在，你会收到如下错误：

参考错误：roundNumber 未定义

您有一个简单的范围界定问题。 CoffeeScript 文件的编译版本被包装在一个自执行函数中以防止命名空间污染，因此：

roundNumber = (rnum, rlength = 5) ->
  pow = Math.pow( 10, rlength )
  newnumber = Math.round(rnum*pow)/pow
  parseFloat(newnumber)

当它到达浏览器时看起来像这样：

(function() {
  var roundNumber;
  roundNumber = function(rnum, rlength) {
    // ...
  };
})();

并且您定义的所有函数都是隐藏的。 如果你希望你的函数是全局的，那么将它们定义为window属性：

window.roundNumber = (rnum, rlength = 5) ->
  # ...

或者更好的是，您可以在加载主 (Coffee|Java)Script 之前的某处创建一个特定于应用程序的命名空间：

app = { }

并将您的功能放在那里：

app.roundNumber = (rnum, rlength = 5) ->
  # ...

Answer 2

Javascript 应该自动包含在您的 Rails 应用程序中，每个控制器都有自己的 js 文件。 使用下面的说明将包括它们。

您的app/assets/javascripts/application.js.coffee应包含以下行：

#= require_tree .

或者app/assets/javascripts/application.js （纯 javascript）：

//= require_tree .

当您在浏览器中查看页面的源代码时，您应该会看到如下内容：

<script src="/assets/projects.js?body=1"></script>

您所描述的是具有通用功能的帮助程序或更全局的 js 文件。 您可以将这些添加到 application.js。 此外，使用如下结构将包括 vendor/assets/javascripts/some_generic_feature.js(.coffee)

//= require some_generic_feature

Answer 3

在application.js中以正确的顺序添加两个文件：

应用程序.js

//= require general_functions
//= require projects

希望这可以帮助！