Scrivi plugin jQuery in CoffeeScript - come ottenere “(function ($)” e “(jQuery)”?

Question

Sto scrivendo un plugin jQuery in CoffeeScript, ma non sono sicuro di come ottenere la funzione wrapper parte destra.

I miei CoffeeScript inizia con questo:

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

che crea il JavaScript con una funzione wrapper:

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

, ma voglio un '$' passato in questo modo:

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

Simile per il finale che ho ... niente di particolare in CoffeeScript.
Ottengo questo in javascript:

})();

Ma sarebbe come questo:

})(jQuery);

Qualcuno sa come raggiungere questo obiettivo con il compilatore CoffeeScript? O che cosa è il modo migliore per ottenere questo fatto entro CoffeeScript?

Answer 1

La risposta è che non c'è bisogno di chiamare in quel modo in CoffeeScript - lo script è già spostato sicuro in una chiusura, quindi non c'è alcuna necessità di jQuery-passato-in-as-a-parametro-trucchi. Basta scrivere:

$ = jQuery

... nella parte superiore dello script, e si sta bene ad andare.

Answer 2

A meno che non si sta utilizzando il flag --bare nel compilatore, il

$ = jQuery

soluzione è migliore. Se sono , poi con la nuova parola chiave do, è possibile scrivere

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

creando così la portata desiderata, evitando un disordine o' parentesi.

Answer 3

UPDATE / EDIT: Sì, secondo la spiegazione di Jeremy:

$ = jQuery

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

viene compilato in:

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

Il che funziona bene come un plugin jQuery: $('body').myPlugin();

originale:

Va bene, credo di poter avvicinarsi su questo, me lo faccia sapere se aiuta.

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

rende in:

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

Answer 4

Il modo più semplice è quello di estendere $. Fn oggetto

plugin per jQuery Semplice può essere scritta in CoffeeScript come segue:

$.extend $.fn,

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

si compilare in

(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

Si dovrebbe dare un'occhiata alla versione di jQuery CoffeeScript Boilerplate ~ https://github.com/zenorocha/jquery-boilerplate/blob/master/jquery.boilerplate.coffee

Answer 6

Anche se questo post è vecchio l'ho trovato utile. Ecco il codice del caffè-script che funziona per me.

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

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

Nota :. Non è necessario dichiarare la variabile $, si può semplicemente utilizzare nel modo giusto fuori dalla scatola

Answer 7

Si potrebbe semplicemente aggiungere la chiusura se stessi e compilarlo con la bandiera --bare.

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

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

Answer 8

semplice e lineare

Questo è tutto quello che dovevo fare per aggiungere il mio proprio metodo, cleanFadeIn, su oggetti jQuery. Esso restituisce gli oggetti per il concatenamento così:

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