Maintenant que nous comprenons les bases du développement de plugins, nous pouvons creuser un peu plus loin. Parce qu'en fin de compte, un plugin est une fonction, il nous fournit la portée que nous devons organiser. Rappelez-vous quand nous avons mis de l'ordre dans notre maison lorsque nous avons appris à créer des modèles? Nous pouvons utiliser certains de ces mêmes concepts dans un plugin.
Mais d'abord, je pense que l'architecture du plugin jQuery peut bénéficier d'un code standard. Peut-être connaissez-vous le HTML5 Boilerplate qui fournit un tas de valeurs par défaut intelligentes. Un passe-partout jQuery Plugin est le même genre de chose. Enregistre un peu de frappe et vous permet de suivre la voie du développement intelligent.
Je suis tombé sur un projet appelé littéralement jQuery Boilerplate qui, je suppose, est bon. Mais je n'ai pas beaucoup creusé dans celui-là. Au lieu de cela, j'aime assez Starter de Doug Neiner. Vous fournissez un nom, des valeurs par défaut et des choix et cela générera cette structure passe-partout pour vous.
Nous décidons de faire un slider nommé lodgeSlider avec un simple paramètre de vitesse et nous nous retrouvons avec ce code:
(function($)( $.lodgeSlider = function(el, options)( // To avoid scope issues, use 'base' instead of 'this' // to reference this class from internal events and functions. var base = this; // Access to jQuery and DOM versions of element base.$el = $(el); base.el = el; // Add a reverse reference to the DOM object base.$el.data("lodgeSlider", base); base.init = function()( base.options = $.extend((),$.lodgeSlider.defaultOptions, options); // Put your initialization code here ); // Sample Function, Uncomment to use // base.functionName = function(paramaters)( // // ); // Run initializer base.init(); ); $.lodgeSlider.defaultOptions = ( speed: 300 ); $.fn.lodgeSlider = function(options)( return this.each(function()( (new $.lodgeSlider(this, options)); )); ); ))(jQuery);Beaucoup de ces éléments devraient vous paraître familiers. Il existe un IIFE enveloppant le plugin pour plus de sécurité. Une fonction est créée à partir de l'objet jQuery. Il y a une fonction init appelée tout de suite. Il existe une méthode créée à partir de l'objet jQuery qui renvoie un objet jQuery. Il existe des variables créées des références de mise en cache que nous utiliserons probablement à nouveau. Surtout des choses que nous avons vues auparavant.
Peut-être deux choses nouvelles. L'un est l'objet d'options là-dedans. Vous pouvez voir la valeur 300 codée en dur. Mais voyez aussi la ligne avec $.extend(). C'est une fonction jQuery pour combiner deux objets en un, l'un ayant priorité sur l'autre. Lorsque nous appelons le plugin, peut-être comme ceci:
$("#slider-1").lodgeslider();Nous ne transmettons aucune option, et cet objet vide est combiné avec notre objet codé en dur, et les valeurs par défaut sont disponibles dans le plugin. Mais nous pourrions aussi l'appeler ainsi:
$("#slider-1").lodgeslider(( speed: 500 ));On y passe un objet comme paramètre. Cet objet est combiné avec notre objet codé en dur, a la priorité, et la valeur que nous avons passée devient la valeur disponible dans le plugin. Plutôt cool.
L'autre nouveauté est ce peu bizarre avec .data(). Nous avons créé la variable de base pour référencer la fonction elle-même, qui est créée à nouveau pour chaque élément sur lequel le plugin est appelé. Par exemple, disons que nous avons appelé le plugin $(".slider")- il pourrait y avoir deux éléments sur la page avec un nom de classe slider. Chaque boucle s'exécute et deux instances de la fonction lodgeSlider sont créées. Dans chacun d'eux, nous y attachons une référence à l'élément lui-même. De cette façon, nous pouvons appeler des méthodes de plugin internes à partir de n'importe quelle référence que nous avons de cet élément.
Comme peut-être:
$(".the-first-slider").data("lodgeSlider").changeSlide(2);Juste un peu nous donne un bon moyen d'utiliser les méthodes de plugin si nous en avons besoin.
Nous ne sommes pas allés très loin dans cette aventure de création de plugins:
Voir le stylo construire un curseur à partir de zéro par Chris Coyier (@chriscoyier) sur CodePen
Honnêtement, le monde n'a probablement pas besoin d'un autre plugin de curseur. Mais vous pouvez voir à quel point ils pourraient devenir complexes. Voici quelques idées:
- Il peut y avoir des fonctions de rappel (ou des événements personnalisés) avant et après le changement de diapositive, après la configuration du curseur, après son démontage, etc.
- Les largeurs peuvent être basées sur un pourcentage et recalculées lorsque la fenêtre du navigateur change.
- La navigation pourrait être construite dynamiquement au lieu d'être requise dans le balisage.
- Les identifiants et #hash hrefs peuvent également être créés dynamiquement.
- Des événements tactiles tels que des balayages pourraient être ajoutés pour rendre le curseur plus convivial (les petits points ne sont pas compatibles avec le toucher).
Plus vous faites de choses, plus la taille du plugin est grande. C'est pourquoi trouver cet équilibre entre fonctionnalités, praticité, performances et taille est si délicat et où il y a tant de plugins différents qui font finalement la même chose.