Question

我使用的是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

Answer 1

首先清理你的JavaScript版本，这样它就不会过于聪明和难以阅读;内联的自动执行功能对你没有任何帮助，只是让人们维护和阅读你的代码讨厌你：

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

这一点不那么嘈杂，一眼就能看清楚。 var _this = this技巧通常被CoffeeScript中的fat-arrow (=>)取代，所以我们留下了这个：

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

是的，在CoffeeScript中括号通常是可选的，但可选和禁止是不同的单词，所以我倾向于包括括号以使结构更容易看到。您也可以跳过fn变量，其中包含可怕的内容：

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

或者这个：

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

但是在IMO中投入一个额外的变量就更容易了。

演示：

CoffeeScript：http://jsfiddle.net/ambiguous/y44Fp/
JavaScript：http://jsfiddle.net/ambiguous/TVkMh/

Answer 2

使用胖箭头（=>）：

$.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);
  });
};

胖箭=＆gt;可用于定义函数和绑定它到现在的价值，就在现场。这很有用使用基于回调的库（如Prototype或jQuery）进行创建迭代器函数传递给每个或要使用的事件处理函数与绑定。使用胖箭头创建的函数可以访问它们被定义的属性。

（资料来源：http://coffeescript.org/#fat_arrow）

如何将其转换为coffeescript？

2 个答案: