La traversée du DOM coûte cher, alors essayez de mettre en cache les éléments réutilisés.
// 糟糕h = $('#element').height();
$('#element').css('height',h-20);// 建议$element = $('#element');
h = $element.height();
$element.css('height',h-20);Avec 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);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();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 = {};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 la version 1.7 de jQuery, 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');
})En général, 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'});
});Il est très simple d'implémenter des opérations chaînées de méthodes dans jQuery. 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);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);L'évaluation de court-circuit est une expression qui est évaluée de gauche à droite, en utilisant && (ET logique) ou || ( OU logique).
// 糟糕function initVar($myVar) {if(!$myVar) {
$myVar = $('#selector');
}
}// 建议function initVar($myVar) {
$myVar = $myVar || $('#selector');
}Une façon de rationaliser votre code est de profiter des raccourcis de codage.
// 糟糕if(collection.length > 0){..}// 建议if(collection.length){..}Si vous envisagez de faire beaucoup d'opérations sur des éléments DOM (définir plusieurs attributs ou styles CSS successivement), cela il est recommandé de les séparer d'abord. L'élément est ensuite ajouté.
// 糟糕var$container = $("#container"),
$containerLi = $("#container li"),
$element = null;
$element = $containerLi.first();//... 许多复杂的操作// bettervar$container = $("#container"),
$containerLi = $container.find("li"),
$element = null;
$element = $containerLi.first().detach();//... 许多复杂的操作$container.append($element);Vous manquez peut-être d'expérience dans l'utilisation des méthodes dans jQuery, assurez-vous de consulter la documentation, il peut y avoir une méthode meilleure ou plus rapide pour l'utiliser.
// 糟糕$('#id').data(key,value);// 建议 (高效)$.data('#id',key,value);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');Placer des sélecteurs universels dans des sélecteurs descendants a des performances terribles.
// 糟糕$('.container > *');// 建议$('.container').children();Les sélecteurs universels sont parfois implicites et difficiles à détecter.
// 糟糕$('.someclass :radio');// 建议$('.someclass input:radio');Par exemple, le sélecteur Id 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');J'insiste ici sur le fait que le sélecteur d'ID doit être unique et qu'il n'est pas nécessaire d'ajouter des sélecteurs supplémentaires, encore moins des descendants multiples Sélecteurs d'identification.
// 糟糕$('#outer #inner');// 建议$('#inner');Les versions plus récentes sont généralement meilleures : plus légères et 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 IE 6/7/8.
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或许更合适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).
Comme mentionné ci-dessus, jQuery est javascript, ce qui signifie que tout ce que vous pouvez faire avec jQuery peut également l'être 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 d'absorber le meilleur des deux mondes et d'utiliser (si possible) du code natif équivalent à jQuery.
Principes d'écriture de JQuery :
1. N'abusez pas de jQuery
1 Peu importe la rapidité de jQuery, il ne peut pas être comparé à la méthode javascript native et à la méthode javascript native. Les objets jQuery intégrés contiennent une énorme quantité d'informations. Par conséquent, lorsqu’il existe des méthodes natives pouvant être utilisées, essayez d’éviter d’utiliser jQuery.
2. De nombreuses méthodes jQuery ont deux versions, une pour les objets jQuery et une autre pour les fonctions jQuery. Étant donné que ce dernier ne fonctionne pas via des objets jQuery, il nécessite relativement moins de temps système et est plus rapide.
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!
Que sont les plug-ins jquery ?
Comment faire fonctionner json avec jquery
Comment supprimer des éléments dans jquery
Utilisation de la méthode jQuery hover()
jquery implémente la méthode de pagination
Qu'est-ce qu'un élément caché dans jquery
Qu'est-ce qui est mis en évidence dans jquery
Comment ouvrir le fichier PDB
![[Web front-end] Démarrage rapide de Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
