web-dev-qa-db-ja.com

CoffeeScriptの引数としての複数の関数

私はこれを理解したり、オンラインで解決策を見つけたりすることはできません。 jQueryベースのJavaScriptからCoffeeScriptでスクリプトを作成する方法を理解しようとしています。

スクリプトは次のとおりです。

jQuery('.post-thumb a').hover( function() {
    jQuery(this).find('.overlay').fadeIn(150);
}, function() {
    jQuery(this).find('.overlay').fadeOut(150);
});

私は最初、次のように書き直してみました。

thumb_overlay =>
    $('.post-thumb a').hover
        => $(this).find('.overlay').fadeIn(150)
        ,=> $(this).find('.overlay').fadeOut(150)

でもうまくいかなかったので、ここに投稿しようと思いました。では、CoffeeScriptでそのJavaScriptを作成するにはどうすればよいですか？

jquerysyntaxcoffeescript
28
Dave Long

あなたはもうすぐそこにいると思いますが、CoffeeScriptが改行を誤解しないように、いくつかの括弧（物事をグループ化するため）といくつかのバックスラッシュが必要です。これを試して：

thumb_overlay =>
    $('.post-thumb a').hover \
        (=> $(this).find('.overlay').fadeIn(150)), \
        (=> $(this).find('.overlay').fadeOut(150))

すべてを1行にマッシュアップすることもできますが、数か月後に後悔する可能性があります。

thumb_overlay =>
    $('.post-thumb a').hover (=> $(this).find('.overlay').fadeIn(150)), (=> $(this).find('.overlay').fadeOut(150))

そしてところで、 homepage に移動し、「Try CoffeeScript」をクリックします。これは、CoffeeScriptの小さなビットを簡単に分類する方法です。 ->バージョンから始めてJavaScriptのノイズを減らし、適切なJavaScriptを取得したら=>に切り替えます。

この場合、=>フォーム、つまり->フォームフォームを使用するかどうかはわかりません。

$('.post-thumb a').hover \
    (-> $(this).find('.overlay').fadeIn(150)), \
    (-> $(this).find('.overlay').fadeOut(150))

あなたが始めたJavaScriptをあなたに与えるでしょう：

$('.post-thumb a').hover((function() {
  return $(this).find('.overlay').fadeIn(150);
}), (function() {
  return $(this).find('.overlay').fadeOut(150);
}));

また、円記号が気に入らない場合は、次のようにすることができます。

$('.post-thumb a').hover( 
    -> $(this).find('.overlay').fadeIn(150)
    -> $(this).find('.overlay').fadeOut(150)
)

または、関数が長い場合は、関数に名前を付けて、多くの問題をスキップできます。

fadeIn  = -> $(this).find('.overlay').fadeIn(150)
fadeOut = -> $(this).find('.overlay').fadeOut(150)
$('.post-thumb a').hover(fadeIn, fadeOut)

私はJavaScriptとCoffeeScriptの両方でこのアプローチを好む傾向があり、私には読みやすくなっています。

68
mu is too short

2014 CoffeeScriptで答えを探している人のために、

$('someSelector').hover ->
  alert "hello"
, ->
  alert "world"

にコンパイルされます

$('someSelector').hover(function() {
  return alert("hello");
}, function() {
  return alert("world");
});
25
c0d3rman