将 coffeescript 函数转换为 javascript

Question

我关注这个 railscast https://www.youtube.com/watch?v=ltoPZEzmtJA 但我不使用 coffeescript。我正在尝试将 coffeescript 转换为 javascript 但我运行遇到了问题。

咖啡脚本

jQuery ->
  new AvatarCropper()

class AvatarCropper
  constructor: ->
    $('#cropbox').Jcrop
      aspectRatio: 1
      setSelect: [0, 0, 600, 600]
      onSelect: @update
      onChange: @update

  update: (coords) =>
    $("#crop_x").val coords.x
    $("#crop_y").val coords.y
    $("#crop_w").val coords.w
    $("#crop_h").val coords.h

js.erb 文件

$(document).ready(function() {

  $('.crop-image').on('click', function () {
    $('#cropbox').Jcrop({
      aspectRatio: 1,
      setSelect: [0, 0, 100, 100],
      onSelect: update,
      onChange: update
    })
  });

  update: (function(_this) {
    return function(coords) {
      $('.user').val(coords.x);
      $('.user').val(coords.y);
      $('.user').val(coords.w);
      return $('.user').val(coords.h);
    };
  })(this)  

});

我不明白他为什么决定做一个 class 并且认为转换整个东西会更复杂。我遇到的麻烦是更新功能。我只是将他的更新功能的咖啡脚本插入转换器并使用了输出。这会导致错误提示未定义更新。我哪里错了？

还有一个额外的问题：他在这里做 class 有什么意义？

谢谢！

Answer 1

您的语法看起来不对...: 用于声明带标签的语句。

这是正确的做法。声明一个提升变量并分配一个函数引用。给它。函数名也可以出现在表达的函数中，所以它可以使用它的名字来初始引用它自己。

使用var函数变量应该提升，赋值除外。

/* there are various ways to declare a function */

function update(coords) {
    var $users = $('.user');
    $users.val(coords.x);
    $users.val(coords.y);
    $users.val(coords.w);
    return $users.val(coords.h);
}

Answer 2

点一个class：

更容易运行在不同元素上多次执行同一任务，减少冲突空间。
帮助在头脑中组织代码

要转换，请使用 http://js2.coffee/

这样的网站

var AvatarCropper,
  bind = function(fn, me){ return function(){ return fn.apply(me, arguments); }; };

jQuery(function() {
  return new AvatarCropper();
});

AvatarCropper = (function() {
  function AvatarCropper() {
    this.update = bind(this.update, this);
    $('#cropbox').Jcrop({
      aspectRatio: 1,
      setSelect: [0, 0, 600, 600],
      onSelect: this.update,
      onChange: this.update
    });
  }

  AvatarCropper.prototype.update = function(coords) {
    $("#crop_x").val(coords.x);
    $("#crop_y").val(coords.y);
    $("#crop_w").val(coords.w);
    return $("#crop_h").val(coords.h);
  };

  return AvatarCropper;

})();

// ---
// generated by coffee-script 1.9.2

将 coffeescript 函数转换为 javascript

Convert coffeescript function to javascript

javascript

jquery

ruby-on-rails

coffeescript