Share
Il y a longtemps, dans une galaxie très éloignée, JavaScript était un langage détesté. En fait, "détesté" est un euphémisme; JavaScript était une langue méprisée. En conséquence, les développeurs l'ont généralement traitée comme telle, ne faisant que basculer leurs efforts dans les eaux JavaScript lorsqu'ils ont besoin de donner un peu de flair à leurs applications. Malgré le fait qu'il y ait beaucoup de bonnes choses dans le langage JavaScript, en raison d'une ignorance généralisée, peu ont pris le temps de bien les apprendre. Comme certains d'entre vous s'en souviendront peut-être, l'utilisation standard de JavaScript impliquait un nombre considérable de copies et de collages..
"N'essayez pas d'apprendre ce que le code fait, ou s'il suit les meilleures pratiques; collez-le simplement!" - Le pire conseil de tous les temps
Étant donné que jQuery a suscité un regain d'intérêt pour le langage JavaScript, la plupart des informations sur le Web sont un peu floues..
Ironiquement, il s’avère qu’une grande partie de ce que la communauté du développement détestait n’avait que très peu à voir avec le langage JavaScript lui-même. Non, la vraie menace sous le masque était le DOM, ou "Document Object Model" (Modèle d'objet de document), qui, surtout à l'époque, était horriblement incohérent d'un navigateur à l'autre. "Bien sûr, cela peut fonctionner dans Firefox, mais qu'en est-il d'IE8? D'accord, cela peut fonctionner dans IE8, mais qu'en est-il d'IE7?" La liste continuait inlassablement!
Heureusement, à partir de cinq ans environ, la communauté JavaScript devrait connaître un changement incroyable, car des bibliothèques telles que jQuery ont été présentées au public. Ces bibliothèques fournissaient non seulement une syntaxe expressive particulièrement attrayante pour les concepteurs Web, mais elles ont également réussi à niveler la sensation de lecture en intégrant les solutions de contournement aux divers problèmes de navigateur dans son API. Déclencheur $ .ajax et laissez jQuery faire la partie la plus difficile. Aujourd'hui, la communauté JavaScript est plus dynamique que jamais - en grande partie à cause de la révolution jQuery.
Étant donné que jQuery a suscité un regain d'intérêt pour le langage JavaScript, la plupart des informations sur le Web sont un peu floues. Cela est moins dû à l'ignorance des écrivains, mais plutôt au fait que nous étions tous en train d'apprendre. Il faut du temps pour que les meilleures pratiques émergent.
Heureusement, la communauté a énormément mûri depuis ces jours. Avant de plonger dans certaines de ces meilleures pratiques, exposons d’abord un mauvais conseil qui a circulé sur le Web..
Le problème avec des astuces comme celle-ci est qu’elles poussent l’idée de la préoptimisation à un extrême..
Tout comme Ruby on Rails, la première introduction de JavaScript à de nombreux développeurs s'est faite via jQuery. Cela a conduit à un cycle commun: apprendre jQuery, tomber amoureux, creuser dans le JavaScript vanille et monter de niveau..
Bien que ce cycle ne soit certainement pas un problème, il a ouvert la voie à d'innombrables articles, qui recommandent aux utilisateurs de ne pas utilisez jQuery dans diverses situations, en raison de "problèmes de performances". Il ne serait pas rare de lire qu'il vaut mieux utiliser la vanille pour boucles, sur $ .each. Ou, à un moment ou à un autre, vous avez peut-être lu qu'il est recommandé d'utiliser document.getElementsByClassName sur le moteur Sizzle de jQuery, car il est plus rapide.
Le problème avec les astuces comme celle-ci est qu’elles poussent l’idée de pré-optimisation à l’extrême et qu’elles ne tiennent pas compte des diverses incohérences du navigateur - ce que jQuery a corrigé pour nous! Effectuer un test et observer une économie de quelques millisecondes sur des milliers de répétitions n'est pas une raison pour abandonner jQuery et son élégante syntaxe. Votre temps est beaucoup mieux investi peaufiner des parties de votre application qui feront réellement une différence, telles que la taille de vos images.
Ce deuxième anti-modèle, encore une fois, était le résultat de la communauté (y compris la vôtre vraiment à un moment donné) ne comprenant pas pleinement ce qui se passait sous le capot de jQuery. En tant que tel, vous êtes probablement tombé sur (ou avez écrit vous-même) du code, qui encapsulait un élément de l'objet jQuery d'innombrables fois dans une fonction..
Accentsconagua
$ ('button.confirm'). on ('click', function () // Faites-le une fois $ ('. modal'). modal (); // Et encore une fois $ ('. modal'). addClass ('actif'); // Et encore une fois pour la bonne mesure $ ('modal'). css (…);); Bien que ce code puisse, au premier abord, sembler inoffensif (et honnêtement, dans le grand schéma des choses), nous suivons la mauvaise pratique de créer plusieurs instances de l'objet jQuery. Chaque fois que nous nous référons à $ ('. modal'), un nouvel objet jQuery est en cours de génération. Est-ce intelligent?
Pensez au DOM comme un pool: chaque fois que vous appelez
$ ('. modal'), jQuery plonge dans la piscine et chasse les pièces associées. Lorsque vous interrogez à plusieurs reprises le DOM sur le même sélecteur, vous jetez ces pièces dans l'eau, pour ensuite les retrouver et les retrouver.!
Toujours chaîner les sélecteurs si vous avez l’intention de les utiliser plus d’une fois. L'extrait de code précédent peut être modifié pour:
$ ('button.confirm'). on ('click', function () $ ('. modal') .modal () .addClass ('active') .css (…);); Sinon, utilisez "mise en cache".
$ ('button.confirm'). on ('click', function () // Faites-le SEULEMENT une fois var modal = $ ('. modal'); modal.modal (); modal.addClass ('active') ; modal.css (…);); Avec cette technique, jQuery saute dans le pool DOM une fois au lieu de trois..
Trop d'attention est accordée à la performance du sélecteur.
Même s’il n’était pas aussi omniprésent de nos jours, le Web a été bombardé d’innombrables articles sur l’optimisation des performances des sélecteurs dans jQuery. Par exemple, vaut-il mieux utiliser $ ('div p') ou $ ('div'). find ('p')?
Prêt pour la vérité? Cela n'a pas vraiment d'importance. C'est certainement une bonne idée d'avoir une compréhension de base de la façon dont le moteur Sizzle de jQuery analyse vos requêtes de sélecteur de droite à gauche (ce qui signifie qu'il vaut mieux être plus précis à la fin de votre sélecteur plutôt qu'au début). Et, bien sûr, plus vous serez précis, mieux ce sera. Clairement, $ ('a.button') est meilleur pour la performance que $ ('. bouton'), jQuery étant capable de limiter la recherche aux seuls éléments d'ancrage de la page, plutôt qu'à tous les éléments.
Au-delà de cela, cependant, une trop grande attention est accordée aux performances du sélecteur. En cas de doute, faites confiance au fait que l'équipe de jQuery est composée des meilleurs développeurs JavaScript du secteur. S'il y a un gain de performance à atteindre dans la bibliothèque, ils l'auront découvert. Et si ce n'est pas eux, l'un des membres de la communauté soumettra une demande de tirage.
En gardant cela à l'esprit, soyez conscient de vos sélecteurs, mais ne vous préoccupez pas trop des conséquences sur les performances, à moins que vous ne sachiez pourquoi cela est nécessaire..
jQuery a encouragé l'utilisation généralisée des fonctions de rappel, ce qui peut certainement être très pratique. Plutôt que de déclarer une fonction, utilisez simplement une fonction de rappel. Par exemple:
$ ('a.external'). on ('click', function () // cette fonction de rappel est déclenchée // lorsque l'utilisateur clique sur .external); Vous avez certainement écrit beaucoup de code qui ressemble à ceci; Je sais que j'ai! Lorsqu'elles sont utilisées avec parcimonie, les fonctions de rappel anonymes sont utiles. Le frottement se produit en bas de la ligne, quand nous entrons… rappelez l'enfer (déclenchez le coup de foudre)!
L'enfer de rappel est lorsque votre code s'indente de nombreuses fois, alors que vous continuez d'imbriquer des fonctions de rappel.
Considérez le code suivant assez commun ci-dessous:
$ ('a.data'). on ('click', function () var ancre = $ (this); $ (this) .fadeOut (400, function () $ .ajax (//… succès: function (data) anchor.fadeIn (400, function () // vous venez d'entrer dans le callback hell););); En règle générale, plus votre code est mis en retrait, plus il y a de chances qu'il y ait une odeur de code. Ou, mieux encore, demandez-vous si mon code ressemble au Mighty Ducks Flying V?
Lorsque vous refactoring un code tel que celui-ci, l'essentiel est de vous demander: "Comment cela pourrait-il être testé?" Dans ce morceau de code apparemment simple, un écouteur d'événement est lié à un lien, l'élément s'estompe, un appel AJAX est exécuté. En cas de succès, l'élément réapparaît, sans doute, les données résultantes seront ajoutées quelque part. C’est beaucoup à tester!
Ne serait-il pas préférable de scinder ce code en éléments plus faciles à gérer et à tester? Certainement. Bien que les éléments suivants puissent être optimisés davantage, une première étape pour améliorer ce code pourrait être:
var updatePage = function (el, data) // ajoute les données extraites au DOM; var fetch = fonction (ajaxOptions) ajaxOptions = ajaxOptions || // url:… // dataType:… success: updatePage; retourne $ .ajax (ajaxOptions); ; $ ('a.data'). on ('click', function () $ (this) .fadeOut (400, extraction);); Mieux encore, si vous avez diverses actions à déclencher, utilisez les méthodes appropriées dans un objet..
Pensez à la façon dont, dans un fast-food, tel que McDonalds, chaque travailleur est responsable d'une tâche. Joe fait les frites, Karen enregistre les clients et Mike fait griller les hamburgers. Si les trois membres du personnel faisaient tout, cela poserait divers problèmes de maintenabilité. Lorsque des changements doivent être mis en œuvre, nous devons rencontrer chaque personne pour en discuter. Cependant, si, par exemple, nous concentrons exclusivement Joe sur les frites, si nous devons ajuster les instructions de préparation des frites, nous ne devons parler qu’à Joe et à personne. Vous devriez adopter une approche similaire à votre code. chaque fonction est responsable d'une tâche.
Dans le code ci-dessus, le aller chercher function déclenche simplement un appel AJAX vers l'URL spécifiée. le updatePage function accepte certaines données et les ajoute au DOM. Maintenant, si nous voulons tester l’une de ces fonctions pour nous assurer qu’elle fonctionne comme prévu, par exemple, la updatePage méthode, nous pouvons nous moquer de l’objet de données et l’envoyer à la fonction. Facile!
Il est important de rappeler que l'écosystème jQuery a considérablement mûri au cours des dernières années. Il y a de fortes chances que si vous avez besoin d'un composant particulier, quelqu'un d'autre l'a déjà construit. Bien sûr, continuez à créer des plugins pour améliorer votre compréhension de la bibliothèque jQuery (en fait, nous en écrirons un dans cet article), mais pour une utilisation dans le monde réel, reportez-vous aux éventuels plugins existants avant de réinventer la roue..
Par exemple, avez-vous besoin d'un sélecteur de date pour un formulaire? Epargnez vous-même et tirez parti de la bibliothèque jQuery UI pilotée par la communauté et hautement testée.
Une fois que vous avez référencé la bibliothèque d'interface utilisateur jQuery nécessaire et la feuille de style associée, vous pouvez ajouter un sélecteur de date à une entrée en toute simplicité:
Ou, qu'en est-il d'un accordéon? Bien sûr, vous pouvez écrire cette fonctionnalité vous-même ou, encore une fois, tirer parti de l'interface utilisateur de jQuery..
Créez simplement le balisage nécessaire à votre projet.
Chapitre 1
Du texte.
Chapitre 2
Du texte.
chapitre 3
Du texte.
Section 4
Du texte.
ensuite, automagiquement transformez-le en accordéon.
$ (function () $ ("# accordion"). accordion ();); 
Et si vous pouviez créer des onglets en trente secondes?
Créez le balisage:
- À propos de nous
- Notre mission
- Entrer en contact
À propos de nous text.
Notre texte de mission.
Entrer en contact texte.
Et activer le plugin.
$ (function () $ ("# tabs"). tabs ();); Terminé! Il ne nécessite même pas de compréhension notable de JavaScript.
Voyons maintenant quelques bonnes pratiques pour la construction de plug-ins jQuery, ce que vous devrez faire à un moment donné de votre carrière de développement..
Nous allons utiliser un relativement simple Messagerie plugin comme démo pour notre apprentissage. N'hésitez pas à travailler avec vous; en fait, s'il vous plaît faites!
La tâche: implémenter les fonctionnalités nécessaires pour afficher les boîtes de dialogue, en utilisant la syntaxe, $ .message ('DITES À L'UTILISATEUR'). Ainsi, par exemple, avant de supprimer définitivement un enregistrement, nous pouvons demander à l’utilisateur de confirmer l’action au lieu de recourir à des méthodes inflexibles et laides. alerte des boites.
La première étape consiste à comprendre comment "activer" $ .message. Plutôt que d'étendre le prototype de jQuery, pour les besoins de ce plugin, il suffit d'attacher une méthode à l'espace de noms jQuery.
(function ($) $ .message = function (text) console.log (text);;) (jQuery);
C'est aussi simple que ça; allez-y, essayez-le! Quand vous appelez $ .message ('Voici mon message'), cette chaîne doit être connectée à la console du navigateur (Maj + Commande + i, dans Google Chrome).
Bien qu'il n'y ait pas assez de place pour couvrir le processus de test du plugin, il s'agit d'une étape importante sur laquelle vous devriez effectuer des recherches. Il se produit un sentiment d’assurance incroyable lors de la refactorisation du code testé.
Par exemple, lors de l'utilisation de la suite de tests de jQuery, QUnit, nous pourrions tester le code de l'étape 1 en écrivant:
module ('jQuery.message', test ('est disponible dans l'espace de noms jQuery', 1, function () ok ($. message, 'la méthode du message doit exister'););); le D'accord fonction, disponible via QUnit, affirme simplement que le premier argument est une valeur de vérité. Si la message La méthode n'existe pas dans l'espace de noms jQuery, puis faux sera retourné, auquel cas le test échoue.
Suivant le modèle de développement piloté par les tests, ce code serait la première étape. Une fois que vous avez constaté l’échec du test, la prochaine étape consiste à ajouter le message méthode, en conséquence.
Bien que, par souci de brièveté, cet article n'approfondisse pas le processus de développement JavaScript piloté par les tests, nous vous invitons à consulter le référentiel GitHub de ce projet pour consulter tous les tests du plugin: https: // github .com / JeffreyWay / MessageBox / blob / master / test / MessageBox_test.js
UNE message méthode qui ne fait rien n'est d'aucun secours à personne! Prenons le message fourni et affichons-le à l'utilisateur. Cependant, plutôt que d’intégrer un énorme globe de code dans le $ .message méthode, nous utiliserons simplement la fonction pour instancier et initialiser un Message objet.
(function ($) "use strict"; var Message = initialize: function (text) this.text = text; return this;; $ .message = function (text) // Nécessite polyfill pour IE8- - return Object.create (Message) .initialize (text);;) (jQuery);
Non seulement cette approche, encore une fois, rend la Message objet plus testable, mais c'est aussi une technique plus propre, qui, entre autres choses, protège à nouveau call-back enfer. Pensez à ceci Message objet en tant que représentation d'une boîte de message unique.
Si Message représente une boîte de message unique, quel sera le code HTML pour un? Créons un div avec une classe de messagerie, et le rendre disponible au Message exemple, via un el propriété.
var Message = initialize: function (text) this.el = $ ('', ' class ':' message-box ',' style ':' display: none '); this.text = text; retournez ceci; ; Maintenant, l'objet a une référence immédiate au wrapping div pour la boîte de message. Pour y accéder, nous pourrions faire:
var msg = Object.create (Message) .initialize (); // [â € ‹console.log (msg.el);
N'oubliez pas que nous avons maintenant un fragment HTML, mais qu'il n'a pas encore été inséré dans le DOM. Cela signifie que nous n’avons pas à nous soucier des retours inutiles lors de l’ajout de contenu à la div.
Étape 5
L'étape suivante consiste à prendre la chaîne de message fournie et à l'insérer dans le div. C'est facile!
initialize: function (text) //… this.el.html (this.text); // [â]
Cependant, il est peu probable que nous voulions insérer le texte directement dans le div. De façon plus réaliste, la boîte de message aura un modèle. Bien que nous puissions laisser l’utilisateur du plugin créer un modèle et le référencer, gardons les choses simples et limitons le modèle à la Message objet.
var Message = template: fonction (texte, boutons) return [''+ texte +'
','', boutons, ''] .join ("); //…;
Dans les situations où vous n'avez pas d'autre choix que d'imbriquer du HTML dans votre JavaScript, une approche courante consiste à stocker les fragments HTML en tant qu'éléments dans un tableau, puis à les joindre en une seule chaîne HTML..
Dans l'extrait ci-dessus, le texte du message est maintenant inséré dans un paragraphe avec une classe de message-box-text. Nous avons également défini une place pour les boutons, que nous allons mettre en œuvre sous peu.
Maintenant le initialiser Cette méthode peut être mise à jour pour:
initialize: function (text) //… this.el.html (this.template (text, buttons));
Lorsque déclenché, nous construisons la structure pour la boîte de message:
Voici un message important.
Étape 6
Pour que la boîte de message soit aussi flexible que possible, l'utilisateur du plug-in doit avoir la possibilité de spécifier, entre autres choses, quels boutons doivent être présentés à l'utilisateur - tels que "OK", "Annuler", "Oui". , "etc. Nous devrions pouvoir ajouter le code suivant:
$ .message ('Êtes-vous sûr?', buttons: ['Oui', 'Annuler']); … Et générer une boîte de message avec deux boutons.
Pour implémenter cette fonctionnalité, commencez par mettre à jour le $ .message définition.
$ .message = function (text, settings) var msg = Object.create (Message); msg.initialize (texte, paramètres); return msg; ;
Maintenant le réglages objet sera transmis à la initialiser méthode. Mettons à jour.
initialize: fonction (texte, paramètres) this.el = $ ('', ' class ':' message-box ',' style ':' display: none '); this.text = text; this.settings = paramètres this.el.html (this.template (texte, boutons)); Pas mal, mais que se passe-t-il si l'utilisateur du plug-in ne spécifie aucun paramètre? Pensez toujours aux différentes manières d’utiliser votre plugin..
Étape 7
Nous supposons que l'utilisateur du plugin décrira les boutons à présenter, mais pour des raisons de sécurité, il est important de fournir un ensemble de valeurs par défaut, ce qui est une pratique recommandée lors de la création de plugins..
$ .message = function (text, settings) var msg = Object.create (Message); msg.initialize (texte, paramètres); return msg; ; $ .message.defaults = icon: 'info', boutons: ['okay'], rappel: null;
Avec cette approche, si l’utilisateur du plug-in a besoin de modifier les valeurs par défaut, il a seulement besoin de mettre à jour $ .message.defaults, comme requis. Rappelez-vous: ne masquez jamais les valeurs par défaut de l'utilisateur. Rendez-les disponibles pour "l'extérieur".
Ici, nous avons défini quelques paramètres par défaut: l’icône, des boutons et une fonction de rappel, qui devrait être déclenchée une fois que l’utilisateur a cliqué sur l’un des boutons de la boîte de message..
jQuery offre un moyen utile de remplacer les options par défaut d’un plugin (ou de tout objet, vraiment), via son étendre méthode.
initialize: function (texte, boutons) //… this.settings = $ .extend (, $ .message.defaults, settings);
Avec cette modification, this.settings sera maintenant égal à un nouvel objet. Si l'utilisateur du plugin spécifie des paramètres, il remplacera le plugin. défauts objet.
Étape 8
Si nous avons l'intention d'ajouter une icône personnalisée à la boîte de message, en fonction de l'action, il sera nécessaire d'ajouter une classe CSS à l'élément et de permettre à l'utilisateur d'appliquer une image d'arrière-plan en conséquence..
Dans le initialiser méthode, ajouter:
this.el.addClass ('message-box-' + this.settings.icon); Si aucune icône n'est spécifiée dans le réglages objet, la valeur par défaut, Info, est utilisé: .message-box-info. Maintenant, nous pouvons offrir une variété de classes CSS (au-delà de la portée de ce tutoriel), contenant différentes icônes pour la boîte de message. Voici quelques exemples pour vous aider à démarrer.
.message-box-info background: url (chemin / vers / info / icon.png) no-repeat; .message-box-warning background: url (chemin / à / warning / icon.png) no-repeat;
Idéalement, dans le cadre de votre plug-in MessageBox, vous souhaitez inclure une feuille de style externe contenant le style de base pour la boîte de message, ces classes et une poignée d'icônes..
Étape 9
Le plugin accepte maintenant un tableau de boutons à appliquer au modèle, mais nous n'avons pas encore écrit la fonctionnalité pour rendre cette information utilisable. La première étape consiste à prendre un tableau de valeurs de boutons et à le traduire en entrées HTML nécessaires. Créer une nouvelle méthode sur le Message objet pour gérer cette tâche.
createButtons: fonction (boutons)
jQuery.map est une méthode utile qui applique une fonction à chaque élément d'un tableau et retourne un nouveau tableau avec les modifications appliquées. C'est parfait pour nos besoins. Pour chaque élément du tableau de boutons, tel que ['Oui Non'], nous voulons remplacer le texte par une entrée HTML, avec la valeur définie, en conséquence.
createButtons: fonction (boutons) return $ .map (boutons, fonction (bouton) return ''; ). join ("); Ensuite, mettez à jour le initialiser méthode pour appeler cette nouvelle méthode.
initialize: fonction (texte, paramètres) this.el = $ ('', ' class ':' message-box ',' style ':' display: none '); this.text = text; this.settings = $ .extend (, $ .message.defaults, settings); var buttons = this.createButtons (this.settings.buttons); this.el.html (this.template (texte, boutons)); retournez ceci;
Étape 10
À quoi sert un bouton, si rien ne se passe lorsque l'utilisateur clique dessus? Un bon endroit pour stocker tous les auditeurs d’événement pour une vue est dans une spéciale événements méthode sur l'objet associé, comme ceci:
initialize: function () //… this.el.html (this.template (texte, boutons)); this.events (); , events: function () var self = this; this.el.find ('input'). on ('click', function () self.close (); if (typeof self.settings.callback === 'function') self.settings.callback.call (self, $ (this) .val ());); Ce code est légèrement plus complexe, car l'utilisateur du plug-in doit avoir la possibilité de déclencher sa propre fonction de rappel lorsqu'un clic est effectué sur un bouton de la boîte de message. Le code détermine simplement si un rappeler La fonction a été enregistrée et, si tel est le cas, la déclenche et envoie via la valeur du bouton sélectionné. Imaginez qu'une boîte de message propose deux boutons: "Accepter" et "Annuler". L'utilisateur du plug-in doit avoir un moyen de capturer la valeur du bouton cliqué et de réagir en conséquence..
Avis où nous appelons auto.close ()? Cette méthode, qui n'a pas encore été créée, est responsable d'une chose: fermer et supprimer la boîte de message du DOM.
fermer: function () this.el.animate (top: 0, opacité: 'cacher', 150, function () $ (this) .remove (););
Pour ajouter un peu de flair, en cachant la boîte de message, en 150 millisecondes, nous la fondons en fondu, puis nous la faisons passer à la hausse..
Étape 11
La fonctionnalité a été implémentée! La dernière étape consiste à présenter la boîte de message à l'utilisateur. Nous allons ajouter un dernier spectacle méthode sur le Message objet, qui va insérer la boîte de message dans le DOM et le positionner.
show: function () this.el.appendTo ('body'). animate (top: $ (window) .height () / 2 - this.el.outerHeight () / 2, opacité: 'montrer', 300); Un simple calcul suffit pour positionner la boîte verticalement au centre de la fenêtre du navigateur. Avec cela en place, le plugin est terminé!
$ .message = function (texte, paramètres) var msg = Object.create (Message) .initialize (texte, paramètres); msg.show (); return msg; ;
Étape 12
Pour utiliser votre nouveau plugin, appelez simplement $ .message (), et passez un message et tous les paramètres applicables, comme ceci:
$ .message ('La ligne a été mise à jour.'); 
Ou, pour demander la confirmation d'une action destructive:
$ .message ('Voulez-vous vraiment supprimer cet enregistrement?', boutons: ['Oui', 'Annuler'], icône: 'alerte', rappel: fonction (buttonTexte) if (buttonText === 'Oui ') // procéder et supprimer l'enregistrement); 
Pensées finales
Pour en savoir plus sur le développement de jQuery, nous vous invitons à consulter mon cours sur ce site, "30 jours pour apprendre jQuery".
Au cours de la construction de cet échantillon Messagerie plugin, diverses pratiques recommandées ont été mises en place, telles que l’évitement des rappels, l’écriture de code testable, la mise à disposition des options par défaut pour l’utilisateur du plugin et la garantie que chaque méthode est responsable d’une tâche unique..
Bien que l’on puisse certainement obtenir le même effet en intégrant d’innombrables fonctions de rappel dans $ .message, le faire est rarement une bonne idée et est même considéré comme un anti-modèle.
N'oubliez pas les trois clés du code maintenable et des plug-ins et scripts jQuery flexibles:
- Puis-je tester cela? Si non, refactoriser et diviser le code en morceaux.
- Ai-je offert la possibilité de remplacer mes paramètres par défaut?
- Suis-je en train de suivre de mauvaises pratiques ou de faire des suppositions?
Pour en savoir plus sur le développement de jQuery, nous vous invitons à consulter mon cours de screencast sur ce site, "30 jours pour apprendre jQuery".
