将coffeescript函数转换为javascript

Posted 2023-03-03

【中文标题】将coffeescript函数转换为javascript

【英文标题】：Convert coffeescript function to javascript

【发布时间】：2016-11-26 08:15:20

【问题描述】：

我正在关注这个 railscast https://www.youtube.com/watch?v=ltoPZEzmtJA 但我不使用咖啡脚本。我正在尝试将咖啡脚本转换为 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)  

);

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

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

谢谢！

【问题讨论】：

你可以使用这个转换器js2.coffee

"当你可以用 C 编写时，为什么要使用类！"

我一直在阅读 Javascript 的优秀部分，并且在那里推广了“构造类方法”，其优点是隐私，即暴露更少的对象属性

【参考方案1】：

类的重点：

使在不同元素上多次运行相同任务变得更加容易，而且碰撞空间更小。 帮助您整理代码

要转换，请使用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

【参考方案2】：

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

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

使用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);

【讨论】：

对不起，我的代码错了，坐标应该是 x,y,w,h 我会改的..复制错了

另外，在 railscast 中，他强调说他使用的是粗箭头……关于上下文，我不确定这意味着什么。您的回答是否说明了这一点？

阅读：https://www.sitepoint.com/es6-arrow-functions-new-fat-concise-syntax-javascript/

谢谢您的回答似乎对我有用。有没有想过为什么要像他在原始咖啡脚本中所做的那样把整个事情变成一个班级？

@user4584963 类使代码更高效。胖箭头是在 ES6 中指定的，并且可以在今天的 JavaScript 中使用。