7 Meilleures pratiques jQuery_jquery

Avec l'augmentation du nombre d'applications Web riches et les attentes élevées des utilisateurs en matière de réponses interactives rapides, les développeurs ont commencé à utiliser les bibliothèques JavaScript pour effectuer certaines tâches répétitives rapidement et efficacement. L'une des bibliothèques JavaScript les plus populaires est jQuery. Mais le grand nombre d’applications de jQuery a soulevé une autre question : quelles sont les meilleures pratiques et quelles sont les mauvaises pratiques lors de l’utilisation des bibliothèques JavaScript ?

Contexte

Dans cet article, je vais vous présenter quelques bonnes pratiques (du moins à mon avis) lors de l'écriture, du débogage et de la révision du code JavaScript. En fait, j'ai sélectionné 7 des scénarios les plus courants.

1. Utiliser CDN et son adresse de secours (fallback)

CDN signifie Content Delivery Network et est un serveur qui met en cache les fichiers JavaScript. Après avoir utilisé un CDN, votre application peut utiliser le cache CDN au lieu de recharger les fichiers de bibliothèque depuis votre serveur à chaque fois qu'un nouvel utilisateur lance une requête. Google, Microsoft et JQuery fournissent tous des services CDN.

Étant donné que le réseau n'est pas toujours fiable à 100 % et que le serveur peut tomber en panne pour une raison quelconque, vous devez vous assurer que votre application peut toujours fonctionner normalement même si ces choses se produisent. À ce stade, nous devons utiliser l'adresse de secours : lorsque l'application ne parvient pas à trouver la bibliothèque de cache, elle se replie et utilise le fichier du serveur.

Google CDN est comme ceci :

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"> </script>

Microsoft CDN est comme ceci :

<script src="//ajax.aspnetcdn.com/ajax/jquery/jquery-1.9.0.min.js"> </script>

Il est à noter que nous n'avons pas spécifié le protocole URL comme http mais utilisé //. En effet, le serveur CDN prend en charge http et https. Si votre site Web dispose d'une certification SSL, vous pouvez charger les fichiers normalement sans modification.

De plus, comme je l'ai mentionné précédemment, nous avons également besoin d'une adresse de secours en cas de problème avec le serveur CDN.

<script>Window.JQuery || document.write(&lsquo;<script src=&rdquo;script/localsourceforjquery&rdquo;></script>&rsquo;)

Bien sûr, vous pouvez également utiliser Require pour configurer le jQuery dont vous avez besoin, mais je pense que c'est bien.

2. Limiter les interactions avec le DOM

La manipulation de l'arborescence DOM avec JavaScript entraîne des coûts en termes de performances. Il en va de même pour jQuery. Essayez donc de minimiser les interactions avec le DOM. Alors que j'aidais un de mes collègues à améliorer la vitesse d'affichage des données, je l'ai vu utiliser un sélecteur dans une boucle. C'est un tueur de performances ! Voici ce qu'il a écrit :

containerDiv = $("#contentDiv");
for(var d =0; d < TotalActions; d++)
{
 containerDiv.append("<div><span class='brilliantRunner'>" + d + "</span></div>");
}

Quel est le problème ? À première vue, il n’y a rien de mal à cela. Et mes collègues ont également dit que ce code était très amusant à exécuter ! Je suis tellement énervé ! Lorsque TotalActions est inférieur à 50, aucun problème n'est remarqué ; mais lorsqu'il atteint 25 000, la vitesse ralentit beaucoup (je l'ai également trouvé via Google) est que l'interaction DOM est placée dans la boucle.

Pour cette fonctionnalité, (après de nombreuses tentatives infructueuses), j'ai remplacé l'interaction directe DOM dans la boucle par une opération push sur un tableau, puis j'ai joint les tableaux avec une chaîne vide comme délimiteur. En fin de compte, le programme est certainement devenu plus fluide et plus efficace.

var myContent=[];
for(var d = 0; d < TotalActions; d++)
{
 myContent.push("<div><span class='brilliantRunner'>" + d + "</span></div>");
}
containerDiv.html(myContent.join(""));

3.Cache

La chose la plus importante et la plus distinctive de jQuery est son sélecteur et la manière de trouver des éléments HTML dans l'arborescence DOM. Cependant, j'ai vu à plusieurs reprises que certains développeurs appellent plusieurs fois le même sélecteur dans la même fonction, comme $("#divid"). Bien que jQuery sélectionne les éléments très rapidement, ne cherchez pas le même élément à chaque fois. Ainsi, vous pouvez mettre en cache vos éléments comme ceci :

var $divId = $("#divId")

Ensuite, dans le code suivant, vous pouvez utiliser $divId.

Pour le code ci-dessous :

var thefunction = function()
{
 $("#mydiv").ToggleClass("zclass");
 $("#mydiv").fadeOut(800);
}

var thefunction2 = function()
{
 $("#mydiv").addAttr("name");
 $("#mydiv").fadeIn(400);
}

Nous pouvons le modifier comme ceci et utiliser la syntaxe de chaîne pour le rendre plus beau :

var mydiv =$("#mydiv");
var thefunction = function()
{
 mydiv.ToggleClass("zclass").fadeOut(800);
}

var thefunction2 = function()
{
 mydiv.addAttr("name").fadeIn(400);
}

Mais là encore, vous n’êtes pas obligé de tout mettre en cache à chaque fois. Regardez l'exemple ci-dessous :

$("#link").click(function()
{
  $(this).addClass("gored");
}

在这里，我既没有用 $(“#link”)，或者将其缓存起来，而是使用的$(this)。因为在这个例子中，我操作的对象就是这个链接本身。

4、find 和 filter

最近，在使用find()来获取jQuery对象结合的时候，我产生了一些困惑。然后我发现，这个操作可以替换为用filter()方法来实现。理解这两者的区别非常重要：

find: 将会从选定的元素开始，一直向下查找DOM树

filter: 是在jQuery集合当中查找
5、end()

当在jQuery集合中进行链式操作的时候，我有时候需要回到父对象去进行一些操作。比如你正在一个表格的第二行应用CSS，然后希望回到表格对象，对其添加一些样式。在你对行应用完样式之后，只要使用end()方法，你就会自动回到表格对象，然后随意的对其添加样式吧！

（译者注：find()、filter()和end()原文是大写，其实应该是小写）

6、对象字面量

当你通过链式语法来操作元素的CSS属性的时候，你可以使用对象字面量方式来提升性能。比如这段代码：

$("#myimg").attr("src", "thepath").attr("alt", "the alt text");

变成下面这样之后，不仅避免了操作DOM元素，而且还不用多次调用相关的设置方法：

$("#myimg").attr({"src": "thepath", "alt": "the alt text"});

7、善用CSS类

尽可能使用CSS类而不要写内联CSS代码。我想这一点就不需要举例说明了吧。

希望这篇文章能够帮助你编写更好的jQuery应用程序，真正的帮助到大家。