Schreiben eines JQuery -Plugins in Coffeescript - Wie bekomme ich "(Funktion ($)" und "(jQuery)"?

Question

Ich schreibe ein JQuery -Plugin in CoffeeScript, bin mir jedoch nicht sicher, wie ich den Funktionsumschlüsselteil richtig machen kann.

Mein Coffeescript beginnt damit:

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

Dies erstellt das JavaScript mit einem Funktionsumschlag:

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

Aber ich möchte ein '$' wie folgt übergeben:

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

Ähnlich für das Ende, das ich habe ... nichts Besonderes in Coffeescript.
Ich verstehe das in JavaScript:

})();

Aber würde das mögen:

})(jQuery);

Weiß jemand, wie man dies mit dem Coffeescript -Compiler erreicht? Oder was ist der beste Weg, dies in Coffeescript zu erledigen?

Answer 1

Die Antwort ist, dass Sie es in CoffeeScript nicht so nennen müssen-Ihr Skript ist bereits sicher in einen Verschluss eingewickelt, sodass Sie nicht in einem A-A-Parameter-Tricks von JQuery-Passing-Passings erforderlich sind. Einfach schreiben:

$ = jQuery

... oben in Ihrem Drehbuch, und Sie können loslegen.

Answer 2

Es sei denn, Sie verwenden die --bare Flagge im Compiler, die

$ = jQuery

Lösung ist am besten. Wenn du sind, dann mit dem neuen do Schlüsselwort, Sie können schreiben

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

So erzeugen Sie den gewünschten Umfang und vermeiden Sie ein Chaos von Klammern.

Answer 3

Aktualisieren/Bearbeiten: Ja, laut Jeremys Erklärung:

$ = jQuery

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

kompiliert zu:

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

Was als JQuery -Plugin gut funktioniert: $('body').myPlugin();

Original:

Okay, ich denke, ich werde mich vielleicht nähern lassen, lassen Sie mich wissen, ob es hilft.

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

rendert in:

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

Answer 4

Der einfachste Weg ist die Ausdehnung $ .fn Objekt

Einfaches JQuery -Plugin kann wie folgt in Coffeescript geschrieben werden:

$.extend $.fn,

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

es wird zusammen kompilieren

(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

Sie sollten einen Blick auf die CoffeeScript -Version von JQuery Boilerplate ~ werfen ~ https://github.com/zenorocha/jquery-boilerplate/blob/master/jquery.boilerplate.coffee

Answer 6

Obwohl dieser Beitrag alt ist, fand ich ihn nützlich. Hier ist der Kaffee-Skriptcode, der für mich funktioniert.

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

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

Notiz: Sie müssen das nicht deklarieren $ Variable, Sie können es einfach direkt aus der Box verwenden.

Answer 7

Sie könnten den Verschluss einfach selbst hinzufügen und sie mit dem kompilieren --bare Flagge.

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

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

Answer 8

Einfach und unkompliziert

Dies ist alles, was ich tun musste, um meine eigene Methode hinzuzufügen. cleanFadeIn, auf jQuery -Objekten. Es gibt auch die Objekte zum Ketten zurück:

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