jQuery Academy · Leçon

Intégration de méthodes publiques et de rappels

Intégration de méthodes publiques et de rappels est une leçon jQuery Academy gratuite sur CoddyKit. Ceci est la leçon 3 sur 3. Tu peux lire la leçon complète ci-dessous gratuitement — puis la pratiquer en direct dans le navigateur avec un éditeur de code intégré et un tuteur IA 24/7. Elle fait partie du parcours d'apprentissage jQuery Academy, et ta progression se synchronise sur le web et l'application CoddyKit. Le cours jQuery Academy comprend 3 leçons au total.

Interagir avec vos modules d’extension

Les excellents modules d’extension ne sont pas seulement autonomes. Ils permettent aux utilisateurs d’interagir avec eux après leur initialisation ! Cette leçon vous apprend à ajouter des méthodes publiques pour les contrôler depuis l’extérieur et des fonctions de rappel pour déclencher des réactions personnalisées.

Méthodes publiques : fonctions que les utilisateurs peuvent appeler sur une instance de module d’extension initialisée.
Fonctions de rappel : fonctions qui s’exécutent lorsque des événements précis se produisent dans votre module d’extension.

Rappel des bases des modules d’extension

Rappelez-vous que les modules d’extension jQuery sont souvent enveloppés dans une expression de fonction immédiatement invoquée (IIFE) afin d’éviter la pollution de la portée globale. Cette structure fournit un espace sécurisé pour la logique et les variables internes de votre module d’extension.

Nous allons nous appuyer sur ce modèle familier.

(function($) {
  $.fn.myPlugin = function(options) {
    // Default settings
    var settings = $.extend({}, $.fn.myPlugin.defaults, options);

    return this.each(function() {
      var $this = $(this); // The element the plugin is applied to
      // Plugin logic goes here
      console.log("Plugin initialized on: " + $this.attr('id'));
    });
  };

  // Default options
  $.fn.myPlugin.defaults = {
    message: "Hello from plugin!"
  };
})(jQuery);

// How to use (in HTML <div id="myElement"></div>):
// $('#myElement').myPlugin();

Que sont les méthodes publiques ?

Une méthode publique est une fonction exposée par votre module d’extension, qui peut être appelée depuis l’extérieur de sa portée interne, même après l’initialisation du module sur un élément.

Considérez-la comme une télécommande pour votre module d’extension. Vous pouvez lui demander d’effectuer des actions comme « réinitialiser », « mettre à jour » ou « obtenir une valeur ».

Implémenter une méthode publique

Pour ajouter des méthodes publiques, nous enregistrons généralement les données de l’instance du module d’extension (y compris ses méthodes) directement sur l’élément DOM, à l’aide de la méthode .data() de jQuery.

Créons un module d’extension simple de type « compteur » et ajoutons-lui une méthode getValue.

(function($) {
  $.fn.counterPlugin = function(options) {
    var settings = $.extend({
      initialValue: 0
    }, options);

    return this.each(function() {
      var $this = $(this);
      var value = settings.initialValue;

      var methods = {
        getValue: function() {
          return value;
        },
        increment: function() {
          value++;
          $this.text(value); // Update display
        },
        init: function() {
          $this.text(value); // Initial display
        }
      };

      // Store methods on the element's data
      $this.data('counterPlugin', methods);
      methods.init(); // Initialize display
    });
  };
})(jQuery);

// HTML: <div id="myCounter"></div>
// Usage: $('#myCounter').counterPlugin();
// Later: $('#myCounter').data('counterPlugin').getValue();

Appeler des méthodes publiques

Une fois votre module d’extension initialisé et ses méthodes enregistrées avec .data(), vous pouvez y accéder directement et les appeler.

La clé consiste d’abord à récupérer l’instance enregistrée depuis l’élément, puis à appeler la méthode sur cette instance.

// Assume counterPlugin from previous scene is loaded

// HTML: <div id="myCounter"></div>

$(document).ready(function() {
  // Initialize the plugin
  $('#myCounter').counterPlugin({ initialValue: 5 });

  // Get the plugin instance
  var counterInstance = $('#myCounter').data('counterPlugin');

  // Call public methods
  console.log("Current value: " + counterInstance.getValue());
  counterInstance.increment();
  console.log("After increment: " + counterInstance.getValue());
});

Que sont les fonctions de rappel ?

Les fonctions de rappel sont des fonctions que vous transmettez à votre module d’extension, et que celui-ci exécute à des moments précis de son cycle de vie ou lorsque certains événements internes se produisent.

Elles permettent aux utilisateurs de « se brancher » sur le comportement de votre module d’extension et d’ajouter leur propre logique personnalisée sans modifier le code source du module.

Considérez-les comme des écouteurs d’événements pour les actions internes du module d’extension.
Fonctions de rappel courantes : onInit, onChange, onComplete.

Implémenter une fonction de rappel

Pour implémenter une fonction de rappel, définissez-la d’abord dans les options par défaut de votre module d’extension. Ensuite, dans votre module d’extension, appelez simplement cette fonction lorsque l’événement concerné se produit, en lui transmettant les données utiles.

Étendons notre module d’extension de compteur avec une fonction de rappel onChange.

(function($) {
  $.fn.counterPlugin = function(options) {
    var settings = $.extend({
      initialValue: 0,
      onChange: function(newValue) {} // Default empty callback
    }, options);

    return this.each(function() {
      var $this = $(this);
      var value = settings.initialValue;

      var methods = {
        getValue: function() {
          return value;
        },
        increment: function() {
          value++;
          $this.text(value);
          // Call the callback when value changes
          settings.onChange.call($this[0], value); 
        },
        init: function() {
          $this.text(value);
        }
      };

      $this.data('counterPlugin', methods);
      methods.init();
    });
  };
})(jQuery);

// Usage: See next scene!

Transmettre des fonctions de rappel

Lors de l’initialisation, les utilisateurs transmettent leurs fonctions de rappel personnalisées directement dans l’objet d’options du module d’extension. Ces fonctions sont ensuite appelées par le module au moment approprié.

Remarquez l’utilisation de .call($this[0], value). Elle définit this dans la fonction de rappel comme l’élément DOM et transmet la nouvelle valeur comme argument.

// Assume counterPlugin with onChange callback is loaded

// HTML: <div id="myCounter"></div>

$(document).ready(function() {
  $('#myCounter').counterPlugin({
    initialValue: 10,
    onChange: function(newValue) {
      console.log("Counter changed to: " + newValue + " on element: " + this.id);
      if (newValue % 2 === 0) {
        $(this).css('color', 'blue');
      } else {
        $(this).css('color', 'red');
      }
    }
  });

  var counterInstance = $('#myCounter').data('counterPlugin');
  counterInstance.increment(); // Triggers callback
  counterInstance.increment(); // Triggers callback
});

Plusieurs méthodes et fonctions de rappel

Vous pouvez définir plusieurs méthodes publiques et différentes fonctions de rappel pour gérer divers événements dans votre module d’extension. Vous créez ainsi un composant flexible et puissant.

Les méthodes publiques permettent aux utilisateurs de commander le module d’extension.
Les fonctions de rappel permettent au module d’extension d’informer le code de l’utilisateur de ce qui se passe.

(function($) {
  $.fn.advancedCounter = function(options) {
    var settings = $.extend({
      initial: 0,
      onIncrement: null, // New callback
      onDecrement: null, // New callback
      onReset: null      // New callback
    }, options);

    return this.each(function() {
      var $this = $(this);
      var value = settings.initial;

      var methods = {
        getValue: function() { return value; },
        increment: function() {
          value++;
          $this.text(value);
          if ($.isFunction(settings.onIncrement)) {
            settings.onIncrement.call($this[0], value);
          }
        },
        decrement: function() {
          value--;
          $this.text(value);
          if ($.isFunction(settings.onDecrement)) {
            settings.onDecrement.call($this[0], value);
          }
        },
        reset: function() {
          value = settings.initial;
          $this.text(value);
          if ($.isFunction(settings.onReset)) {
            settings.onReset.call($this[0], value);
          }
        },
        init: function() { $this.text(value); }
      };

      $this.data('advancedCounter', methods);
      methods.init();
    });
  };
})(jQuery);

// HTML: <div id="myAdvancedCounter"></div>
$(document).ready(function() {
  $('#myAdvancedCounter').advancedCounter({
    initial: 100,
    onIncrement: function(v) { console.log("Inc: " + v); },
    onReset: function(v) { console.log("Reset to: " + v); }
  });
  var inst = $('#myAdvancedCounter').data('advancedCounter');
  inst.increment();
  inst.reset();
});

Conseils sur les méthodes publiques et les fonctions de rappel

Lors de la conception de l’interface publique de votre module d’extension, gardez ces conseils à l’esprit :

Nommage cohérent : utilisez des noms clairs et descriptifs pour les méthodes et les fonctions de rappel.
Gestion des erreurs : vérifiez que les fonctions de rappel sont bien des fonctions avant de les appeler (par exemple, $.isFunction(settings.onComplete)).
Contexte : utilisez .call() ou .apply() pour définir le contexte de this des fonctions de rappel, souvent sur l’élément auquel le module d’extension est appliqué.
Arguments : transmettez les données pertinentes aux fonctions de rappel (par exemple, une nouvelle valeur ou un objet événement).

Questionnaire sur l’interaction avec les modules d’extension

Considérez un module d’extension jQuery initialisé sur #myElement. Ce module possède une méthode publique appelée doSomething() et une fonction de rappel onComplete.

Quel extrait de code appelle correctement la méthode publique ET transmet une fonction de rappel personnalisée lors de l’initialisation ?

Récapitulatif et prochaines étapes

Vous maîtrisez désormais la création de modules d’extension jQuery véritablement interactifs et flexibles !

Les méthodes publiques permettent au code externe de contrôler votre module d’extension et d’interroger son état après son initialisation.
Les fonctions de rappel offrent aux utilisateurs des points d’accroche pour injecter leur propre logique et réagir aux événements internes du module d’extension.

Ces techniques sont essentielles pour créer des modules d’extension jQuery robustes, réutilisables et faciles à utiliser.

Questions Fréquemment Posées

La leçon « Intégration de méthodes publiques et de rappels » est-elle gratuite ?

Oui — le texte complet de « Intégration de méthodes publiques et de rappels » est gratuit à lire ici sur le web. Pour la pratiquer de manière interactive (un éditeur de code intégré et un tuteur IA 24/7) et déverrouiller le reste du cours jQuery Academy, passe à CoddyKit PRO. Le cours jQuery Academy comprend 3 leçons au total.

Qu'est-ce que j'apprendrai dans « Intégration de méthodes publiques et de rappels » ?

Ajoutez des méthodes publiques à vos extensions pour permettre les interactions externes et intégrez des fonctions de rappel afin que les utilisateurs puissent se connecter à des événements précis de… Tu pratiques jQuery Academy avec du code pratique que tu exécutes directement dans le navigateur, et un tuteur IA 24/7 répond à tes questions au fur et à mesure que tu avances dans la leçon.

Dois-je avoir de l'expérience pour commencer jQuery Academy ?

Aucune expérience préalable n'est requise. jQuery Academy sur CoddyKit est structuré pour les débutants jusqu'aux apprenants avancés, donc tu peux commencer ici ou depuis le début et avancer à ton rythme. Ceci est la leçon 3 sur 3.

Combien de temps prend la leçon « Intégration de méthodes publiques et de rappels » ?

La plupart des leçons CoddyKit prennent environ 5–10 minutes. Chacune est courte et interactive, tu progresses régulièrement et tu repiques exactement où tu t'es arrêté sur le web et l'app.

Peux-tu écrire et exécuter du code dans cette leçon jQuery Academy ?

Oui. Chaque leçon jQuery Academy inclut un éditeur de code intégré, tu écris et exécutes du vrai code directement dans ton navigateur et tu reçois des retours IA instantanés — aucune configuration locale requise.

Toutes les leçons de ce cours

Modèles de conception et portée des extensions
Création d’extensions configurables et réutilisables
Intégration de méthodes publiques et de rappels

← Retour à jQuery Academy