JQuery Normes et meilleures pratiques

Question

Je suis actuellement responsable du déploiement de l'utilisation de jQuery auprès de la communauté des développeurs Web au sein de notre entreprise. Une partie de cela consiste à présenter un cours, mais une autre partie consiste à communiquer des normes et des bonnes pratiques.

Si vous recherchez sur Google "meilleure pratique jQuery", vous trouverez probablement ce qui suit parmi les résultats de la recherche. http://www.smashingmagazine.com/2008/09/16/jquery-examples-and-best-practices/ http://www.artzstudio.com/2009/04/jquery-performance-rules/

Ces ressources m'ont été utiles et j'y ai trouvé beaucoup d'informations utiles. Cependant, ce qui m'intéresserait vraiment, ce sont des conseils, des pièges, des opinions, etc., sur les meilleures pratiques de la part de développeurs expérimentés de jQuery et de ceux qui se sont peut-être trouvés dans une situation similaire à la mienne. Tout bon lien serait également apprécié.

ÉDIT:

Ajouté une section sur les normes de codage jQuery sur ma propre page :

http://www.jameswiseman.com/blog/?p=48

Answer 1

Vous pouvez trouver ce sujet tendance ici même sur StackOverflow.com

Pièges à éviter avec jQuery

Des astuces très intéressantes et utiles les unes après les autres.

Voici quelques autres que j'ai trouvées dans mes favoris :

• http://paulirish.com/2011/11-more-things-i-learned-from-the-jquery-source/
• http://jquery.open2space.com/
• http://thetoptenme.wordpress.com/2008/08/19/the-complete-guide-for-jquery-developer-reblog/
• http://www.tvidesign.co.uk/blog/improve-your-jquery-25-excellent-tips.aspx

Answer 2

Quelque chose que j'ai personnellement commencé à faire est une sorte de Notation hongroise pour les applications pour les ensembles jQuery, en préfixant ces variables avec un $

var someInt = 1;
var $someQueryCollection = $( 'sélecteur' );

Je trouve que plus mes extraits de code jQuery grandissent, plus cela devient précieux, non seulement pour promouvoir le stockage des ensembles jQuery en tant que variables, mais aussi pour m'aider à suivre quelles variables sont réellement des ensembles jQuery.

Answer 3

JavaScript non intrusif (séparation de la structure et du comportement)

Auparavant, il était courant de mettre votre gestionnaire de clics à l'intérieur de la structure. Il est maintenant recommandé de ne pas écrire votre code JS à l'intérieur de la structure mais de l'inclure via des événements DOM.

Amélioration progressive

L'utilisateur bénéficie d'une meilleure expérience s'il utilise un navigateur conforme aux normes et/ou a JavaScript activé. Le site/application web reste accessible même s'ils utilisent un navigateur plus ancien ou ont JavaScript désactivé.

Détection des fonctionnalités et non détection du navigateur

Mis à part les points ci-dessus, je me concentrais vraiment sur la transmission du message (briser l'idée préconçue) que JavaScript est un langage ludique. J'ai vu trop de développeurs penser de cette manière et tout va mal à partir de là. Vous devez leur expliquer en quoi JavaScript est un langage très puissant et pourquoi ils ont besoin d'une bibliothèque JS (en raison des incohérences des navigateurs) même si JS lui-même est très puissant.

Bonne chance.

Answer 4

La façon dont jQuery fonctionne n'est PAS la même que la façon dont JavaScript fonctionne, même s'ils sont un et le même. jQuery fonctionne sur les sélecteurs CSS, comme le(s) nom(s) de classe et l'id des éléments. Pour sélectionner un élément en jQuery, vous faites :

$("#votreID") or $(".votreClasse") or $("div") or $("#votreID p") etc

Et vous obtiendrez une collection de tous les éléments de la page qui correspondent à vos critères. Vous pouvez alors effectuer vos actions sur TOUS ces éléments sans aucune boucle d'aucune sorte. C'est important de se rappeler :

$(".votreClasse").click(function(){
    //faire quelque chose
});

affectera tous les éléments avec .votreClasse attachés à eux. Un conseil : si vous allez accéder au $(this), vous devriez le sauvegarder en tant que variable locale :

$(".votreClasse").click(function(){
    var $this = $(this);
});

car cela accélérera votre fonction.