Explication détaillée des meilleures pratiques pour la programmation avancée dans jquery_jquery

Chargement de jQuery

1. Insistez pour utiliser CDN pour charger jQuery Pourquoi ne pas profiter des serveurs d'autres personnes pour héberger vos fichiers gratuitement ? Cliquez pour voir les avantages de l'utilisation du CDN, et cliquez ici pour voir quelques adresses CDN jQuery grand public.

Copier le code Le code est le suivant :

<script>window.jQuery || document.write ('&lt ;script src="js/jquery-1.11.0.min.js" type="text/javascript"></script>')

2. Pour des raisons de sécurité, il est préférable de fournir une sauvegarde locale afin que le site Web puisse fonctionner même lorsque jQuery ne peut pas être obtenu à partir du serveur CDN distant, comme indiqué dans le code ci-dessus. Voir les détails ici.

3. Utilisez l'URL du protocole nue (c'est-à-dire supprimez http: ou https :), comme indiqué dans le code ci-dessus.

4. Si possible, essayez de mettre votre code JavaScript et jQuery en bas de page. Cliquez ici pour plus de détails ou affichez un modèle de page HTML5 standard.

5. Quelle version dois-je utiliser ?

Si vous souhaitez être compatible avec IE678, veuillez utiliser la version 2.x
Pour les quelques chanceux qui n'ont pas besoin de considérer la compatibilité, il est fortement recommandé d'utiliser la dernière version de jQuery
Lors du chargement jQuery depuis un serveur CDN, il est préférable d'écrire la version complète (comme 1.11.0 au lieu de 1.11 ou d'écrire 1 directement)
Ne la chargez jamais à plusieurs reprises
6. Si vous utilisez également d'autres frameworks JS tels que Prototype, MooTools, Zepto Yunyun, car ils Le signe $ est également utilisé, vous n'utilisez donc plus le signe dollar pour l'encodage jQuery et utilisez plutôt « jQuery ». Et appeler $.noConflict() garantit qu'aucun conflit ne se produira.

7. Pour vérifier si le navigateur prend en charge certaines nouvelles fonctionnalités, veuillez utiliser Modernizr. Publicité interstitielle : sur la question de la non-détection des navigateurs

À propos des variables

1. Il est préférable d'ajouter un préfixe $ aux variables de type jQuery.

2. Stockez toujours le contenu renvoyé par le sélecteur jQuery dans une variable pour réutilisation

Copiez le code Le code est tel que suit :

var $products = $("div.products"); // Lent
var $products = $(".products"); >

3. Utilisez la dénomination des cas de chameaux

À propos des sélecteurs

1. Essayez d'utiliser le sélecteur d'ID. Le mécanisme derrière cela consiste en fait à appeler le document.getElementById() natif, il est donc plus rapide que les autres sélecteurs.

2. Spécifiez le type d'élément lors de l'utilisation d'un sélecteur de classe. Si vous ne me croyez pas, regardez cette comparaison de performances

Copiez le code Le code est le suivant :

var $products = $( "div.products"); // Lent

var $products = $(".products"); // Rapide

3. Pour rechercher des éléments enfants sous le conteneur ID parent, veuillez utiliser la méthode .find(). La raison pour laquelle cela est rapide est que la sélection d'éléments par identifiant n'utilise pas le moteur Sizzle. Voir ici pour plus de détails

4. Dans la recherche à plusieurs niveaux, le côté droit doit être aussi détaillé que possible et le côté gauche doit être aussi simple que possible. En savoir plus

Copier le code Le code est le suivant :

// Moche

$ (" div.data .gonzalez");
// Après optimisation
$(".data td.gonzalez");

5. Évitez la redondance. Détails ou afficher la comparaison des performances

Copier le code Le code est le suivant :

$(". table de données. participants td.gonzalez");

// Bonne façon : supprimez la redondance au milieu
$(".data td.gonzalez");

6. Précisez le contexte de la sélection.

Copier le code Le code est le suivant :

// Mauvais code : parce qu'il doit parcourez l'intégralité du DOM pour trouver .class

$('.class');
// Code Gaopin : Parce que vous n'avez besoin de rechercher que dans la plage de conteneurs spécifiée
$('.class', '# classe-conteneur') ;

7. Le tableau utilise un sélecteur universel. Voir l'explication détaillée

Copiez le code Le code est le suivant :

$('div .container > * '); // Différence

$('div.container').children(); // Bâton

8. Méfiez-vous des sélecteurs universels implicites. S'il est omis, le caractère générique * est effectivement utilisé. Plus d'informations

Copier le code Le code est le suivant :

$('div.someclass : radio' ); // Mauvais
$('div.someclass input:radio'); // Génial

9.ID représente déjà l'unicité, et document.getElementById() est utilisé derrière, donc le tableau est mélangé avec d'autres sélecteurs.

Copier le code Le code est le suivant :

$('#outer #inner') ; // Sale
$('div#inner'); // Désordonné
$('.outer-container #inner'); // Mauvais
$('#inner'); Propre et bien rangé, en arrière-plan, appelez simplement document.getElementById()

Opération DOM liée

1. Désinstallez tout élément du document avant de l'utiliser, puis collez-le à nouveau. Cette affaire peut être plus détaillée

Copier le code Le code est le suivant :

var $myList = $ ("#list-container > ul").detach();
//...Beaucoup de traitement de $myList
$myList.appendTo("#list-container");
2. Organisez le HTML dans le code puis collez-le immédiatement dans le DOM. Plus précisément, comparaison des performances

// Ce n'est pas bon
var $myList = $("#list");
for(var i = 0; i < 10000; i ){
$myList.append( "

" i "

");
}

// C'est bien
var $myList = $("#list");
var liste = "";
pour(var i = 0; i < 10000; i ){
list = "

" i "

";
}
$ myList .html(list);

// Mais c'est mieux
var array = []
for(var i = 0; i < 10000; i ){
array [ je] = "

" je "

";
}
$myList.html(array.join(''));

3. Ne vous occupez pas d’éléments inexistants. Détails

Copier le code Le code est le suivant :

// Pratique sans scrupules : l'arrière-plan jQuery est en cours d'exécution Après avoir terminé trois fonctions, vous saurez que cet élément n'existe en réalité pas du tout
$("#nosuchthing").slideUp();
// Cela devrait être comme ça
var $mySelection = $("#nosuchthing") ;
if ($mySelection.length) {
$mySelection.slideUp();
}

Lié à l'événement

1. N'écrivez qu'un seul gestionnaire pour l'événement document prêt sur une page. De cette façon, le code est clair et facile à déboguer, et il est facile de suivre la progression du code.

2. La table utilise des fonctions anonymes comme rappels d'événements. Les fonctions anonymes sont difficiles à déboguer, maintenir, tester et réutiliser. Peut-être que vous voulez être plus sérieux, jetez un oeil ici

Copiez le code Le code est le suivant :

$(" #myLink").on("click", function(){...}); // J'aime ça
// J'aime ça
function myLinkClickHandler(){... }
$("# monLien").on("clic", monLinkClickHandler);

3. Le rappel pour le traitement de l'événement document ready utilise également des fonctions anonymes. Les fonctions anonymes sont difficiles à déboguer, maintenir, tester et réutiliser : (

Copier le code<.> Le code est le suivant :

$(function(){ ... }); // Mauvaise pratique : Cette fonction ne peut pas être utilisée et les cas de test ne peuvent pas être écrit pour cela

// Bonne pratique
$(initPage); // Ou $(document).ready(initPage);
function initPage(){
// Ici vous pouvez initialiser le programme
}

4. De plus, il est préférable

de placer également le gestionnaire d'événements ready dans un fichier externe et de l'introduire dans la page, et le code intégré dans la page n'a besoin que d'être appelé.

Copier le code Le code est le suivant :

<script><br> // Initialise certaines variables globales nécessaires<br> $(document).ready(initPage); // Ou $(initPage); <br></script>

5. Il existe des dizaines de millions de codes JS écrits en ligne en HTML, ce qui est un cauchemar de débogage ! Vous devez toujours utiliser jQuery pour lier l'événement lui-même, afin de pouvoir le dissocier dynamiquement à tout moment.

Copier le code Le code est le suivant :

mon lien !--Pas bon-->
$ ("#myLink").on("click", myEventHandler); // BON

6. Si possible, essayez d'utiliser un espace de noms lors de la liaison des gestionnaires d'événements, afin de pouvoir facilement dissocier sans affecter les autres liaisons.

Copier le code Le code est le suivant :

$("#myLink").on ("click .mySpecialClick", myEventHandler); // Pas mal
// Après cela, délions gracieusement
$("#myLink").unbind("click.mySpecialClick");

Fonctionnement asynchrone

1. Utilisez $.ajax() directement au lieu de .getJson() ou .get(), car jQuery le convertit toujours en interne

2. Utilisez HTTP pour lancer des requêtes pour les sites HTTPS. Il est préférable de simplement le spécifier (supprimez HTTP ou HTTPS de votre URL)

.

3. Le tableau intègre des paramètres dans le lien, veuillez utiliser des paramètres de paramètres spéciaux pour transmettre

Copier le code Le code est tel que suit :

// Code difficile à lire...
$.ajax({
url : "something.php?param1=test1¶m2=test2",
....
});

// Plus facile à lire...
$.ajax({
url: "something.php",
data: { param1 : test1, param2 : test2 }
});

4. Essayez de spécifier le type de données afin de savoir quel type de données vous souhaitez traiter (voir le modèle Ajax mentionné ci-dessous)

5. Pour le contenu chargé de manière asynchrone et dynamique, il est préférable d'utiliser un proxy pour lier les gestionnaires d'événements. L’avantage est que cela est également valable pour les événements d’éléments chargés dynamiquement ultérieurement. Vous voudrez peut-être en savoir plus

Copier le code Le code est le suivant :

$(" #parent-conteneur").on("click", "a", déléguéClickHandlerForAjax);

6. Utilisez le mode Promesse. Plus d'exemples

Copier le code Le code est le suivant :

$.ajax({ .. . } ).then(successHandler, FailureHandler);

// ou
var jqxhr = $.ajax({ ... });
jqxhr.done(successHandler);
jqxhr.failureHandler);

7. Un point pour le modèle Ajax standard. À la recherche de la cause profonde

Copier le code Le code est le suivant :

var jqxhr = $. ajax({
url : url,
type : "GET", // La valeur par défaut est GET, vous pouvez la modifier si nécessaire
cache : true, // La valeur par défaut est true, mais pour le script, le type jsonp est faux, vous pouvez le définir vous-même
data : {}, // Mettez les paramètres de la requête ici
dataType : "json", // Spécifiez le type de données souhaité
jsonp : "callback. ", // Spécifiez le rappel pour traiter la requête de type JSONP
statusCode : { // Si vous souhaitez gérer les erreurs dans chaque statut
404 : handler404,
500 : handler500
}
});
jqxhr.done(successHandler) ;
jqxhr.fail(failureHandler);

Animation et effets spéciaux

1. Maintenir une mise en œuvre d'animation cohérente et unifiée

2. Suivez de près l'expérience utilisateur et évitez d'abuser des effets spéciaux d'animation

Utilisez de simples effets d'affichage-masquage, de changement d'état, d'entrée et de sortie pour afficher les éléments
Utilisez des valeurs prédéfinies pour définir la vitesse d'animation sur « rapide », « lente » ou 400 (vitesse moyenne )
Lié aux plug-ins

1. Choisissez toujours un plugin qui bénéficie d'un bon support, d'une bonne documentation, de tests approfondis et d'une communauté active

2. Faites attention à savoir si le plug-in utilisé est compatible avec la version de jQuery actuellement utilisée

3. Certaines fonctions courantes doivent être écrites sous forme de plug-ins jQuery. Modèle d'écriture de plug-in jQuery d'une minute

Syntaxe de la chaîne

1. En plus d'utiliser des variables pour enregistrer les résultats renvoyés par le sélecteur jQuery, vous pouvez également faire bon usage des appels en chaîne.

Copier le code Le code est le suivant :

$("#myDiv").addClass ("erreur").show();

2. Lorsqu'il y a plus de 3 appels en chaîne ou que le code est légèrement compliqué en raison de rappels liés, utilisez des sauts de ligne et une indentation appropriée pour améliorer la lisibilité du code.

Copier le code Le code est le suivant :

$("#myLink")
.addClass ("gras")
.on("click", myClickHandler)
.on("mouseover", myMouseOverHandler)
.show();

3. Pour les appels particulièrement longs, il est préférable d'utiliser des variables pour enregistrer les résultats intermédiaires afin de simplifier le code.

Autres

1. Utilisez des littéraux d'objet pour transmettre les paramètres

Copier le code Le code est le suivant :

$myLink.attr("href", "#").attr("title", "my link").attr("rel", "external"); // Oups : attr a été appelé trois fois
// Oui, attr
$myLink.attr({
href: "#",
title: "mon lien",
rel: "external"
});

2. Mélangez CSS et jQuery

Copiez le code Le code est le suivant :

$("#mydiv").css({'color':red, 'font-weight':'bold'}); // Mauvais
.error {/* Bon*/
couleur : rouge ;
font-weight: bold;
}
$("#mydiv").addClass("error");

3. Faites toujours attention au Changelog officiel et utilisez la méthode abandonnée.

4. Utilisez du JavaScript natif le cas échéant.

Copier le code Le code est le suivant :

$("#myId"); / Combien est encore Sera inférieur à...