Cet article décrit 14 règles qui doivent être suivies lors de la rédaction du code JavaScript. Partagez-le pour votre référence, comme suit:
1. Utilisez toujours «var»
En JavaScript, les variables sont à l'échelle mondiale ou à l'échelle de la fonction. L'utilisation du mot-clé "var" sera la clé pour garder les variables concises et claires. Lorsque vous déclarez une variable qui est globale ou au niveau de la fonction, le mot-clé "VAR" doit toujours être précédé. L'exemple suivant mettra l'accent sur le problème potentiel de ne pas le faire.
Problèmes causés par le fait de ne pas utiliser var
var i = 0; // c'est bon - crée une fonction de variable globale test () {for (i = 0; i <10; i ++) {alert ("Hello world!");}} Test (); alert (i); // La variable globale I a maintenant 10 ans!Parce que la variable I dans la fonction variable n'utilise pas VAR pour en faire une variable au niveau de la fonction, dans cet exemple, il fait référence à une variable globale. L'utilisation de VAR pour déclarer les variables globales est beaucoup de pratique, mais il est crucial d'utiliser VAR pour définir une variable à l'échelle de la fonction. Les deux méthodes suivantes sont fonctionnellement les mêmes:
La fonction correcte
fonction test () {var i = 0; for (i = 0; i <10; i ++) {alert ("Hello World!");}}La fonction correcte
fonction test () {pour (var i = 0; i <10; i ++) {alert ("Hello World!");}}2. Détection des fonctionnalités plutôt que détection du navigateur
Un code est écrit pour découvrir la version du navigateur et effectuer différents comportements sur la base du client que l'utilisateur utilise. En général, c'est une très mauvaise pratique. Une meilleure approche consiste à utiliser la détection des fonctionnalités, à détecter d'abord (le navigateur), qu'il y ait cette fonction ou cette fonctionnalité avant d'utiliser une fonctionnalité avancée qu'un ancien navigateur peut ne pas prendre en charge, puis l'utiliser. Cela détecte individuellement la version du navigateur s'améliore, même si vous connaissez ses performances. Vous pouvez trouver un article qui traite de ce problème en profondeur à http://www.jibbering.com/faq/faq_notes/not_browser_detect.html.
exemple:
if (document.getElementById) {var élément = document.getElementById ('MyId');} else {alert ('Votre navigateur n'a pas les capacités requises pour exécuter ce script!');}3. Utilisez la notation du support carré
Lorsque l'accès est déterminé par exécution ou inclut les propriétés d'objet qui ne sont pas accessibles avec le "." signe, la notation du support carré est utilisée. Si vous n'êtes pas un programmeur JavaScript expérimenté, l'utilisation toujours d'utiliser des crochets est un bon moyen de le faire
Les propriétés d'un objet sont accessibles par deux méthodes fixes: "." Noun et "[]" Notation du support carré:
"." Méthode de notation:
MyObject.property
"[]" Notation du support carré:
MyObject ["propriété"]
Utilisez le "." Signe, le nom d'attribut est du code dur et ne peut pas être modifié pendant l'exécution. En utilisant les crochets "[]", le nom d'attribut est une chaîne qui vient du calcul du nom d'attribut. Une chaîne doit être du code dur, ou une variable, ou même une fonction qui rappelle une valeur de chaîne. Si un nom d'attribut est généré pendant l'exécution, des supports carrés sont nécessaires. Si vous avez des propriétés telles que "Value1", "Value2" et "Value3", et que vous souhaitez utiliser la variable i = 2 pour y accéder
Cela peut fonctionner:
MyObject ["valeur" + i]
Cela ne peut pas être:
MyObject.Value + i
Et dans certains environnements côté serveur (PHP, Struts, etc.), les formulaires de formulaires sont attachés avec des nombres [] pour indiquer que les formulaires de formulaire doivent être traités comme des tableaux côté serveur. De cette façon, en utilisant le "." Le signe pour se référer à un champ contenant le signe [] ne sera pas exécuté car [] est la syntaxe pour se référer à un tableau JavaScript. Par conséquent, [] la notation est nécessaire:
Cela peut fonctionner:
FormRef.Elements ["Name []"]
Cela ne peut pas être:
formref.elements.name []
L'utilisation recommandée de la notation du support carré "[]" signifie qu'elle est toujours utilisée lorsqu'elle en a besoin (évidemment). C'est une préférence et une habitude privées lorsqu'elle n'est pas strictement nécessaire de l'utiliser. Un bon principe empirique consiste à utiliser le "." Notation pour accéder aux propriétés des objets standard et utiliser la notation du support carré "[]" pour accéder aux propriétés des objets définies par la page. De cette façon, le document ["getElementById"] () est une utilisation de notation carrée parfaitement possible "[]", mais document.getElementId () est syntaxiquement préféré parce que GetElementById est une propriété d'objet de document standard définie dans une spécification DOM. Mélangez ces deux notations à faire, ce qui est un attribut d'objet standard et quel nom d'attribut est défini par le contexte le rend clair dans le code:
document.forms ["myformname"]. Elements ["MyInput"]. Valeur
Ici, Forms est une propriété standard du document, et le nom de formulaire MyFormName est défini par la page. Dans le même temps, les éléments et les attributs de valeur sont tous deux des attributs standard définis par la spécification. MyInput est défini par la page. Cette page est une syntaxe qui rend les gens très faciles à comprendre (le contenu du code), et est un idiome recommandé, mais pas un principe strict.
4. Évitez «Eval»
Dans JavaScript, la fonction EVAL () est une méthode pour exécuter du code arbitraire pendant l'exécution. Dans presque tous les cas, l'évaluation ne doit pas être utilisée. S'il apparaît dans votre page, cela signifie qu'il existe un meilleur moyen de faire ce que vous faites. Par exemple, l'évaluation est généralement utilisée par les programmeurs qui ne savent pas utiliser la notation du support carré.
En principe, "Eval est maléfique (Eval est le diable). Ne l'utilisez pas à moins que vous ne soyez un développeur expérimenté et sachez que votre situation est une exception.
5. Références correctes aux éléments de forme et de forme
Tous les formulaires HTML doivent avoir un attribut de nom. Pour les documents XHTML, l'attribut de nom n'est pas requis, mais la balise de formulaire doit avoir l'attribut ID correspondant et doit être référencée avec document.getElementyId (). L'utilisation de méthodes d'indexation comme Document.Forms [0] aux formulaires de référence est une mauvaise pratique dans presque tous les cas. Certains navigateurs traitent les éléments nommés dans des documents en utilisant le formulaire comme attribut de formulaire disponible. Ce n'est pas fiable et ne doit pas être utilisé.
L'exemple suivant montre comment empêcher une référence incorrecte d'une entrée de formulaire à l'aide de crochets et de méthode de référence d'objet correcte:
Entrée du formulaire de référence correct:
document.forms ["formName"]. Elements ["inputName"]
Mauvaise approche:
document.formname.inputname
Si vous souhaitez référencer deux éléments de formulaire dans une fonction, il est préférable de se référer d'abord à l'objet formulaire et de le stocker dans une variable. Cela évite les requêtes en double pour résoudre les références de formulaire:
var formements = document.forms ["mainform"]. Elements; formElements ["input1"]. value = "a"; formations ["input2"]. Value = "b";
Lorsque vous utilisez OnChange ou d'autres méthodes de traitement des événements similaires, une bonne approche consiste à toujours se référer à l'élément d'entrée lui-même dans la fonction à travers une entrée. Tous les éléments d'entrée portent une référence au formulaire de forme qui le contient:
<input type = "text" name = "adresse" onchange = "valider (this)">
Fonction validate (input_obj) {// Référence FormVar Theform contenant cet élément = input_obj.form; // Vous pouvez maintenant vous référer au formulaire lui-même sans utiliser de code dur si (theform.Elements ["City"]. Value == "") {alert ("error");}}En accédant aux propriétés du formulaire en faisant référence à l'élément de formulaire, vous pouvez écrire une fonction qui ne contient pas de code dur pour se référer à un formulaire sur cette page avec un nom spécifique. C'est une très bonne pratique car les fonctions deviennent réutilisables.
Éviter «avec»
La déclaration avec JavaScript inserte un objet à l'extrémité avant d'une portée, de sorte que toute référence aux attributs / variables sera résolue d'abord en fonction de l'objet. Ceci est souvent utilisé comme raccourci pour éviter les références en double:
Exemple d'utilisation avec:
avec (documents.forms ["mainform"]. Elements) {input1.value = "indésirable"; input2.value = "junk";}Mais le problème est que les programmeurs n'ont pas de moyen de vérifier que l'entrée1 ou l'entrée2 a en fait été résolu en tant que propriétés des tableaux d'éléments de formulaire. Il détecte d'abord l'attribut avec ces valeurs de nom, et si elle ne peut pas être trouvée, elle continuera à détecter cette portée (vers le bas). Enfin, il essaie de traiter Input1 et Input2 comme un objet global, et cela se termine par une erreur.
La solution de contournement est de créer un objet qui réduit les références et l'utiliser pour résoudre ces références.
Utilisez une référence:
var elements = document.forms ["mainform"]. Elements; elements.input1.value = "indésirable"; elements.input2.value = "indé
7. Utilisez "onclick" dans l'ancre au lieu de "JavaScript: pseudo-protocole"
Si vous souhaitez déclencher du code JavaScript dans la balise <a>, choisissez OnClick au lieu de JavaScript: Pseudo-Protocol; Le code JavaScript exécutant en utilisant onClick doit retourner ou false (ou une expression que des évaluations sur true ou false [comment traduire cette phrase? Je comprends de cette façon: une expression avec la priorité ci-dessus true ou false]) pour renvoyer la balise elle-même: si vrai, le HREF de l'ancre sera traité comme un lien général; Si faux, le HREF sera ignoré. C'est pourquoi "Retour False"; est souvent inclus à la fin du code traité par onclick.
Syntaxe correcte:
Copiez le code comme suit: <a href = "// www.vevb.com" onclick = "dosomething (); return false;"> go </a>
Dans ce cas, la fonction "DoSomething ()" (définie dans un coin de la page) sera appelée lors du clic. HREF ne sera jamais accessible par un navigateur compatible JavaScript. Le document javascript_required.html sera chargé dans un navigateur où vous pouvez rappeler à JavaScript qui est nécessaire et non activé par l'utilisateur. Habituellement, lorsque vous vous assurez que l'utilisateur permettra la prise en charge de JavaScript, pour autant que possible, le lien n'inclura que href = "#". Et cette approche n'est pas encouragée. Il y a généralement une bonne approche: il peut fournir une page qui revient à la zone locale sans utiliser JavaScript.
Parfois, beaucoup de gens veulent visiter un lien selon les situations. Par exemple, lorsqu'un utilisateur souhaite laisser l'une de vos pages de formulaire et que vous souhaitez vérifier d'abord pour s'assurer que rien n'est modifié. Dans ce cas, votre onclick accédera à une fonction qui renvoie une requête si le lien doit être suivi:
Accès aux liens conditionnels:
<a href = "/" onclick = "return validate ();"> home </a>
fonction validate () {return prompt ("Êtes-vous sûr de vouloir quitter cette page?");}Dans ce cas, la fonction Validate () ne doit renvoyer que Ture ou False. Lorsque l'utilisateur est dans la ture, l'utilisateur sera autorisé à émettre la page d'accueil ou lorsque le lien n'est pas accessible. Cet exemple invite la confirmation (son comportement) pour accéder à la ture ou à la fausse, qui est entièrement déterminée par l'utilisateur cliquant sur "Real" ou "Annuler".
Voici quelques exemples de "ne devrait pas être". Si vous voyez le code suivant dans votre page, cela est incorrect et doit être modifié:
Que ne devrait pas être fait:
<a href = "javascript: doSomething ()"> link </a> <a href = "// www.vevb.com/#" onclick = "dosomething ()"> lien </a> <a href = "// www.vevb.com/#" onclick = "javascript: dosomething ();"> lien </a> <a) href = "// www.vevb.com/#" onclick = "javaScript: DoSomething (); return false;"> link </a>
8. Utilisez l'opérateur unary '+' pour transformer le type en numéro
Dans JavaScript, l'opérateur de signe "+" agit à la fois comme un signe mathématique plus et un connecteur. Cela peut causer des problèmes lorsque les valeurs de champ de la forme sont additionnées. Par exemple, parce que JavaScript est un langage de type faible, la valeur du champ de formulaire sera traitée comme un tableau, et lorsque vous les prenez ensemble, le "+" sera traité comme un connecteur, pas un signe mathématique plus.
Exemples de problèmes:
<form name = "myform" action = "[url]"> <input type = "text" name = "val1" value = "1"> <input type = "text" name = "val2" value = "2"> </ form>
fonction total () {var theform = document.forms ["myform"]; var total = theform.elements ["val1"]. valeur + theform.Elements ["val2"]. valeur; alert (total); // Cela apparaîtra "12", mais ce que vous voulez, c'est 3!}Pour résoudre ce problème, JavaScript a besoin d'une invite pour le faire traiter ces valeurs comme des nombres. Vous pouvez utiliser le panneau "+" pour convertir un tableau en nombre. La présentation d'une variable ou d'une expression avec un signe "+" le forcera à être traité en nombre, ce qui permettra également aux mathématiques "+" d'être appliqués avec succès.
Code modifié:
fonction total () {var theform = document.forms ["myform"]; var total = (+ theform.elements ["val1"]. valeur) + (+ theform.Elements ["val2"]. valeur); alert (total); // Cela allait alerter 3}9. Évitez le document.
Document.all a été introduit par IE de Microsoft et n'est pas une fonctionnalité JavaScript DOM standard. Bien que la plupart des nouveaux navigateurs le prennent en charge pour prendre en charge le mauvais code qui en dépend, (et), il existe de nombreux navigateurs qui ne le soutiennent pas.
Il n'y a aucune raison pour que d'autres méthodes ne soient pas applicables, et un ancien navigateur IE (<5.0) a besoin d'un support, et le document est utilisé dans JavaScript comme compromis. Vous n'avez pas besoin d'utiliser un document. Tout pour détecter s'il s'agit d'un navigateur IE, car d'autres navigateurs le soutiennent généralement.
Seulement document. Tout est le dernier choix:
if (document.getElementById) {var obj = document.getElementById ("MyId");} else if (document.all) {var obj = document.all ("myid");}Quelques principes d'utilisation du document.
Essayez d'autres méthodes
Quand c'est le dernier choix
Lorsqu'il doit prendre en charge les navigateurs IE en dessous de la version 5.0
Utilisez toujours "if (document.all) {}" pour voir s'il est pris en charge.
10. N'utilisez pas les commentaires HTML dans les blocs de code de script
Autrefois, JavaScript (1995), certains navigateurs tels que Netscape 1.0 n'ont pas pris en charge ou ne reconnaissaient pas la balise <cript>. Ainsi, lorsque JavaScript a été publié pour la première fois, il y avait une technologie qui empêcherait le code réel d'être affiché sur les navigateurs plus anciens en tant que texte. Il y a un "piratage" qui utilise des commentaires HTML dans le code pour masquer ces codes.
Faire des commentaires HTML pas bons:
<script linguisse = "javascript"> <! - // code ici // -> </ script>
Aujourd'hui, aucun navigateur couramment utilisé n'ignore la balise <cript>. Par conséquent, il n'est plus nécessaire de masquer le code source JavaScript. En fait, il peut également être considéré comme inutile pour les raisons suivantes:
Dans la documentation XHTML, le code source sera caché à tous les navigateurs et rendu à inutile (contenu);
Les commentaires HTML ne sont pas autorisés, cela invalidera toute opération de décrémentation.
11. Évitez d'utiliser des espaces de noms globaux sans discrimination
Généralement, toutes les variables et fonctions sont rarement nécessaires. L'utilisation globale peut provoquer des conflits de documents de fichiers source JavaScript et des abandons du code. Par conséquent, une bonne approche consiste à adopter l'encapsulation fonctionnelle dans un espace de noms global. Il existe plusieurs façons de terminer cette tâche, ce qui est relativement compliqué. Le moyen le plus simple est de créer un objet global et d'attribuer des propriétés et des méthodes à cet objet:
Créer un espace de noms:
var myLib = {}; // objet global ConteperMylib.Value = 1; MyLib.increment = function () {MyLib.Value ++;} myLib.show = function () {alert (mylib.value);} myLib.Value = 6; MyLib.Incriment (); MyLib.show (); // Alertes 7Les espaces de noms peuvent également être créés à l'aide de fermetures et les variables de membres privés peuvent également être déguisées en JavaScript.
12. Évitez les appels synchrones «ajax»
Lorsque vous utilisez une demande "AJAX", vous sélectionnez le mode asynchrone ou utilisez le mode synchrone. Lorsque le comportement du navigateur peut continuer à être exécuté, le mode asynchrone place la demande en arrière-plan et le mode synchrone attendra la fin de la demande avant de continuer.
Les demandes faites en mode de synchronisation doivent être évitées. Ces demandes désactiveront le navigateur à l'utilisateur jusqu'au retour de la demande. Une fois que le serveur est occupé et prend un certain temps pour terminer la demande, le navigateur (ou le système d'exploitation) de l'utilisateur ne pourra rien faire d'autre tant que la demande a expiré.
Si vous pensez que votre situation nécessite un mode de synchronisation, la plus grande possibilité est que vous avez besoin de temps pour repenser votre conception. Rarement, le cas échéant, des demandes AJAX en mode synchrone sont réellement nécessaires.
13. Utilisation de JSON
Lorsqu'il est nécessaire de stocker la structure de données en texte brut ou d'envoyer / récupérer la structure des données via AJAX, utilisez JSON au lieu de XML autant que possible. JSON (notation d'objet JavaScript) est un format de stockage de données plus concis et plus efficace et ne s'appuie sur aucune langue (et est une langue neutre).
14. Utilisez la balise <cript> correcte
L'utilisation de la propriété linguistique dans <Script> n'est pas favorisée. Un moyen approprié consiste à créer le bloc de code JavaScript suivant:
<script type = "text / javascript"> // code ici </ script>
PS: Le code ci-dessus n'a pas été formaté et le code formaté sera généralement plus facile à lire et à comprendre. Voici quelques outils de formatage et de compression en ligne à utiliser dans le développement futur:
Outils d'embellissement et de formatage du code JavaScript en ligne:
http://tools.vevb.com/code/js
Outils d'embellissement / compression / formatage / de formatage du code JavaScript:
http://tools.vevb.com/code/jscompress
Tool de compression JSMin en ligne JS:
http://tools.vevb.com/code/jsMincompress
Code JSON en ligne Formatage / embellissement / compression / édition / conversion des outils:
http://tools.vevb.com/code/jsoncodeformat
Pour plus d'informations sur le contenu lié à JavaScript, veuillez consulter les sujets de ce site: "Résumé des effets et techniques de commutation JavaScript", "Résumé des effets et techniques de recherche JavaScript", "Résumé des erreurs Javascript et des techniques de débogage" Algorithmes et techniques de traversée JavaScript ", et" Résumé de l'utilisation des opérations mathématiques JavaScript "
J'espère que cet article sera utile à la programmation JavaScript de tous.