Escribir un plugin de jQuery en CoffeeScript - Como llegar “(function ($)” y “(jQuery)”?

Question

Estoy escribiendo un plugin de jQuery en CoffeeScript pero no estoy seguro de cómo obtener la función de envoltura parte derecha.

Mis CoffeeScript comienza con esto:

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

Lo que crea el código JavaScript con un envoltorio de función:

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

pero yo quiero un '$' aprobada en este aspecto:

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

Al igual que para el que termina ... tienen nada en particular en CoffeeScript.
Me sale esto en javascript:

})();

Pero lo desea:

})(jQuery);

¿Alguien sabe cómo lograr esto con el compilador CoffeeScript? O ¿cuál es la mejor manera de hacer esto dentro de CoffeeScript?

Answer 1

La respuesta es que no es necesario llamarlo así en CoffeeScript - el guión ya está envuelto con seguridad en un cierre, por lo que no hay necesidad de jQuery-pasado-en-as-a-parámetro-tricks. escribir simplemente:

$ = jQuery

... en la parte superior de su script, y ya está bueno para ir.

Answer 2

A menos que estés usando la bandera --bare en el compilador, el

$ = jQuery

es la mejor solución. Si son , luego con la nueva palabra clave do, puede escribir

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

creando así el alcance deseado, evitando un desastre o' paréntesis.

Answer 3

ACTUALIZACIÓN / EDIT: Sí, según la explicación de Jeremy:

$ = jQuery

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

se compila a:

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

Lo que funciona bien como un plugin de jQuery: $('body').myPlugin();

Original:

De acuerdo, creo que puede acercarse en este caso, que me haga saber si ayuda.

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

hace en:

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

Answer 4

La forma más fácil es ampliar $. Fn objetivo

plugin de jQuery simple se puede escribir en CoffeeScript la siguiente manera:

$.extend $.fn,

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

se compilará a

(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

Se debe echar un vistazo a la versión de jQuery CoffeeScript plancha de caldera de ~ https://github.com/zenorocha/jquery-boilerplate/blob/master/jquery.boilerplate.coffee

Answer 6

A pesar de que este post es viejo me pareció útil. Aquí está el código coffeescript que funciona para mí.

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

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

Nota: . No es necesario declarar la variable $, sólo se puede usar nada más sacarlo de la caja

Answer 7

Simplemente podría añadir el cierre de uno mismo y compilarlo con la bandera --bare.

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

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

Answer 8

simple y directo

Esto es todo lo que tenía que ver con el fin de añadir mi propio método, cleanFadeIn, en objetos jQuery. Devuelve los objetos para encadenar así:

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