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

How to import javascript in rails with asset pipeline

本文关键字：rails 导入 javascript 管道 何使用      更新时间：2023-09-26

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

虽然我不知道如何导入这些额外的文件，但我想将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，没有成功

有什么想法吗？

谢谢，

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

ReferenceError: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）脚本之前的某个位置创建一个特定于应用程序的命名空间：

app = { }

把你的功能放在那里：

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

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>

您所描述的是一个具有通用特性的helper或更多全局js文件。您可以将这些添加到application.js中。此外，使用下面这样的结构将包括vendor/assets/javascripts/some_generic_feature.js（.coffee）

//= require some_generic_feature

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

application.js

//= require general_functions
//= require projects

希望这能有所帮助！

相关文章：