如何在 CoffeeScript 中创建 jQuery 插件？答案

【问题标题】：How do I create a jQuery plugin in CoffeeScript?如何在 CoffeeScript 中创建 jQuery 插件？
【发布时间】：2013-08-06 06:33:43
【问题描述】：

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

$ 变量在 JavaScript 库中非常流行，如果您正在使用另一个带有 jQuery 的库，您必须制作 jQuery 不要将 $ 与 jQuery.noConflict() 一起使用。但是，这会破坏我们的插件，因为它是在假设 $ 是一个别名的情况下编写的 jQuery 函数。与其他插件一起工作，并且仍然使用 jQuery $ 别名，我们需要把我们所有的代码放在一个立即调用函数表达式，然后传递函数 jQuery，并将参数命名为 $:

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

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

如何将其翻译成 CoffeeScript？

【问题讨论】：

标签： jquery jquery-plugins coffeescript scope

【解决方案1】：

这个咖啡脚本：

$ = 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);

【讨论】：

【解决方案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})

【讨论】：