主javascript中无法访问coffeescript类

Question

我有一个用coffeescript编写的课程，例如，

class Example
  constructor: ->
    $.each [1, 2, 3], (key, value) =>
      @test = value
    return @test
  render: ->
    alert @test

我把这个类作为一个单独的文件，Example.coffee

现在我希望能够像这样在我的主 javascript 文件中实例化：

d = new Example
d.render()

但该类是未定义的，即使它作为脚本包含在页面上，例如

<script src="Example.js></script>
<script src="main.js"></script>

您如何使该类对主文件公开可用？

Answer 1

我知道这是一个旧线程，但如果其他人觉得它有用，请使用“@”声明您的类，.coffee 文件之外的.js 文件可以访问它。

所以，在example.coffee：

class Introverted
  honk: ->
    alert "This class is visible within the .coffee file but not outside"

class @Extroverted
  honk: ->
    alert "This class is visible inside and outside of the .coffee file"

编译为example.js，然后可以在example.html中使用：

<script src="example.js"></script>
<script>
var p = new Extroverted(); // works fine
p.honk();

var i = new Introverted(); // will fail with "Introverted is not defined"
i.honk();
</script>

Answer 2

您可以通过将您的类声明在window 命名空间中来声明您的类可全局访问（至少对于浏览器而言）：

class window.Example
  constructor: ->
    $.each [1, 2, 3], (key, value) =>
      @test = value
    return @test
  render: ->
    alert @test

这会将Example 直接放入window。大多数情况下你也可以说class @Example。

默认情况下，CoffeeScript 将每个文件包装在 (function() { ... })() 包装器中以防止命名空间污染。您可以通过在编译 CoffeeScript 时提供 -b 来防止这种情况：

-b, --bare
在没有顶级函数安全包装器的情况下编译 JavaScript。

但这可能不是你的选择（或者它可能是一个丑陋的选择）。通常的方法是在加载类之前在某处声明一个特定于应用程序的命名空间：

// Probably in a <script> in your top-level HTML...
App = { };

然后适当地命名你的类：

class App.Example
    #...

然后通过 App 命名空间引用所有内容。

Answer 3

创建一个全局变量

window.Example = Example