Coffeescript-Klasse nicht zugänglich in Haupt Javascript

Question

Ich habe eine Klasse in Coffeescript geschrieben, zum Beispiel

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

und ich habe diese Klasse als separate Datei, Example.coffee

Nun ich mag in der Lage sein, in meiner Haupt-JavaScript-Datei zu instanziiert wie so:

d = new Example 
d.render() 

aber die Klasse ist nicht definiert, auch wenn es als Skript auf der Seite enthalten ist, wie

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

Wie stellen Sie die Klasse der Hauptdatei öffentlich zur Verfügung?

Answer 1

Sie Ihre Klasse deklarieren können global zugänglich (zumindest für Browser) zu sein, indem er erklärt, in dem window Namespace zu sein:

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

That wird Example direkt in window setzen. Sie können in den meisten Fällen auch class @Example sagen.

Standardmäßig umschließt CoffeScript jede Datei in einem (function() { ... })() Wrapper, um Namensraumverschmutzung zu verhindern. Sie können dies verhindern, indem -b liefert, wenn Ihr Coffee Kompilieren:

-b, --bare
die JavaScript Kompilieren ohne die Top-Level-Funktion Sicherheits-Wrapper.

aber das ist vielleicht keine Option für Sie (oder es könnte eine hässliche sein). Die übliche Vorgehensweise ist ein anwendungsspezifische Namensraum irgendwo zu erklären, bevor die Klassen geladen werden:

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

und dann Klassen Namespace entsprechend:

class App.Example 
    #... 

Dann alles durch den App Namespace verweisen.

Answer 2

Erstellen Sie eine globale Variable

window.Example = Example

Answer 3

Ich weiß, dass dies ein alter Thread ist, aber falls jemand anderen es nützlich findet, deklarieren Sie Ihre Klasse mit "@" und es wird auf .js Dateien außerhalb der Datei .coffee zugegriffen. So

, in 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" 

, die auf example.js kompiliert wird, die dann in example.html verwendet werden können:

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