tutorial javascript jquery coffeescript

tutorial - coffeescript vs javascript



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

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?


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


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.


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.



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);


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.


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

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

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


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);