在coffescript中编写jquery插件 - 如何获取“(function($)”和“(jQuery)”？

Question

我正在用 CoffeeScript 编写一个 jquery 插件，但不确定如何正确使用函数包装器部分。

我的coffeescript以此开头：

$.fn.extend({
    myplugin: ->
        @each ->

它使用函数包装器创建了javascript：

(function() {
  $.fn.extend({
      myplugin: function() {
          return this.each(function() {

但我想要像这样传入'$'：

(function($) {
  $.fn.extend({

与结尾类似，我...在coffeescript中没有什么特别的。
我在 javascript 中得到了这个：

})();

但想要这样：

})(jQuery);

有谁知道如何使用咖啡脚本编译器来实现这一点？ 或者在 Coffeescript 中完成此操作的最佳方法是什么？

Answer 1

答案是，您不需要像 CoffeeScript 中那样调用它——您的脚本已经安全地包装在闭包中，因此不需要 jQuery-passed-in-as-a-parameter-tricks。 写下： ...，就可以开始了。

$ = jQuery

只需在脚本顶部

Answer 2

除非您在编译器中使用 --bare 标志，否则

$ = jQuery

解决方案是最好的。如果您是，那么使用新的do关键字，您可以编写

do ($ = jQuery) ->
   # plugin code...

这样创建所需的范围，同时避免括号混乱。

Answer 3

更新/编辑：是的，根据 Jeremy 的解释：

$ = jQuery

$.fn.myPlugin = () ->
  console.log('test fired')

编译为：

(function() {
  var $;
  $ = jQuery;
  $.fn.myPlugin = function() {
    return console.log('test fired');
  };
}).call(this);

作为 jQuery 插件工作得很好：$('body').myPlugin() ;

原文：

好的，我想我可能会接近这个，如果有帮助请告诉我。

(($) ->
  $.fn.extend =
    myplugin: ->
    @each: ->
)(jQuery)

渲染成：

(function() {
  (function($) {
    return $.fn.extend = {
      myplugin: function() {},
      this.each: function() {}
    };
  })(jQuery);
}).call(this);

Answer 4

最简单的方法是扩展 $.fn 对象

简单的 jQuery 插件可以用 CoffeeScript 编写，如下所示：

$.extend $.fn,

  disable: ->
    @each ->
      e = $(this)
      e.attr("disabled", "disabled") if e.is("button") or e.is("input")

它将编译为

(function() {
  $.extend($.fn, {
    disable: function() {
      return this.each(function() {
        var e;
        e = $(this);
        if (e.is("button") || e.is("input")) {
          return e.attr("disabled", "disabled");
        }
      });
    }
  });
}).call(this);

Answer 5

你应该看看 jQuery Boilerplate 的 CoffeeScript 版本 ~ https: //github.com/zenorocha/jquery-boilerplate/blob/master/jquery.boilerplate.coffee

Answer 6

虽然这篇文章很旧，但我发现它很有用。这是适合我的咖啡脚本代码。

$ -> 
    $('.my-class').hello()

$.fn.hello=-> 
    @each -> 
        $(@).append $ '<div>Hello</div>'

注意：您不需要声明 $ 变量，您可以直接使用它。

Answer 7

您可以简单地自己添加闭包并使用 --bare 标志对其进行编译。

咖啡-w -c --bare jquery.plugin.coffee

(($) ->
  # some code here
)(jQuery)

Answer 8

简单而直接

这就是我在 jQuery 对象上添加我自己的方法 cleanFadeIn 所要做的全部事情。它还返回用于链接的对象：

$.fn.extend
  cleanFadeIn: ->                     # $('.notice').cleanFadeIn
    return $(@).each ->               # returns the objects for easy chaining.
      $(@).slideDown 'slow', ->
        $(@).fadeTo 'slow', 1