javascript - 主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

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

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

那将Example直接放入window. class @Example在大多数情况下，您也可以说。

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

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

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

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

然后适当地命名你的类：

class App.Example
    #...

然后通过命名空间引用一切App。

Answer 2

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

所以，在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 3

创建一个全局变量

window.Example = Example