Classe CoffeeScript non accessibile in javascript principale

Question

Ho una classe scritta in CoffeeScript, ad esempio,

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

e ho questa classe come un file separato, Example.coffee

Ora voglio essere in grado per istanziare nel mio principale file javascript in questo modo:

d = new Example 
d.render() 

ma la classe non è definito anche quando è incluso come uno script nella pagina, come

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

Come si rende la classe disponibile al pubblico nel file principale?

Answer 1

è possibile dichiarare la classe per essere accessibile a livello globale (almeno per i browser) dichiarando di essere in window namespace:

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

Quello inserirà Example direttamente in window. Puoi anche dire class @Example nella maggior parte dei casi.

Per impostazione predefinita, CoffeeScript avvolge ciascun file in un wrapper (function() { ... })() per impedire l'inquinamento dello spazio dei nomi. È possibile evitare questo fornendo -b durante la compilazione tuo CoffeeScript:

-b, --bare
Compilare il JavaScript senza l'involucro di sicurezza funzione di primo livello.

ma che potrebbe non essere un'opzione per voi (o potrebbe essere un brutto). L'approccio comune è quello di dichiarare un namespace specifica applicazione da qualche parte prima le vostre classi vengono caricate:

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

e poi namespace vostre classi in modo appropriato:

class App.Example 
    #... 

quindi fare riferimento a tutto ciò attraverso il App namespace.

Answer 2

Creare una variabile globale

window.Example = Example

Answer 3

So che questo è un thread vecchio, ma nel caso in cui qualcun altro lo trovi utile, dichiara la tua classe con "@" e sarà accessibile ai file .js al di fuori del file .coffee.

Così, 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" 

che viene compilato a example.js che possono poi essere utilizzati in 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>