36 votes

Écrire un plugin jquery dans coffeescript - Comment obtenir "(function ($)" et "(jQuery)"?

Je suis en train d'écrire un plugin jquery en coffeescript, mais je suis pas sûr de la façon d'obtenir la fonction wrapper partie droite.

Mon coffeescript commence avec ceci:

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

Ce qui crée le javascript avec une fonction wrapper:

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

mais je veux un '$' passé comme ceci:

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

De même pour la fin, j'ai... rien de particulier en coffeescript.
J'obtiens ceci en javascript:

})();

Mais serait comme ceci:

})(jQuery);

Personne ne sait comment y parvenir avec la coffeescript compilateur? Ou quelle est la meilleure façon d'obtenir ce fait à l'intérieur de coffeescript?

54voto

jashkenas Points 3203

La réponse est que vous n’avez pas besoin de l’appeler comme cela dans CoffeeScript: votre script est déjà correctement encapsulé dans une fermeture. Vous n’avez donc pas besoin de tricks jQuery-passés-en-paramètres-paramètres. Ecrivez:

 $ = jQuery
 

... en haut de votre script, et vous êtes prêt à partir.

19voto

Trevor Burnham Points 43199

Sauf si vous utilisez le drapeau --bare dans le compilateur, le

 $ = jQuery
 

la solution est la meilleure. Si vous l’ êtes , avec le nouveau mot clé do , vous pouvez écrire

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

créant ainsi la portée souhaitée tout en évitant les problèmes de parenthèses.

6voto

Darren Newton Points 1352

UPDATE / EDIT: Oui, selon l'explication de Jeremy:

 $ = jQuery

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

compile pour:

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

Ce qui fonctionne très bien comme plugin jQuery: $('body').myPlugin();

Original:

D'accord, je pense que je peux m'approcher de celui-ci, laissez-moi savoir si cela peut vous aider.

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

se traduit en:

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

3voto

Tomasz Mazur Points 264

Le moyen le plus simple est d'étendre l'objet $ .fn

Le plugin jQuery simple peut être écrit en CoffeeScript comme suit:

 $.extend $.fn,

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

il va compiler pour

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

2voto

Zeno Rocha Points 21

Vous devriez jeter un coup d’œil à la version CoffeeScript de jQuery Boilerplate ~ https://github.com/zenorocha/jquery-boilerplate/blob/master/jquery.boilerplate.coffee

Prograide.com

Prograide est une communauté de développeurs qui cherche à élargir la connaissance de la programmation au-delà de l'anglais.
Pour cela nous avons les plus grands doutes résolus en français et vous pouvez aussi poser vos propres questions ou résoudre celles des autres.

Powered by:

X