CoffeeScript类在主JavaScript中不可访问。

Question

CoffeeScript类在主JavaScript中不可访问。

13

我有一个用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>

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

- Lactose

1

标记为重复：https://dev59.com/Amox5IYBdhLWcg3wTytx#9296803 - Aaron Dufour

3个回答

13

我知道这是一个旧的线程，但如果有人发现它有用，请使用“@”来声明您的类，这样它就可以被位于“.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>

- Andrew E

1

这与“mu is too short”的答案基本相同。在这种情况下，@Extroverted将编译为this.Extroverted，这与window.Extroverted基本相同。 - Nick

2

仅仅是为了补充一下Nick上面的评论，以防有人想知道...这个方法之所以有效是因为在coffeescript中@是this.的快捷方式。就像他所说的，在上下文中this是window，所以你将Extraverted附加到window上，有效地使其成为全局变量。 - markquezada

4

创建一个全局变量 window.Example = Example

- Raynos

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- mu is too short · Accepted Answer

你可以通过将类声明为 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 命名空间引用所有内容。