Texte original en anglais : Les sept règles du JavaScript discret
Adresse originale : http://icant.co.uk/articles/seven-rules-of-unobtrusive-javascript/
Auteur original : Chris Heilmann
Adresse de traduction : http://www.zhuoqun.net/html/y2008/1103.html
Écrit devant : Lorsque Kejun nous formait JavaScript il y a quelque temps, il a recommandé de nombreux articles classiques sur les diapositives, dont celui-ci Un article. Je me sens très bien après l'avoir lu, mais souvent je ne comprends pas profondément les articles. Il se trouve que je n'ai pas trouvé de version chinoise de cet article, alors j'ai eu l'idée de le traduire, alors que je peux le partager et approfondir ma compréhension. L'auteur de cet article, Chris Heilmann, est un ingénieur britannique chez Yahoo (un « parrain » selon Kejun), et la traduction de cet article a également été approuvée par lui.
Encore une chose ici, j'ai traduit beaucoup de choses auparavant, mais à cette époque je traduisais davantage pour le plaisir de traduire, et je ne comprenais pas beaucoup d'articles techniques, donc je suis toujours traducteur jusqu'à présent. Je continuerai à traduire certains articles à l’avenir, mais je ne devrai traduire que les articles classiques qui doivent être bien compris. Si vous avez le temps, vous devriez quand même écrire plus de code. La pratique est la voie à suivre.
Traduction de la terminologie : Concernant le terme "JavaScript discret", je ne trouve pas de traduction particulièrement appropriée. Après avoir cherché sur Internet, j'ai découvert que certains étaient traduits par "JavaScript discret", d'autres par "JavaScript non intrusif", et certains à Taiwan étaient traduits par "JavaScript non intrusif"... Après de nombreuses recherches, J'ai décidé d'utiliser "pas de JavaScript intrusif". Cette traduction est "JavaScript intrusif" (même si cela ne me convient toujours pas), veuillez consulter cet article pour plus de détails. En fait, « JavaScript discret » contient de nombreuses significations, et il est difficile de le résumer en un mot. Si vous êtes intéressé, vous pouvez jeter un œil à l'explication de « JavaScript discret » sur Wikipédia. De plus, je pense que la traduction consiste à exprimer le sens de l'auteur, et qu'elle ne doit pas nécessairement être traduite mot à mot. Par conséquent, afin de faciliter la compréhension des lecteurs, j'en ai supprimé et ajouté certains dans l'article, mais ceux-ci le sont. sans altérer le sens du texte original réalisé sur une base.
Il y a un autre point à noter, c'est que mes compétences en traduction sont très amateurs, donc il y aura forcément des erreurs dans la traduction, alors corrigez-moi s'il vous plaît.
Après des années de développement, d'enseignement et d'écriture de JavaScript discret, j'ai découvert les directives suivantes. J'espère qu'ils vous aideront à comprendre un peu pourquoi il est préférable de concevoir et d'exécuter JavaScript de cette façon. Ces règles m'ont aidé à livrer des produits plus rapidement, de meilleure qualité et plus faciles à entretenir.
1. Ne faites aucune hypothèse (JavaScript n'est pas un assistant fiable)
La caractéristique la plus importante d'un JavaScript discret est peut-être que vous devez arrêter de faire des hypothèses :
ne présumez pas que JavaScript est disponible, vous feriez mieux de penser que c'est possible. indisponible plutôt que de compter directement sur lui.
Ne présumez pas que le navigateur prend en charge les méthodes et les propriétés tant que vous ne les avez pas testées et confirmé qu'elles fonctionnent.
Ne présumez pas que le code HTML est aussi correct que vous le pensez, vérifiez-le à chaque fois et ne faites rien s'il n'est pas disponible.
Rendre la fonction JavaScript indépendante des périphériques d'entrée N'oubliez pas que d'autres scripts peuvent affecter la fonctionnalité de votre JavaScript, alors assurez-vous que la portée de vos scripts est aussi sûre que possible.
Avant de commencer à concevoir votre script, la première chose à considérer est de vérifier le code HTML pour lequel vous allez écrire un script et de voir s'il y a quelque chose qui peut vous aider à atteindre votre objectif.
2. Recherchez les relations entre les hooks et les nœuds (le HTML est la pierre angulaire des scripts)
Avant de commencer à écrire des scripts, jetez un œil au HTML pour lequel vous souhaitez écrire du JavaScript. Si le HTML n'est pas organisé ou inconnu, il est presque impossible d'avoir une bonne solution de script : il est probable que vous créerez trop de balisage en JavaScript ou que l'application sera trop dépendante de JavaScript.
Il y a certaines choses à considérer en HTML, à savoir les relations entre les hooks et les nœuds.
<1>.Hook Hook
Le hook original et le plus important du HTML est l'ID, et l'ID est accessible via la méthode DOM la plus rapide - getElementById. Si tous les identifiants d'un document HTML valide sont uniques (il existe un bug dans IE concernant le nom et l'identifiant, mais certaines bonnes bibliothèques résolvent ce problème), l'utilisation des identifiants est sûre, fiable et facile à tester.
Certains autres hooks sont des éléments HTML et les classes CSS sont accessibles via la méthode getElementsByTagName, mais les classes CSS ne sont pas accessibles via les méthodes DOM natives dans la plupart des navigateurs. Cependant, il existe de nombreuses bibliothèques de classes externes qui fournissent des méthodes permettant d'accéder aux noms de classes CSS (similaires à getElementsByClassName).
<2>.Relation entre les nœuds HTML
Un autre point intéressant à propos du HTML est la relation entre les balises. Réfléchissez à la question suivante :
Comment pouvons-nous atteindre le nœud cible le plus facilement et avec le moins de traversée du DOM ?
En modifiant quelle marque, peut-on accéder à autant de nœuds enfants que possible qui doivent être modifiés ?
Quels attributs ou informations possède un élément donné qui peuvent être utilisés pour atteindre un autre élément ?
La traversée du DOM est lente et gourmande en ressources, c'est pourquoi vous devriez essayer d'utiliser des techniques déjà utilisées dans les navigateurs pour le faire.
3. Laissez la traversée aux experts (CSS, parcourez le DOM plus rapidement).
Scripter le DOM et utiliser des méthodes ou des propriétés (getElementsByTagName, nextSibling, previousSibling, parentNode et autres) pour parcourir le DOM semble dérouter beaucoup de gens. . intéressant. Ce qui est intéressant, c'est que nous avons déjà fait ces choses grâce à une autre technologie, le CSS.
CSS est une technique qui utilise des sélecteurs CSS pour accéder aux éléments cibles et modifier leurs propriétés visuelles en parcourant le DOM. Un élément complexe de JavaScript utilisant le DOM peut être remplacé par un sélecteur CSS :
var n = document.getElementById('nav');
si(n){
var as = n.getElementsByTagName('a');
if(as.length > 0){
pour(var i=0;as[i];i++){
as[i].style.color = '#369';
as[i].style.textDecoration = 'aucun';
}
}
}
/* Le code suivant a la même fonction que celui ci-dessus*/
#nav a{
couleur : #369 ;
décoration de texte : aucune ;
}
Il s’agit d’une technique très puissante qui peut être utilisée à bon escient. Vous pouvez y parvenir en ajoutant dynamiquement des classes aux éléments de haut niveau dans le DOM ou en modifiant l'ID de l'élément. Si vous utilisez le DOM pour ajouter une classe CSS au corps du document, les concepteurs peuvent facilement définir des versions statiques et dynamiques du document.
JavaScript :
var DynamicClass = 'js' ;
var b = document.body;
b.className = b.className ? b.className + 'js' : 'js';
CSS :
/* Version statique*/
#nav {
....
}
/* Version dynamique*/
body.js #nav {
....
}
4. Comprendre les navigateurs et les utilisateurs (et créer ce dont vous avez besoin en fonction des modèles d'utilisation existants)
Une grande partie du JavaScript discret consiste à comprendre le fonctionnement des navigateurs (en particulier comment les navigateurs plantent) et ce que les utilisateurs attendent. Quel que soit le navigateur, vous pouvez facilement créer une interface complètement différente en utilisant JavaScript. Les interfaces glisser-déposer, les zones de pliage, les barres de défilement et les curseurs peuvent tous être créés à l'aide de JavaScript, mais ce problème n'est pas un simple problème technique. Vous devez réfléchir aux questions suivantes :
Cette nouvelle interface peut-elle être indépendante des périphériques d'entrée ? Si non, sur quoi peut-on compter ?
La nouvelle interface que je crée suit-elle les directives d'un navigateur ou d'une autre interface riche (pouvez-vous basculer entre les menus à plusieurs niveaux directement avec la souris ? Ou devez-vous utiliser la touche de tabulation ?)
Quelle fonctionnalité dois-je fournir qui repose sur JavaScript ?
La dernière question n'est pas vraiment un problème car vous pouvez utiliser le DOM pour créer du HTML à partir de rien si nécessaire. Un exemple de ceci est un lien « imprimer ». Étant donné que les navigateurs ne fournissent pas de fonctionnalité non-JavaScript pour imprimer un document, vous devez utiliser le DOM pour créer de tels liens. Il en va de même pour une barre de titre cliquable qui implémente des modules de développement et de réduction de contenu. La barre de titre ne peut pas être activée par le clavier, mais les liens le peuvent. Ainsi, pour créer une barre de titre cliquable, vous devez ajouter le lien à l'aide de JavaScript, puis tous les utilisateurs disposant d'un clavier peuvent réduire et développer le module de contenu.
Une excellente ressource pour résoudre ce type de problème est la bibliothèque de modèles de conception. Quant à savoir quels éléments du navigateur sont indépendants des périphériques d'entrée, cela dépend de l'accumulation d'expérience. La première chose que vous devez comprendre est le mécanisme de gestion des événements.
5. Comprendre les événements (la gestion des événements provoque des changements)
La gestion des événements est la deuxième étape vers un JavaScript discret. Le but n'est pas de rendre tout déplaçable, cliquable ou d'y ajouter une gestion en ligne, mais de comprendre que la gestion des événements est quelque chose qui peut être complètement séparé. Nous avons séparé HTML, CSS et JavaScript, mais nous ne sommes pas allés très loin dans la séparation de la gestion des événements.
Le gestionnaire d'événements surveillera les modifications qui se produisent sur les éléments du document. Si un événement se produit, le gestionnaire trouvera un objet merveilleux (généralement un paramètre nommé e). Cet objet indiquera à l'élément ce qui s'est passé et ce qui peut être fait avec. .
Ce qui est vraiment intéressant dans la plupart des gestions d'événements, c'est que cela ne se produit pas uniquement sur l'élément auquel vous souhaitez accéder, mais sur tous les éléments situés plus haut dans le DOM (mais tous les événements ne sont pas comme ça, focus et l'exception est l'événement flou). . Par exemple, vous pouvez utiliser cette fonctionnalité pour ajouter un seul gestionnaire d'événements à une liste de navigation et utiliser la méthode du gestionnaire d'événements pour obtenir l'élément qui a réellement déclenché l'événement. Cette technique est appelée délégation d'événements et présente plusieurs avantages :
il vous suffit de vérifier si un élément existe, au lieu de vérifier chaque élément. Vous pouvez ajouter ou supprimer dynamiquement des nœuds enfants sans supprimer le gestionnaire d'événements correspondant. Une autre chose à retenir. lorsque vous répondez au même événement sur différents éléments, vous pouvez empêcher la propagation de l'événement vers l'élément parent et vous pouvez remplacer le comportement par défaut des éléments HTML (tels que les liens). Cependant, ce n’est parfois pas une bonne idée car les navigateurs donnent aux éléments HTML les comportements qu’ils adoptent pour une raison. Par exemple, les liens peuvent pointer vers une cible dans la page, et les laisser inchangés garantit que l'utilisateur peut également ajouter l'état actuel du script de la page à ses favoris.
6. Pensez aux autres (espaces de noms, portées et schémas)
Votre code ne sera presque jamais le seul code de script dans un document. Il est donc particulièrement important de s'assurer qu'il n'y a pas de fonctions globales ou de variables globales dans votre code que d'autres scripts peuvent remplacer. Il existe plusieurs modèles disponibles pour éviter ce problème, le plus basique étant d'utiliser le mot-clé var pour initialiser toutes les variables. Supposons que nous écrivions le script suivant :
var nav = document.getElementById('nav');
fonction init(){
// faire des trucs
}
fonction show(){
// faire des trucs
}
fonction réinitialiser(){
// faire des trucs
}
Le code ci-dessus contient une variable globale appelée nav et trois fonctions nommées init, show et reset. Ces fonctions peuvent accéder à la variable nav et peuvent s'accéder entre elles via le nom de la fonction :
var nav = document.getElementById('nav');
fonction init(){
montrer();
if(nav.className === 'show'){
réinitialiser();
}
// faire des trucs
}
fonction show(){
var c = nav.className;
// faire des trucs
}
fonction réinitialiser(){
// faire des trucs
}
Vous pouvez éviter le codage global ci-dessus en encapsulant le code dans un objet, de sorte que les fonctions puissent être transformées en méthodes dans l'objet et que les variables globales puissent être transformées en propriétés dans l'objet. Vous devez utiliser la méthode "nom + deux-points" pour définir les méthodes et les propriétés, et vous devez ajouter une virgule comme séparateur après chaque propriété ou méthode.
var monScript = {
nav:document.getElementById('nav'),
init:fonction(){
// faire des trucs
},
show:fonction(){
// faire des trucs
},
réinitialiser:fonction(){
// faire des trucs
}
}
Toutes les méthodes et propriétés sont accessibles en externe et en interne à l'aide du "nom de classe + opérateur point".
var monScript = {
nav:document.getElementById('nav'),
init:fonction(){
monScript.show();
if(myScript.nav.className === 'show'){
monScript.reset();
}
// faire des trucs
},
show:fonction(){
var c = monScript.nav.className;
// faire des trucs
},
réinitialiser:fonction(){
// faire des trucs
}
}
L'inconvénient de ce modèle est que chaque fois que vous accédez à d'autres méthodes ou propriétés à partir d'une méthode, vous devez ajouter le nom de l'objet devant, et tout ce qui se trouve dans l'objet est accessible de l'extérieur. Si vous souhaitez simplement qu'une partie du code soit accessible aux autres scripts du document, considérez le modèle de module suivant :
var monScript = fonction(){
//Ce sont des méthodes et propriétés privées
var nav = document.getElementById('nav');
fonction init(){
// faire des trucs
}
fonction show(){
// faire des trucs
}
fonction réinitialiser(){
// faire des trucs
}
//Les méthodes et propriétés publiques sont encapsulées dans l'instruction return en utilisant la syntaxe objet
retour {
public:fonction(){
},
foo : 'bar'
}
}();
Vous pouvez accéder aux propriétés et méthodes publiques renvoyées de la même manière que le code précédent, dans ce cas : myScript.public() et myScript.foo. Mais il y a un autre point inconfortable ici : lorsque l'on veut accéder à une méthode publique de l'extérieur ou depuis une méthode privée de l'intérieur, il faut quand même écrire un nom long (le nom de l'objet peut être très long). Pour éviter cela, vous devez les définir comme privés et renvoyer uniquement un alias dans l'instruction return :
var monScript = fonction(){
// Ce sont des méthodes et propriétés privées
var nav = document.getElementById('nav');
fonction init(){
// faire des trucs
}
fonction show(){
// faire des trucs
// faire des trucs
}
fonction réinitialiser(){
// faire des trucs
}
var foo = 'bar';
function public(){
}
//Renvoie uniquement les pointeurs vers les méthodes et propriétés privées auxquelles vous souhaitez accéder
retour {
public : public,
foo:foo
}
}();
Cela garantit un style de code cohérent et vous permet d'utiliser des alias plus courts pour accéder aux méthodes ou aux propriétés.
Si vous ne souhaitez exposer aucune méthode ou propriété au monde extérieur, vous pouvez encapsuler tout le code dans une méthode anonyme et l'exécuter immédiatement après sa définition :
(function(){
// ce sont toutes des méthodes et propriétés privées
var nav = document.getElementById('nav');
fonction init(){
// faire des trucs
show(); // Aucun préfixe de nom de classe n'est requis ici
}
fonction show(){
// faire des trucs
}
fonction réinitialiser(){
// faire des trucs
}
})();
Ce modèle est idéal pour les modules de code qui ne sont exécutés qu'une seule fois et n'ont aucune dépendance sur d'autres fonctions.
En suivant les règles ci-dessus, votre code fonctionnera mieux pour les utilisateurs, et votre code fonctionnera mieux sur les machines et s'entendra mieux avec le code des autres développeurs. Cependant, il y a un groupe qui doit être pris en considération.
7. Pensez aux développeurs qui reprendront votre code (ce qui facilite la maintenance)
La dernière étape pour rendre votre script vraiment discret est de le revérifier après l'avoir écrit et de prendre soin des développeurs qui reprendront votre code une fois le code terminé. le script est mis en ligne. Considérez les questions suivantes :
tous les noms de variables et de fonctions sont-ils raisonnables et faciles à comprendre ?
Le code est-il correctement organisé ? Est-ce que ça se passe bien du début à la fin ?
Toutes les dépendances sont-elles évidentes ?
Des commentaires ont-ils été ajoutés lorsque cela était possible, ce qui pourrait prêter à confusion ?
La chose la plus importante à noter est la suivante : sachez que le code HTML et CSS du document est plus susceptible d'être modifié que le code JavaScript (car ils sont responsables de l'effet visuel). N'incluez donc aucune classe ni aucun ID visibles par les utilisateurs finaux dans le code du script, mais séparez-les dans un objet contenant les informations de configuration.
monscript = fonction(){
var configuration = {
ID de navigation : 'nav',
visibleClass: 'show'
} ;
var nav = document.getElementById(config.navigationID);
fonction init(){
montrer();
if(nav.className === config.visibleClass){
réinitialiser();
} ;
// faire des trucs
} ;
fonction show(){
var c = nav.className;
// faire des trucs
} ;
fonction réinitialiser(){
// faire des trucs
} ;
}();
De cette façon, le responsable sait où modifier ces propriétés sans avoir à changer d'autre code.
Plus d'informations
Voilà donc les sept lignes directrices que j'ai découvertes. Si vous souhaitez en savoir plus sur les sujets abordés ci-dessus, consultez les liens suivants :