jQuery が CoffeeScript と出会うときは、sharing_jquery を使用してください

何年も前に初めて jQuery に出会ったとき、プログラマーの楽園にいるように感じました。これにより、DOM 操作が大幅に簡素化されます。近年、関数型プログラミングは非常に簡単になりましたが、RIA 開発に適したフレームワークが増えてきましたが、jQuery なしでプログラムを実行することがどれほど罪深いかはまだ想像できません。きっとあなたも同じように感じていると思います。
私はこう思いました。 CoffeeScript の世界では、同じ素晴らしいストーリーが再び起こっています。数行のコードを書けば、もうネイティブ Javascript を見逃すことはなくなるでしょう。 CoffeeScript には多くの新機能が含まれており、jQuery と組み合わせると、新しい世界が見えてきます。
この記事の目的は、CoffeeScript と jQuery が連携する素晴らしいシーンを紹介することです。
上司のようにコードに命令する
CoffeeScript は、クールな配列反復メソッドを多数提供します。最も優れた点は、これが配列だけでなく jQuery オブジェクトでも機能することです。詩的なコードを書いてみましょう:
formValues = (elem.value for elem in $('.input'))
このコード行は次の Javascript に変換されます:

コードをコピーします コードは次のとおりです。

var elem, formValues
formValues;= (function() {
var _i, _len, _ref, _results;
_ref = $('.input');
for (_i = 0, _len = _ref.length; _i elem = _ref[_i]
}
return _results;

正直に言うと、このようなコードを書くのは最初は本当に怖いですが、CoffeeScript の魔法を受け入れ始めると、虜になるでしょう。
一般的なメソッド バインディング
jQuery のコールバックで「=>」を使用すると、メソッドをオブジェクトに手動でバインドする手間が大幅に軽減されます。コードの一部を見てみましょう:

コードをコピー

コードは次のとおりです: object = func: -> $ ('#div').click => @element.css color: 'red' 以下はコンパイルされた Javascript です:

コードをコピーします

コードは次のとおりです: var オブジェクト; var __bind = function(fn, me){ return function(){ return fn.apply(me, argument ) };

object = {

func: function() {
return $('#div').click(__bind(function() {
return this.element.css ({
color: 'red'
})
}
}; >コード内の @ 要素は、object.element = $('#some_div') など、他の場所で指定された jQuery オブジェクトを指します。
「=>」を使用して指定されたコールバック関数は、自動的にバインドされます。オリジナル オブジェクト的には、ええ、それはクールです。
これが 2011 年にこの関数が呼び出された方法です
これを見てください:

コードをコピーします


コードは次のとおりです:

$.post( "/posts/update_title" new_title: input.val() id: something ->alert( 'done') 'json'

)

CoffeeScript を使用すると、複数のパラメータを複数の行に記述して呼び出すことができます。これにより、一部のメソッドが長くなります。 $ .post() や $.animate() などの jQuery の署名がより読みやすくなります。別の例を次に示します。




コードをコピー

コードは次のとおりです。

$('# thing' ).animate width: ' 20px' opacity: '0.5' 2000 'easeOutQuad'

おいしいコーヒーですね。最初のパラメータは匿名オブジェクトであり、関数呼び出し内のメタ括弧を省略することもできることに注意してください。
初期化をよりわかりやすくする
初めて jQuery を使い始めたとき、次のようにページを初期化しました:

コードをコピー


コード

$(document).ready(function() { some(); init(); calls(); })

CoffeeScript と jQuery の新しいバージョンにより、上記のコードは非常に魅力的に進化しています:




コードをコピー

コードは次のとおりです。

$-> some() init() calls()
CoffeeScript の関数定義構文はすでに非常に優れていますが、このような状況で使用できることにより、さらに優れたものになります。 CoffeeScript では、コールバックを必要とするすべての関数呼び出しが非常に簡単であることがわかります。
CoffeeScript の詳細については、公式 Web サイトをご覧ください

注: 7 月にリリースされた CoffeeScript に関する本 には、jQuery に関する章全体が含まれています。