Question

在How to Create a Basic Plugin上有一个标题为保护$ Alias和添加范围的部分。

$ variable在JavaScript库中非常流行，如果你正在使用另一个jQuery库，你将不得不制作jQuery 不要使用$ with jQuery.noConflict（）。但是，这会破坏我们的插件，因为它是在假设$是别名的情况下编写的 jQuery函数。与其他插件一起使用，仍然可以使用在jQuery $别名中，我们需要将所有代码放在一个立即调用函数表达式，然后传递函数 jQuery，并将参数命名为$：

在JavaScript中，这个包装器看起来像这样：

(function ( $ ) {
  // do stuff
  return this;
})(jQuery)

如何将其翻译成CoffeeScript？

Answer 1

这个coffeescript：

$ = jQuery
### do stuff ###

汇编为：

// Generated by CoffeeScript 1.6.3
(function() {
  var $;
  $ = jQuery;
  /* do stuff*/
}).call(this);

我认为效果是一样的，确保$指向jQuery，无论$在调用环境中是什么。

这是Coffeescript的作者在Writing a jquery plugin in coffeescript - how to get "(function($)" and "(jQuery)"?

中推荐的内容

为了更接近原始模式（do对我来说仍然是一个黑盒子）

do ($=jQuery) ->
  ### do stuff  ###
  @

'bare'编译为：

// Generated by CoffeeScript 1.6.3
(function($) {
  /* do stuff*/

  return this;
})(jQuery);

Answer 2

起初它并不明显。这是骨架。

$.fn.ourFunction = do ($=jQuery) -> (opts) ->
  # do stuff
  @

它汇总到这个：

$.fn.ourFunction = (function($) {
  return function(opts) {
    return this;
  };
})(jQuery);

为清晰起见，我们也可以将其分为几行。

$.fn.ourFunction = do ($=jQuery) ->
  (opts) ->
    # do stuff
    @

我们的第一行使用do语法，该语法最初运行一个函数。我们还可以指定参数（例如$）及其值（例如jQuery）。

$.fn.ourFunction = do ($=jQuery) ->

我们的第二行创建了一个返回的函数。请记住，CoffeeScript中的所有内容都是表达式，因此我们不需要说return (opts) ->（但你可以）。

(opts) ->

然后，我们的代码的主体当然是实际的工作。我从初始代码中遗漏的一个技巧是使用=>运算符来维护范围。在我们的滚动处理程序中，我们可以强制this保留我们的目标对象。我们可以调用$('#something').ourFunction()并在滚动处理程序中有效地调用$('#something').something()。

$.fn.ourFunction = do ($=jQuery) ->
  (opts) ->
    $(window).scroll =>
      this.something()
      @something()
    @

我们的最后一行只是@字符。这允许链接，因为我们正在返回this。或者，如果我们的最后一行调用this上的另一个可链接方法，我们就不需要将其显式化。

$.fn.flash = do ($=jQuery) -> (opts) ->
  @animate(opacity: 0).delay()
   .animate({opacity: 1})

如何在CoffeeScript中创建jQuery插件？

2 个答案: