tutorial - coffeescript vs javascript

Escribir un plugin jquery en coffeescript-cómo obtener "(función($)" y "(jQuery)"?

Question

Estoy escribiendo un plugin jquery en coffeescript, pero no estoy seguro de cómo hacer que la envoltura de la función quede bien.

Mi coffeescript comienza con esto:

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

Lo cual crea el javascript con un contenedor de funciones:

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

pero quiero un ''$'' aprobado así:

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

Similar para el final que tengo ... nada en particular en coffeescript.
Lo consigo en javascript:

})();

Pero me gustaría esto:

})(jQuery);

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

Answer 1

Simple y directo

Esto es todo lo que tuve que hacer para agregar mi propio método, cleanFadeIn , en objetos jQuery. Devuelve los objetos para encadenar también:

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

Answer 2

A menos que esté usando el indicador --bare en el compilador, el

$ = jQuery

la solución es lo mejor Si es así , entonces con la nueva palabra clave do , puede escribir

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

creando así el alcance deseado evitando un desorden de paréntesis.

Answer 3

Aunque esta publicación es antigua, la encontré útil. Aquí está el código de script de café que funciona para mí.

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

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

Nota : No necesita declarar la variable $ , puede usarla de inmediato.

Answer 4

Debería echar un vistazo a la versión CoffeeScript de jQuery Boilerplate ~ https://github.com/zenorocha/jquery-boilerplate/blob/master/jquery.boilerplate.coffee

Answer 5

La forma más fácil es extender el objeto $ .fn

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

$.extend $.fn,

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

se compilará para

(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 6

La respuesta es que no necesita llamarlo así en CoffeeScript: su secuencia de comandos ya está envuelta de forma segura en un cierre, por lo que no es necesario pasar jQuery-passed-in-as-a-parameter-tricks. Solo escribe:

$ = jQuery

... en la parte superior de tu script, y estás listo para empezar.

Answer 7

Simplemente puede agregar el cierre usted mismo y compilarlo con la bandera --bare .

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

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

Answer 8

ACTUALIZAR / EDITAR: Sí, según la explicación de Jeremy:

$ = jQuery

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

compila a:

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

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

Original:

De acuerdo, creo que me estoy acercando a esto, avíseme si ayuda.

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

rinde en:

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