Escribir un plugin de jQuery en CoffeeScript - Como llegar “(function ($)” y “(jQuery)”?
-
13-10-2019 - |
Pregunta
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?
Solución
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.
Otros consejos
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.
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);
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);
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
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
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)
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