1

关于如何创建基本插件有一个标题为保护 $ 别名和添加范围的部分。

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

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

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

如何将其翻译成 CoffeeScript？

4

2 回答 2

2

这个咖啡脚本：

$ = 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);
于 2013-08-07T01:55:58.783 回答
1

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

$.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})
于 2013-08-06T06:33:43.550 回答