Normes de code jQuery et bonnes pratiques

Ce qui suit présente les normes de base et les bonnes pratiques pour l'écriture de code jQuery. Cela n'inclut pas les normes et bonnes pratiques du JS natif.

jquery

Chargement de jQuery

1. Essayez d'utiliser un CDN pour charger jQuery.

<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script>window.jQuery || document.write('<script src="js/jquery-1.11.0.min.js.html" type="text/javascript"><\/script>')</script>

La bibliothèque CDN publique de Baidu devrait être la plus rapide dans toutes les régions de Chine, et elle propose de nombreuses bibliothèques JS. Recommandée pour tous.

<script src="../libs.baidu.com/jquery/1.8.3/jquery.min.js"></script>

Le service d'accélération de bibliothèques JS d'Upyun a une vitesse d'accès correcte en Chine, mais malheureusement il propose relativement peu de bibliothèques JS.

<script src="../upcdn.b0.upaiyun.com/libs/jquery/jquery-1.8.3.min.js"></script>

La bibliothèque JS/CSS de Sina, aussi appelée bibliothèque publique Sina SAE, a une vitesse d'accès correcte en Chine et une collection complète de bibliothèques JS. Recommandée pour tous.

<script src="http://lib.sinaapp.com/js/jquery/1.8.3/jquery.min.js"></script>

Variables jQuery

1. Toutes les variables qui utilisent ou mettent en cache des objets jQuery doivent commencer par$le préfixe.
2. Toujours mettre en cache les objets renvoyés par les sélecteurs jQuery dans des variables locales pour les réutiliser.

  var $myDiv = $("#myDiv");
  $myDiv.click(function(){....});

3. Utilisez la convention de nommage camelCase pour les variables.

Sélecteurs

1. Utilisez les sélecteurs d'ID chaque fois que possible, car ils utilisent en internedocument.getElementById()。
2. Lorsque vous utilisez des sélecteurs de classe/pseudo-classe, associez toujours un type d'élément au sélecteur afin d'éviter de parcourir tout l'arbre DOM.

 // BAD 在整个DOM树中扫描"products"类名
var $products = $(".products");

// GOOD 只在DIV元素中扫描"products"类名
var $products = $("div.products");

3. Dans les sélecteurs ID > enfant, utilisez lafind()méthode. Parce que la première moitié du sélecteur n'utilise pas le moteur de sélection Sizzle pour trouver des éléments.

// BAD, Sizzle选择器引擎查找层级
var $productIds = $("#products div.id");

// GOOD, 只有div.id走Sizzle选择器引擎
var $productIds = $("#products").find("div.id");

4. La dernière partie du sélecteur doit être plus spécifique que la première partie.

// 未优化
$("div.data .gonzalez");

// 优化
$(".data td.gonzalez");

5. Évitez les sélecteurs redondants.

$(".data table.attendees td.gonzalez");

// Better: 有必要时要去掉中间不必要的内容
$(".data td.gonzalez");

6. Ajoutez du contexte aux sélecteurs.

// 要扫描整个DOM树寻找
$('.class');

// 只在#class-container里扫描
$('.class', '#class-container');

7. Évitez d'utiliser des sélecteurs joker.

$('div.container > *'); // BAD
$('div.container').children(); // BETTER

8. Évitez les sélecteurs joker implicites. Lorsque l'entrée suivante est omise, le sélecteur joker est implicitement utilisé.

$('div.someclass :radio'); // BAD
$('div.someclass input:radio'); // GOOD

9. Les sélecteurs ID utilisentdocument.getElementById(). Les sélecteurs ID n'ont pas besoin d'être imbriqués.

$('#outer #inner'); // BAD
$('div#inner'); // BAD
$('.outer-container #inner'); // BAD
$('#inner'); // GOOD

Opérations DOM

1. Détachez toujours d'abord les éléments DOM existants, puis effectuez les opérations, et enfin rattachez-les au DOM.

var $myList = $("#list-container > ul").detach();
//...针对$myList的许多DOM操作
$myList.appendTo("#list-container");

2. Utilisez la concaténation de chaînes ou array.join() au lieu de la méthode .append().

// BAD
var $myList = $("#list");
for(var i = 0; i < 10000; i++){
    $myList.append("<li>"+i+"</li>");
}

// GOOD
var $myList = $("#list");
var list = "";
for(var i = 0; i < 10000; i++){
    list += "<li>"+i+"</li>";
}
$myList.html(list);

// EVEN FASTER
var array = []; 
for(var i = 0; i < 10000; i++){
    array[i] = "<li>"+i+"</li>"; 
}
$myList.html(array.join(''));

3. Ne manipulez pas d'éléments inconnus.

// BAD: 这个函数内部要先执行3个函数，才发现选择器选择到的可能是空内容
$("#nosuchthing").slideUp();

// GOOD
var $mySelection = $("#nosuchthing");
if ($mySelection.length) {
    $mySelection.slideUp();
}

Événements

1. Utilisez une seule fonction Document Ready par page. Cela facilite le débogage.
2. N'utilisez pas de fonctions anonymes pour lier des événements. Les fonctions anonymes ne sont pas propices au débogage, à la maintenance, aux tests et à la réutilisation.

$("#myLink").on("click", function(){...}); // BAD

// GOOD
function myLinkClickHandler(){...}
$("#myLink").on("click", myLinkClickHandler);

3. Les fonctions Document Ready ne doivent pas être des fonctions anonymes. Les fonctions anonymes ne peuvent pas être réutilisées ni testées.

$(function(){ .. }); // BAD: 不容易复用也不利于测试

// GOOD
$(initPage); // or $(document).ready(initPage);
function initPage(){
  // Document ready里可以初始化变量和调用其他初始化函数
}

4. Les fonctions Document Ready doivent être placées dans des fichiers externes, et après les autres paramètres d'initialisation, appelez ces fonctions en JS inline.

<script src="my-document-ready.js.html"></script>
<script>
  // 任何其他需要设置的全局变量
  $(document).ready(initPage); // or $(initPage);
</script>

5. N'ajoutez pas de comportement (JS inline) dans les fichiers HTML ; c'est un cauchemar de débogage. Utilisez toujours jQuery pour lier les événements, et il sera facile de dissocier les événements plus tard.

<a id="myLink" href="../index.html" onclick="myEventHandler();">my link</a> <!-- BAD -->
$("#myLink").on("click", myEventHandler); // GOOD

6. Si nécessaire, utilisez des espaces de noms personnalisés pour les événements. Cela permet de dissocier facilement des événements spécifiques sur un élément DOM sans affecter les autres événements de cet élément.

$("#myLink").on("click.mySpecialClick", myEventHandler); // GOOD
// 后面会很容易的解绑这个特定的点击事件
$("#myLink").unbind("click.mySpecialClick");

Ajax

1. Évitez d'utiliser.getJSON()et.get(), utilisez uniquement$.ajax(), les deux premiers utilisent en interne ce dernier.
2. Ne pashttpsutiliser sur les sites webhttprequêtes. Préférez les URL relatives au protocole (supprimez http/https de l'URL).
3. Ne mettez pas les paramètres de requête dans l'URL ; mettez-les plutôt dans l'objet data.

// 不可读
$.ajax({
    url: "something.php?param1=test1&param2=test2",
    ....
});

// 可读
$.ajax({
    url: "something.php",
    data: { param1: test1, param2: test2 }
});

4. Définissez explicitement le type de données,dataTypeafin qu'il soit facile de savoir quel type de données vous manipulez actuellement.
5. Lorsque vous liez des événements à des éléments DOM chargés via Ajax, essayez d'utiliser la délégation d'événements. L'avantage de la délégation d'événements est que les éléments ajoutés ultérieurement au DOM par Ajax peuvent également répondre aux événements.

$("#parent-container").on("click", "a", delegatedClickHandlerForAjax);

6. Utilisez des Promises.

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

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

7. Code de modèle Ajax :

var jqxhr = $.ajax({
  url: url,
  type: "GET",      // 默认值GET，可根据需要配置
  cache: true,      // 默认值true, dataType是'script'或'jsonp'时为false，可根据需要配置
  data: {},         // 请求参数对象
  dataType: "json", // 设置数据类型
  jsonp: "callback",// 只在操作JSONP时设置此项
  statusCode: {     // 针对特定错误码的回调处理函数
    404: handler404,
    500: handler500
  }
});
jqxhr.done(successHandler);
jqxhr.fail(failureHandler);

Effets et animations

1. Utilisez une approche cohérente pour implémenter les animations.

2. N'abusez pas des effets d'animation, sauf si vous visez l'expérience utilisateur.

Essayez d'utiliser des méthodes simples show/hide/toggle/slideUp/slideDown pour afficher et masquer des éléments.
Essayez d'utiliser des durées d'animation prédéfinies :slow,fastou400

Plugins

1. Choisissez toujours des plugins qui sont bien maintenus, bien documentés, bien testés et soutenus par la communauté.
2. Vérifiez soigneusement la compatibilité du plugin avec la version de jQuery que vous utilisez.
3. Tous les composants réutilisables/génériques doivent être extraits sous forme de plugins jQuery.

Chaînage

1. Essayez d'utiliser le chaînage au lieu de mettre en cache des variables ou d'appeler plusieurs fois des méthodes de sélection.

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

2. Lorsqu'une chaîne dépasse trois appels ou devient complexe en raison de la liaison d'événements, utilisez des sauts de ligne et l'indentation pour garder le code lisible.

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

3. Pour les chaînes plus longues, il est acceptable de mettre en cache un objet intermédiaire dans une variable.

Autres principes

1. Utilisez des littéraux d'objet pour les paramètres chaque fois que possible.

$myLink.attr("href", "#").attr("title", "my link").attr("rel", "external"); // BAD
// GOOD
$myList.attr({
    href: "#",
    title: "my link",
    rel: "external"
});

2. Ne mélangez pas CSS dans jQuery.

$("#mydiv").css({'color':red, 'font-weight':'bold'}); // BAD

.error { color: red; font-weight: bold; } /* GOOD */
$("#mydiv").addClass("error"); // GOOD

3. N'utilisez pas de méthodes obsolètes.
4. Utilisez les méthodes JS natives lorsque c'est nécessaire.

$("#myId"); // 还是慢了些
document.getElementById("myId");

Ressources associées

Tutoriel jQuery

Normes de code et bonnes pratiques jQuery

Catégorie Technologie de programmation