-2

私はjs2coffeeを使用していましたが、unexpected identifier.

$.fn.wait = function( ms, callback ) {
    return this.each(function() {
        window.setTimeout((function( self ) {
            return function() {
                callback.call( self );
            }
        }( this )), ms );
    });
};

私のコーヒーバージョン：

$.fn.wait = (ms, callback) ->
  @each ->
    window.setTimeout ((self) ->
      ->
        callback.call self
    (this)), ms
4

2 に答える 2

3

最初に JavaScript のバージョンをクリーンアップして、過度に巧妙で読みにくくならないようにします。インライン化された自己実行関数は、コードを保守して読む人々に嫌われることを除いて、実際には何もしません。

$.fn.wait = function( ms, callback ) {
    return this.each(function() {
        var _this = this;
        window.setTimeout(function() {
            callback.call(_this);
        }, ms);
    });
};

これはノイズが少なく、一目で簡単に理解できます。このトリックは通常、CoffeeScript では太い矢印 ( )var _this = thisに置き換えられるため、次のようになります。=>

$.fn.wait = (ms, callback) ->
    @each(->
        fn = () => callback.call(@)
        setTimeout(fn, ms)
    )

はい、CoffeeScript では多くの場合、括弧はオプションですが、オプションと禁止は別の単語なので、構造を見やすくするために括弧を含める傾向があります。fn次のような恐ろしいもので変数をスキップすることもできます。

setTimeout(
    => callback.call(@)
, ms)

またはこれ：

setTimeout (=> callback.call(@)), ms

しかし、ミックスに追加の変数を投入することは、IMO、目にははるかに簡単です。

デモ:

于 2012-11-03T21:21:06.120 に答える
0

太い矢印 ( =>)を使用します。

$.fn.wait = (ms, callback) ->
  @each ->
    window.setTimeout( =>
      =>
        callback.call( this );
    , ms)

コンパイルすると次のようになります。

$.fn.wait = function(ms, callback) {
  return this.each(function() {
    var _this = this;
    return window.setTimeout(function() {
      return function() {
        return callback.call(_this);
      };
    }, ms);
  });
};

太い矢印 => は、関数を定義することと、その場で this の現在の値にバインドすることの両方に使用できます。これは、Prototype や jQuery などのコールバック ベースのライブラリを使用して、それぞれに渡すイテレータ関数やバインドで使用するイベント ハンドラ関数を作成する場合に役立ちます。太い矢印で作成された関数は、定義されている this のプロパティにアクセスできます。

(出典: http://coffeescript.org/#fat_arrow )

于 2012-11-03T21:18:11.870 に答える