Comment utiliser jquery efficacement

En tant que programmeur, vous utiliserez certainement jQuery et javascript. Donc, si nous voulons développer un bon programme, comment pouvons-nous utiliser jQuery et javascript plus efficacement pour améliorer votre code jQuery et javascript ? Un bon code apportera des améliorations de vitesse, et un rendu et une réponse rapides signifieront une meilleure expérience utilisateur. Le contenu de cette section est donc de vous apporter une utilisation efficace de jQuery et javascript.

Tout d’abord, gardez à l’esprit que jQuery est du javascript. Cela signifie que nous devons adopter les mêmes conventions de codage, guides de style et meilleures pratiques.

Tout d'abord, si vous êtes un novice en javascript, je vous recommande de lire "24 meilleures pratiques JavaScript pour les débutants". Il s'agit d'un tutoriel javascript de haute qualité. Il est préférable de le lire avant de vous lancer dans jQuery.

Lorsque vous êtes prêt à utiliser jQuery, je vous recommande fortement de suivre ces directives :

1. Cacher les variables

La traversée du DOM coûte cher, alors essayez de réutiliser les éléments comme autant de cache que possible.

//糟糕h=$('#element').height();$('#element').css('height',h-20);
//建议$element=$('#element');h=$element.height();$element.css('height',h-20);

2. Évitez les variables globales

jQuery Comme javascript, en général, il est préférable de s'assurer que vos variables sont dans la portée de la fonction.

//糟糕$element=$('#element');h=$element.height();$element.css('height',h-20);
//建议var $element=$('#element');var h=$element.height();$element.css('height',h-20);

3. Utilisez la nomenclature hongroise

pour préfixer la variable avec $ afin d'identifier facilement l'objet jQuery.

//糟糕
var first=$('#first');
var second=$('#second');
var value=$first.val();

// 建议 - 在 jQuery 对象前加 $ 前缀    
var $first=$('#first');
var $second=$('#second'),
var value=$first.val();

4. Utilisez la chaîne var (mode var unique)

Combinez plusieurs instructions var en une seule instruction. Je recommande de mettre les variables non attribuées à la fin.

var 
  $first=$('#first'),
  $second=$('#second'),
  value=$first.val(),
  k=3,
  cookiestring='SOMECOOKIESPLEASE',
  i,
  j,
  myArray={};

5. Veuillez utiliser 'on'

Dans la nouvelle version de jQuery, le plus court on("click") est utilisé pour remplacer des fonctions comme click(). Dans les versions précédentes, on() était bind(). Depuis jQuery 1.7, on() est la méthode préférée pour attacher des gestionnaires d'événements. Cependant, par souci de cohérence, vous pouvez simplement utiliser la méthode on() ensemble.

//糟糕$first.click(function(){    $first.css('border','1px solid red');    $first.css('color','blue');});
$first.hover(function(){    $first.css('border','1px solid red');})
// 建议$first.on('click',function(){    $first.css('border','1px solid red');    $first.css('color','blue');})
$first.on('hover',function(){    $first.css('border','1px solid red');})

6. Simplifiez le javascript

De manière générale, il est préférable de combiner les fonctions autant que possible.

//糟糕$first.click(function(){    $first.css('border','1px solid red');    $first.css('color','blue');});
//建议$first.on('click',function(){    $first.css({        'border':'1px solid red',        'color':'blue'    });});

7. Opérations chaînées

Il est très facile pour jQuery d'implémenter des opérations chaînées de méthodes. Profitez-en ci-dessous.

//糟糕$second.html(value);$second.on('click',function()
{    alert('hello everybody');});$second.fadeIn('slow');$second.animate({height:'120px'},500);
//建议$second.html(value);$second.on('click',function()
{    alert('hello everybody');}).fadeIn('slow').animate({height:'120px'},500);

8. Maintenir la lisibilité du code

En plus de rationaliser le code et d'utiliser le chaînage, cela peut rendre le code difficile à lire. L’ajout de pincements et de sauts de ligne peut faire des merveilles.

//糟糕$second.html(value);$second.on('click',function()
{    alert('hello everybody');}).fadeIn('slow').animate({height:'120px'},500);
//建议$second.html(value);$second    .on('click',function(){ alert('hello everybody');})    .fadeIn('slow')    .animate({height:'120px'},500);

9. Sélectionnez l'évaluation du court-circuit

L'évaluation du court-circuit est une expression qui est évaluée de gauche à droite, en utilisant && (ET logique) ou | Opérateur (OU logique).

//糟糕function initVar($myVar) {    if(!$myVar) {        $myVar=$('#selector');    }}
//建议function initVar($myVar) {    $myVar=$myVar || $('#selector');}

10. Choisissez des raccourcis

Une façon de rationaliser votre code est de profiter des raccourcis de codage.

//糟糕if(collection.length > 0){..}
//建议if(collection.length){..}

11. Séparez les éléments lors d'opérations lourdes

Si vous prévoyez d'effectuer de nombreuses opérations sur les éléments DOM (définir plusieurs attributs ou styles CSS successivement), il est recommandé de séparer les éléments d'abord, puis ajoutez-les.

//糟糕var     $container=$("#container"),    $containerLi=$("#container li"),    $element=null;
$element=$containerLi.first(); //... 许多复杂的操作
//建议var     $container=$("#container"),    $containerLi=$container.find("li"),    $element=null;
$element=$containerLi.first().detach(); //... 许多复杂的操作
$container.append($element);

12. Conseils de mémorisation

Vous manquez peut-être d'expérience dans l'utilisation des méthodes dans jQuery. Assurez-vous de consulter la documentation. Il existe peut-être un moyen meilleur ou plus rapide de l'utiliser.

//糟糕$('#id').data(key,value);
// 建议 (高效)  $.data('#id',key,value);

13. Mettre en cache les éléments parents à l'aide de sous-requêtes

Comme mentionné précédemment, la traversée du DOM est une opération coûteuse. Une approche typique consiste à mettre en cache les éléments parents et à réutiliser ces éléments mis en cache lors de la sélection des éléments enfants.

//糟糕var     $container=$('#container'),    $containerLi=$('#container li'),    $containerLiSpan=$('#container li span');
// 建议 (高效)  var     $container=$('#container '),    $containerLi=$container.find('li'),    $containerLiSpan= $containerLi.find('span');

14. Évitez les sélecteurs universels

Mettre des sélecteurs universels dans des sélecteurs descendants a de très mauvaises performances.

//糟糕$('.container > *');
//建议$('.container').children();

15. Évitez les sélecteurs universels implicites

Les sélecteurs universels sont parfois implicites et difficiles à trouver.

//糟糕$('.someclass :radio');
//建议$('.someclass input:radio');

16. Optimiser les sélecteurs

Par exemple, le sélecteur d'identifiant doit être unique, il n'est donc pas nécessaire d'ajouter des sélecteurs supplémentaires.

//糟糕$('div#myid'); $('div#footer a.myLink');
// 建议$('#myid');$('#footer .myLink');

17. Évitez les sélecteurs d'ID multiples

Il est souligné ici que le sélecteur d'ID doit être unique, il n'est pas nécessaire d'ajouter des sélecteurs supplémentaires et il n'est pas nécessaire d'avoir plusieurs descendants. Sélecteur d'identifiants.

//糟糕$('#outer #inner');
//建议$('#inner');

18. Tenez-vous en à la dernière version

Les versions plus récentes sont généralement meilleures : plus légères, plus efficaces. Évidemment, vous devez considérer la compatibilité du code que vous souhaitez prendre en charge. Par exemple, la version 2.0 ne prend pas en charge Internet Explorer 6/7/8.

19. Abandonner les méthodes obsolètes

Il est très important de faire attention aux méthodes obsolètes à chaque nouvelle version et d'essayer d'éviter d'utiliser ces méthodes.

//糟糕- live 已经废弃   $('#stuff').live('click',function() {  console.log('hooray');});
// 建议$('#stuff').on('click',function() {  console.log('hooray');});
// 注：此处可能不当，应为live能实现实时绑定，delegate或许更合适

20. Utiliser CDN

Le CND de Google peut garantir que le cache le plus proche de l'utilisateur est sélectionné et répond rapidement. (Veuillez rechercher l'adresse vous-même lorsque vous utilisez Google CND. L'adresse ici ne peut pas être utilisée. Nous recommandons le CDN fourni par le site officiel de jquery).

21. Combinez jQuery et le code natif javascript si nécessaire

Comme mentionné ci-dessus, jQuery est javascript, ce qui signifie que tout ce que vous pouvez faire avec jQuery peut également être fait avec du code natif. Le code natif (ou vanilla) peut ne pas être aussi lisible et maintenable que jQuery, et le code est plus long. Mais cela signifie aussi plus efficace (généralement, plus le code sous-jacent est proche, moins il est lisible, plus les performances sont élevées, par exemple : l'assemblage, bien sûr, cela nécessite des personnes plus puissantes). Gardez à l'esprit qu'aucun framework ne peut être plus petit, plus léger et plus efficace que le code natif (remarque : le lien de test n'est plus valide, vous pouvez rechercher le code de test en ligne).

Compte tenu des différences de performances entre vanilla et jQuery, je recommande fortement de tirer le meilleur parti des deux et d'utiliser (si possible) du code natif équivalent à jQuery.

Le but de cet article est d'améliorer les performances de jQuery et quelques autres bonnes suggestions. Si vous souhaitez approfondir ce sujet, vous y trouverez beaucoup de plaisir. N'oubliez pas que jQuery n'est pas obligatoire, juste une option. Réfléchissez à la raison pour laquelle vous souhaitez l'utiliser. Manipulation du DOM ? ajax ? pochoir? des animations CSS ? Ou un moteur sélecteur ? Peut-être qu'un microframework javascript ou une version personnalisée de jQuery serait un meilleur choix.

Ce qui précède explique comment utiliser efficacement jQuery et javascript. Après avoir lu cet article, j'espère qu'il sera utile au développement de chacun.

Recommandations associées :

Quelle est la différence entre JS et JQUERY

Méthodes liées à $, jQuery dans le code source jq

Exemple de code de validation de formulaire JQuery

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!