jQuery UI Pourquoi utiliser la bibliothèque de widgets


Écrire un plugin jQuery est aussi simple que d'ajouter une méthode à jQuery.prototype (généralement affichée par $.fn) et suit quelques règles simples, comme renvoyer this. Alors pourquoi une fabrique de widgets existe-t-elle ?

Dans ce chapitre, nous expliquerons les avantages de Widget Factory et comprendrons quand et pourquoi l'utiliser.

Plugins sans état ou avec état

La plupart des plugins jQuery sont sans état, ils effectuent certaines actions pour accomplir leur tâche. Par exemple, si vous utilisez .text( "hello" ) pour définir le texte d'un élément, le résultat sera le même sans la phase d'installation. Pour ce type de plugin, il étend simplement le prototype de jQuery.

Cependant, certains plugins sont avec état, ils ont un cycle de vie complet, conservent leur état et réagissent aux changements. Ces plugins nécessitent beaucoup de code spécialisé pour l'initialisation et la gestion des états (et parfois la destruction). Cela conduit à des modèles pour créer des plugins avec état. Pour aggraver les choses, chaque auteur de plug-in gère le cycle de vie et l'état du plug-in de différentes manières, ce qui donne lieu à des styles d'API différents pour différents plug-ins. Widget Factory vise à résoudre ces problèmes en supprimant les modèles et en créant une API cohérente pour les plugins.

API cohérente

La Widget Factory définit comment créer et détruire des widgets, obtenir et définir des options, appeler des méthodes et écouter les événements déclenchés par les widgets. En utilisant Widget Factory pour créer des plug-ins avec état, ils se conforment automatiquement aux normes définies, ce qui facilite l'utilisation de vos plug-ins par les nouveaux utilisateurs. De plus, Widget Factory peut également implémenter la fonction de définition d'interfaces. Si vous n'êtes pas familier avec l'API fournie par Widget Factory, veuillez consulter Comment utiliser Widget Factory.

Définir les options à l'initialisation

Lorsque vous créez un plugin qui accepte les options, vous devez définir les valeurs par défaut pour autant d'options que possible. Ensuite, lors de l'initialisation, les options fournies par l'utilisateur sont fusionnées avec les valeurs par défaut. Vous pouvez également exposer les valeurs par défaut afin que les utilisateurs puissent les modifier. Dans les plug-ins jQuery, un modèle couramment utilisé est le suivant :

$.fn.plugin = function( options ) {
    options = $.extend( {}, $.fn.plugin.defaults, options );
    // Plugin logic goes here.
};
 
$.fn.plugin.defaults = {
    param1: "foo",
    param2: "bar",
    param3: "baz"
};

La bibliothèque de widgets (Widget Factory) fournit également cette fonction et y a apporté des améliorations. Après avoir utilisé Widget Factory, cela ressemblera à ceci.

$.widget( "ns.plugin", {
 
    // Default options.
    options: {
        param1: "foo",
        param2: "bar",
        param3: "baz"
    },
 
    _create: function() {
        // Options are already merged and stored in this.options
        // Plugin logic goes here.
    }
 
});