4 principes et 5 conseils pour écrire du code jQuery efficace_jquery

Principes d'écriture jQuery :

1. N'abusez pas de jQuery

1. Quelle que soit la rapidité de jQuery, il ne peut pas être comparé à la méthode javascript native et l'objet jQuery créé contient 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.

Copier le code Le code est le suivant :

$("a").click( function() {
alert($(this).attr("id"));
});
//Amélioré↓
$("a").click(function() {
alert(this.id);
});

2. De nombreuses méthodes jQuery ont deux versions, une pour les objets jQuery et l'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.

Copier le code Le code est le suivant :

var $text = $("#text ");
var $ts = $text.text();
//Amélioré↓
var $text = $("#text");
var $ts = $.text( $text );

La fonction intégrée "$.text()" est utilisée ici, et d'autres similaires incluent "$.data()", etc.

2. Mise en cache des objets jQuery

La recherche d'éléments DOM implique en fait beaucoup de surcharge de mémoire. Vous devez utiliser le sélecteur le moins de fois possible et mettre en cache les résultats sélectionnés autant que possible pour faciliter une utilisation répétée dans le futur. N'oubliez pas que le même sélecteur n'apparaît jamais plus d'une fois.

Par exemple :

Copier le code Le code est le suivant :

$(" #top") .find("p.classA");
$("#top").find("p.classB");
Amélioré↓
var cached = $("#top ");
cached.find("p.classA");
cached.find("p.classB");

3. Apportez moins de modifications à la structure du DOM

Si vous souhaitez modifier la structure du DOM plusieurs fois, supprimez d'abord la partie que vous souhaitez modifier, puis remettez-la une fois les modifications terminées. L'idée de base ici est de créer ce que vous voulez vraiment en mémoire, puis d'effectuer l'opération de mise à jour DOM la plus efficace à la fin.

Par exemple :

Copier le code Le code est le suivant :

var top_100_list = [... ], // Voici un tableau de 100 chaînes
$mylist = $("#mylist");
for (var i=0, l=top_100_list.length; i $mylist.append("

" top_100_list[i] "

"); // 100 opérations DOM
}
Après amélioration↓
var top_100_list = [. ..],
$mylist = $("#mylist"),
top_100_li = "" // Cette variable est utilisée pour stocker la chaîne modifiée
pour (var i=0, l =top_100_list .length; i top_100_li = "

" top_100_list[i] "

";
}
$mylist.html(top_100_li); // Il n'y a qu'une seule opération DOM

4. Conventions de dénomination

Le code jQuery est inévitablement mélangé avec le code JS. Comment rendre le code jQuery rigoureux et ordonné et standardiser vos propres règles de dénomination peut mieux améliorer le code. Lisibilité.

1. Nom de la fonction : function getResultByUserId(){..}, suivez la méthode de dénomination des chameaux, avec la première lettre du mot en majuscule. Essayez d'être aussi court que possible et d'exprimer clairement le mot. but de la méthode.

peut également être défini comme ceci :

Copier le code Le code est le suivant :

$.flushCartItemList = function() {
isAjaxDate = true;
}

2. Nom du paramètre : function method(recordIdx, recordVal){..}, identique au nom de la fonction, essayez d'utiliser des abréviations pour les paramètres.
Les noms doivent être significatifs, et les abréviations de certains attributs sont également très particulières, comme : index : idx ; valeur : val ; longueur : nom : nm ;

3. Noms des variables : var user_id; var user_list_tab; var user_list_tr_1;, généralement séparés par des traits de soulignement sous forme de mots, selon les règles de "naming_element_index".

Le nom de variable de l'objet jQuery doit être préfixé par "$" pour distinguer l'objet javascript.

Compétences en rédaction jQuery :

1. Sélection du sélecteur

Les sélecteurs sont le fondement de jQuery. Comment choisir le sélecteur le plus efficace doit d'abord comprendre les différences de performances des différents sélecteurs.

①Sélecteur d'ID et sélecteur d'élément de balise : $("#ID"); $("Tag");

jQuery appelle automatiquement en interne les méthodes natives du navigateur (getElementById();, getElementByTagName();), la vitesse d'exécution est donc rapide.

②Sélecteur de classe : $(".Class");

jQuery traversera tous les nœuds DOM pour trouver les objets DOM avec class=Class, la vitesse d'exécution est donc lente.

③Sélecteur de pseudo-classe et sélecteur d'attribut : $(":Type"); $("[Attribute='Value']");

Comme le navigateur ne dispose pas de méthodes natives pour eux, ces deux sélecteurs sont les plus lents à s'exécuter. Cependant, il n'est pas exclu que certains navigateurs tiers aient ajouté les méthodes querySelector() et querySelectorAll(), ce qui améliorera grandement les performances de ce type de sélecteur.

2. Écriture en chaîne

　

Copier le code Le code est le suivant :

$("div").find("h3" ).eq (2).html("Bonjour");

Lors de l'utilisation de la méthode d'écriture en chaîne, jQuery mettra automatiquement en cache les résultats de chaque étape, ce qui est plus rapide que la méthode d'écriture sans chaîne (mise en cache manuelle).

3. Circulation efficace

Le bouclage est toujours une opération qui prend du temps. Les méthodes de boucle natives de JavaScript for et while sont plus rapides que « .each() » de jQuery. Et concernant la boucle for, la manière d’écrire suivante est la plus efficace.

Copier le code Le code est le suivant :

pour (var i = 0, len = array.length ; je < len; je ) {
// alerte(i);
}

Déclarez d'abord la variable, puis effectuez l'opération de boucle. L'efficacité est bien supérieure à la traversée du tableau "for (var i in arr)", et elle est également plus efficace que la boucle pour obtenir la longueur du tableau "for (var i = 0; i < arr.length ; i )" est très efficace !

4. Épissage des cordes

L'épissage de chaînes est souvent rencontré en développement. L'utilisation de la méthode "=" pour épisser des chaînes est très inefficace. Nous pouvons utiliser la méthode ".join()" du tableau.

Copier le code Le code est le suivant :

var array = [];

for(var i = 0; i < 10000; i ){

array[i] = "";
}
document.getElementById("one").innerHTML = array.join("");

J'aimais utiliser la méthode de tableau native ".push()". En fait, il est plus rapide d'utiliser directement arr[i] ou arr[arr.length], mais la différence n'est pas grande.

5. Chargement de la page

Bien que $(function(){}); soit effectivement utile, il est terminé une fois que tous les éléments DOM sont chargés. Si vous constatez que votre page se charge toujours, cela est probablement dû à cette fonction. Vous pouvez réduire l'utilisation du processeur lors du chargement de la page en liant une fonction jQuery à l'événement $(window).load.

Copier le code Le code est le suivant :

$(window).load(function( ){
// Fonction jQuery initialisée une fois la page entièrement chargée (y compris tous les éléments DOM et le code JS
});

. Certaines fonctions d'effets spéciaux, telles que le glisser-déposer, les effets visuels et les animations, le préchargement d'images cachées, etc., sont adaptées à cette technologie.