Quels sont les détails auxquels il faut prêter attention en Javascript ?

1. Utilisez === au lieu de ==
JavaScript utilise 2 opérateurs d'égalité différents : ===|!== et ==|!=, dans les opérations de comparaison, utiliser le premier est meilleure pratique.
"Si les deux opérandes ont le même type et la même valeur, === renvoie vrai et !== renvoie faux ." - JavaScript : Language Essence
Cependant, lors de l'utilisation de == et ! =, vous pouvez rencontrer une situation où les types sont différents. Dans ce cas, les types des opérandes seront forcés d'être les mêmes puis comparés, ce qui peut ne pas être le résultat souhaité.
2.Eval == Evil
Lorsqu'il n'est pas familier au début, "eval" nous donne accès au compilateur JavaScript (Annotation : Cela semble très puissant). Essentiellement, nous pouvons transmettre une chaîne à évaluer en tant que paramètre lors de son exécution.
Non seulement cela réduit considérablement les performances du script (Annotation : le compilateur JIT ne peut pas prédire le contenu de la chaîne et ne peut pas précompiler et optimiser), mais cela entraîne également d'énormes risques de sécurité, car le texte à exécuter est trop grande. Haute autorité, restez à l’écart.

3. L'omission peut ne pas éviter les ennuis
Techniquement, vous pouvez omettre la plupart des accolades et des points-virgules. La plupart des navigateurs comprendront correctement le code suivant :

if(someVariableExists) 
    x = false

Ensuite, si quelqu'un aime ceci :

if(someVariableExists) 
   x = false 
   anotherFunctionCall();

quelqu'un Vous pourriez penser que le code ci-dessus est équivalent au suivant :

if(someVariableExists) { 
   x = false; 
   anotherFunctionCall(); 
}

Malheureusement, cette compréhension est fausse. La signification réelle est la suivante :

if(someVariableExists) { 
   x = false; 
} 
anotherFunctionCall();

Vous avez peut-être remarqué que l'indentation ci-dessus donne facilement l'illusion d'accolades. À juste titre, il s’agit d’une pratique terrible qui doit être évitée à tout prix. Il n’existe qu’un seul cas dans lequel les accolades peuvent être omises, c’est-à-dire lorsqu’il n’y a qu’une seule ligne, mais cela est controversé.

if(2 + 2 === 4) return 'nicely done';

Réfléchissez à l'avance
Il y a de fortes chances qu'un jour vous deviez ajouter plus d'instructions à votre bloc if. Dans ce cas, vous devez réécrire ce code. En fin de compte, les omissions sont un champ de mines.

4. Placez le script en bas de la page
N'oubliez pas que l'objectif principal est de présenter la page à l'utilisateur le plus rapidement possible. blocage. Le navigateur ne peut pas continuer à afficher le contenu suivant tant qu'il n'est pas chargé et exécuté. Les utilisateurs seront donc obligés d’attendre plus longtemps.
Si votre js est uniquement utilisé pour améliorer l'effet - par exemple, un événement de clic sur un bouton - placez immédiatement le script avant la fin du corps. Il s’agit certainement d’une bonne pratique.

5. Évitez de déclarer des variables dans une instruction For
Lors de l'exécution d'une longue instruction for, gardez le bloc d'instructions aussi concis que possible, par exemple :
Oups :

for(var i = 0; i < someArray.length; i++) { 
   var container = document.getElementById(&#39;container&#39;); 
   container.innerHtml += &#39;my number: &#39; + i; 
   console.log(i); 
}

Notez que chaque boucle doit calculer la longueur du tableau, et à chaque fois elle doit traverser le dom pour interroger l'élément "conteneur" - l'efficacité est sérieusement faible !
Recommandations :

var container = document.getElementById('container'); 
for(var i = 0, len = someArray.length; i < len;  i++) { 
   container.innerHtml += &#39;my number: &#39; + i; 
   console.log(i); 
}

6. La meilleure façon de construire une chaîne
Lorsque vous devez parcourir un tableau ou object , ne pensez pas toujours à l'instruction "pour", soyez créatif, vous pouvez toujours trouver une meilleure façon, par exemple, comme celle-ci.

var arr = ['item 1', 'item 2', 'item 3', ...]; 
var list = &#39;<ul><li>' + arr.join('</li><li>') + '</li></ul>';

Je ne suis pas votre dieu, mais s'il vous plaît, croyez-moi (si vous ne me croyez pas, testez-le vous-même) - c'est de loin la méthode la plus rapide !
L'utilisation de code natif (tel que join()), indépendamment de ce que le système fait en interne, est généralement beaucoup plus rapide que le code non natif.

7. Réduire les variables globales
«Tant que plusieurs variables globales sont organisées sous un seul espace de noms, cela réduira considérablement l'interaction avec d'autres applications, composants ou classes. ”——Douglas Crockford

var name = 'Jeffrey'; 
var lastName = 'Way'; 
function doSomething() {...} 
console.log(name); // Jeffrey -- 或 window.name// 更好的做法var DudeNameSpace = { 
   name : 'Jeffrey', 
   lastName : 'Way', 
   doSomething : function() {...} 
} 
console.log(DudeNameSpace.name); // Jeffrey

Remarque : il s'agit simplement de "DudeNameSpace", qui doit être choisi en pratique.

8. Ajoutez des commentaires au code
Cela semble inutile, mais croyez-moi, essayez d'ajouter des commentaires plus raisonnables à votre code. Lorsque vous repensez à votre projet quelques mois plus tard, vous ne pourrez peut-être pas vous souvenir de vos pensées initiales. Ou que se passe-t-il si l’un de vos collègues doit apporter des modifications à votre code ? Dans l’ensemble, l’ajout de commentaires à votre code est une partie importante.

// 循环数组，输出每项名字（译者注：这样的注释似乎有点多余吧）for(var i = 0, len = array.length; i < len; i++) {
   console.log(array[i]); 
}

9. Adopter l'amélioration progressive
Assurer une dégradation fluide lorsque javascript est désactivé. Nous sommes toujours tentés de penser : « La plupart de mes visiteurs ont déjà activé JavaScript, donc je n'ai pas à m'inquiéter. » Cependant, c'est une idée fausse.
Avez-vous déjà pris un moment pour voir à quoi ressemble votre belle page avec javascript désactivé ? (Cela est facile à faire en téléchargeant l'outil Web Developer (Note du traducteur : les utilisateurs de Chrome le téléchargent dans l'App Store, les utilisateurs d'IE le configurent dans les Options Internet)), mais cela risque de fragmenter votre site Web. En règle générale, concevez votre site en supposant que JavaScript est désactivé, puis, sur cette base, améliorez progressivement votre site.

10. Ne transmettez pas de paramètres de chaîne à "setInterval" ou "setTimeout"
Considérez le code suivant :

setInterval( 
"document.getElementById('container').innerHTML += 'My new number: ' + i", 3000 );

不仅效率低下，而且这种做法和"eval"如出一辙。从不给setInterval和setTimeout传递字符串作为参数，而是像下面这样传递函数名。

setInterval(someFunction, 3000);

11.不要使用"with"语句
乍一看，"with"语句看起来像一个聪明的主意。基本理念是,它可以为访问深度嵌套对象提供缩写，例如……

with (being.person.man.bodyparts) { 
   arms = true; 
   legs = true; 
}

而不是像下面这样：

being.person.man.bodyparts.arms = true; 
being.person.man.bodyparts.legs= true;

不幸的是，经过测试后，发现这时“设置新成员时表现得非常糟糕。作为代替，您应该使用变量，像下面这样。

var o = being.person.man.bodyparts; 
o.arms = true; 
o.legs = true;

12.使用{}代替 new Ojbect()
在JavaScript中创建对象的方法有多种。可能是传统的方法是使用"new"加构造函数，像下面这样:

ar o = new Object(); 
o.name = 'Jeffrey'; 
o.lastName = 'Way'; 
o.someFunction = function() { 
   console.log(this.name); 
}

然而，这种方法的受到的诟病不及实际上多。作为代替,我建议你使用更健壮的对象字面量方法。
更好的做法

var o = { 
   name: 'Jeffrey', 
   lastName = 'Way', 
   someFunction : function() { 
      console.log(this.name); 
   } 
};

注意，果你只是想创建一个空对象，{}更好。
13.使用[]代替 new Array()
这同样适用于创建一个新的数组。
例如：

var a = new Array(); 
a[0] = "Joe"; 
a[1] = 'Plumber';// 更好的做法：var a = ['Joe','Plumber'];

“javascript程序中常见的错误是在需要对象的时候使用数组，而需要数组的时候却使用对象。规则很简单：当属性名是连续的整数时，你应该使用数组。否则，请使用对象”——Douglas Crockford
14.定义多个变量时，省略var关键字，用逗号代替

var someItem = 'some string'; 
var anotherItem = 'another string'; 
var oneMoreItem = 'one more string';// 更好的做法var someItem = 'some string', 
    anotherItem = 'another string', 
    oneMoreItem = 'one more string';

应而不言自明。我怀疑这里真的有所提速，但它能是你的代码更清晰。
15.使用Firebug的"timer"功能优化你的代码
在寻找一个快速、简单的方法来确定操作需要多长时间吗？使用Firebug的“timer”功能来记录结果。

function TimeTracker(){ 
 console.time("MyTimer"); 
 for(x=5000; x > 0; x--){} 
 console.timeEnd("MyTimer"); 
}

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!