2011-12-19 16 views
7

私は今、Coffeescriptを使ってすべてのJavaScriptコードを書くように移行していますが、最も単純な例が私に問題を引き起こしているので、私は不満です。今のところ、私はこの答えを見つけることができず、研究の時間以上やった...この関数呼び出しがCoffeescriptを使用して機能しないのはなぜですか?

<!DOCTYPE html> 
<html> 
<head> 
    <script src="http://code.jquery.com/jquery-latest.js"></script> 
    <script src="http://jashkenas.github.com/coffee-script/extras/coffee-script.js" type="text/javascript" charset="utf-8"></script> 
    <link href="sheet.css" rel="stylesheet" type="text/css" media="screen" /> 
    <script type="text/coffeescript"> 
    $ -> 
     sayHi() 

    sayHi = -> 
     alert 'Hi there!' 
    </script> 
</head>  
<body> 
    <div id="all"> 
    </div> 
</body> 
</html> 

それは上記のコードから明らかなように、私はちょうど作るしようとしていますsayHi()関数の呼び出しは、jQueryのreadyハンドラの中から機能します。しかし、私は、次のされて取得していますエラー:

キャッチされない例外TypeError:未定義関数

ではない私を助けてください、私はこの「はずの仕事を読んで、コンパイラとチュートリアルによると、しかし、私は何をしているのかわからないこれは実行されないために恐ろしく間違っています:(

+0

を使用して...または「コーヒーsript.js」スクリプトではJavaScriptへのCoffeeScriptコードを変換することですか? –

+0

2つのステートメントを反転させてみましたか?私はCoffeeScriptで作業したことはありませんが、それは定義される前にメソッド/関数が呼び出されているからです(C言語のように) –

+0

@ ime Vidasつまり、私が間違っていることを意味します....? – jlstr

答えて

11

text/coffeescriptタグはtext/javascriptタグとの重要な違いがあります。スクリプトライブラリはすべてのコーヒースクリプトタグを見つけてコンパイルしなければならず、DOM rまで待たなければなりませんそれはすべてそれらを見つけることを確認することができます。

もう1つの問題は、イベントが既に発生した場合、jQueryがDOM準備完了コールバックを即座に起動することです。そして、この場合にはそれがあります。

だから、これはあなたがこれを取得JSにコンパイルされている場合:

var sayHi; 
$(function() { 
    return sayHi(); 
}); 
sayHi = function() { 
    return alert('Hi there!'); 
}; 

をだから何が起こるかです:

  • それundefined作り、値なしでsayHi変数を宣言します。
  • この変数を使用するjQueryのDOMレディ・コールバックを作成します。
  • jQueryは、DOM準備が既に行われているため、すぐにコールバック関数を実行します。
  • コールバック関数が実行され、未定義のsayHi()を実行しようとします。
  • コールバックの実行後、実行する機能にsayHiが設定されます。

その後、sayHiが適切に割り当てられているだろう、これは通常のJSタグだった場合、文書がロードされた前に今、それが実行している可能性があり、時間によってコールバックが実際に走ったので、それがうまく働いているだろう。

解決するには、コールバックでpassを実行する前に関数を割り当てる必要があります。または、DOMの準備がすでに完了していることを知っているので、$(->)の処理を省略することもできます。しかし、本当に、これはあなたが実際にcoffeescriptタグを使用すべきではない主な理由の1つです。 JSタグを使用するのと同じではありません。そして、これは、実際のウェブサイトでCoffeeScriptを使用するための推奨されたアプローチではない多くの理由の1つです。お使いのブラウザが担当している開発者:)

+0

しかし、ブラウザはすぐにすべての '

4

フリップ文のようにそれを見る前

は、だからあなたのコーヒーのスクリプトをコンパイルします。 CoffeeScriptには、コードの順番で定義されるまで関数/メソッドを呼び出すことができない古いCと同じ制限があります。

ので、ブラウザはCoffeeScriptのインタプリタを持っていない、私がチェックした最後の時間

<script type="text/coffeescript"> 
    sayHi = -> 
    alert 'Hi there!' 

    $ -> 
    sayHi() 
</script> 
+0

あなたはそうすることができます。この場合は、コールバックがすぐに実行されていたことを除いて、うまくいきました。それが後で実行された場合、正常に動作していたはずです。 –

関連する問題