Utilisation pratique de javascript pour les débutants

1. Préférez utiliser === au lieu de ==

JavaScript utilise deux opérateurs d'égalité : ===|!== et ==|!=. Il est généralement considéré comme le plus efficace pour. comparaison La meilleure pratique consiste à utiliser l'ancien ensemble d'opérateurs.

"Si les deux opérandes ont le même type et la même valeur, alors le résultat de la comparaison === est vrai, et le résultat de !== la comparaison est fausse."                                   . Essence du langage JavaScript

Cependant, si vous utilisez == et !=, vous rencontrerez des problèmes lors de la comparaison d'opérandes de différents types. Dans ce cas, cet ensemble d'opérateurs tentera de Inutile coercition de la valeur d'un nombre.

2. Eval est synonyme de mauvais

Pour ceux qui ne connaissent pas JavaScript, la fonction "evel" nous donne accès au compilateur JavaScript, on peut récupérer le résultat de l'exécution de la chaîne en passant un paramètre de chaîne à "eval".

Cela réduira non seulement considérablement les performances de votre script, mais entraînera également un énorme risque de sécurité, car si vous en avez la possibilité. transmettez trop de texte brut, évitez autant que possible d'utiliser la fonction eval.

3 Ne soyez pas paresseux

Sur un nombre impair, vous aurez peut-être en effet la chance d'en omettre la plupart. du texte. Parenthèses et points-virgules. La plupart des navigateurs peuvent enregistrer correctement l'extrait de code suivant :

if(someVarianbleExists)
x = false

Cependant, considérez à nouveau ce code :

if(someVariableExists)
 
x=false
anotherFunctionCall();

Certaines personnes peuvent penser qu'un morceau du code équivaut à :

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

Vous auriez également dû remarquer que l'indentation dans le code imite la fonction des accolades. Inutile de dire que c'est une pratique très terrible et qu'elle doit être évitée à tout prix. . La seule façon d'omettre les accolades est d'utiliser une déclaration sur une seule ligne, mais même dans ce cas, c'est très controversé

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

Pensez toujours à l'avenir

Si quelque chose arrive. à l'avenir Parfois, vous devrez ajouter plus de commandes à cette instruction if, alors que devez-vous faire ? Vous n'avez pas d'autre choix que de réécrire ce code. L'essentiel pour résoudre ce problème est d'être prudent lorsque vous omettez d'écrire.

4. Utilisez JS Lint

JSLint est un débogueur écrit par Douglas Crockford. Copiez simplement votre script dedans et il résoudra rapidement tous les problèmes évidents dans votre code et votre erreur.

"JSLint prend une copie du code source JavaScript et analyse le code. Si un problème est détecté, un message est renvoyé décrivant le problème et son emplacement approximatif dans le code source. Bien que le problème soit souvent une erreur de syntaxe, ce n'est pas nécessairement le cas. .JSLint vérifiera également certaines habitudes de style et problèmes structurels. Cela ne prouve pas si votre code est correct, mais fournit simplement une autre paire d'yeux pour vous aider à trouver des problèmes avant de terminer l'écriture du code du script. n'attrapez pas d'erreurs stupides.

5. Placez le script en bas de page

Cette technique est également recommandée dans les articles précédents de cette série. Comme elle est tout à fait appropriée, je Je collerai ces informations directement ici.

Rappelez-vous : l'objectif principal de cette bonne pratique est de charger la page le plus rapidement possible pour l'utilisateur. Lors du chargement d'un script, le navigateur ne peut pas continuer jusqu'à ce qu'il soit entièrement terminé. Le fichier de script est chargé. Par conséquent, l'utilisateur doit attendre plus longtemps avant de remarquer une quelconque progression.

Si le fichier JS a simplement pour but d'ajouter des fonctionnalités - par exemple, après avoir cliqué sur un certain bouton -, placez ces fichiers au niveau du fichier. bottom, avant la balise de fermeture du corps. Il s'agit certainement d'une meilleure pratique

Meilleure pratique

6. Déclarez les variables en dehors de l'instruction For

<p>And now you know my favorite kinds of corn. </p> <script type="text/javascript" src="path/to/file.js?1.1.11">
</script> <script type="text/javascript" src="path/to/anotherFile.js?1.1.11"></script> </body> </html>

Lors de l'exécution d'un long. 'for', laissez simplement le moteur d'interprétation faire le travail qu'il doit faire

Exemple :

Mauvaise pratique :

Notez que chaque itération ci-dessus. L'extrait de code doit vérifier la longueur du tableau. Et à chaque fois, il doit parcourir l'arborescence DOM pour trouver l'élément 'conteneur' - comme c'est inefficace !!!

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); }

Meilleure approche

7. Le moyen le plus rapide de créer une chaîne

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

Lorsque le parcours est requis Lorsque vous travaillez avec un tableau ou un objet, n'utilisez pas toujours votre instruction « for » pratique, soyez créatif et trouvez le moyen le plus rapide d'obtenir le travail done.

"Je ne m'embêterai pas avec des benchmarks. Vous n'aurez qu'à me faire confiance (ou à le tester vous-même) - c'est de loin le moyen le plus rapide ! ”

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

L'utilisation de méthodes natives (telles que join()), indépendamment de ce qui se passe derrière le niveau d'abstraction, est généralement beaucoup plus rapide que n'importe quelle méthode non native.

8. Réduire les variables globales

En encapsulant des éléments globaux dans un seul espace de noms, vous pouvez réduire considérablement la probabilité de confusion dans les interactions avec d'autres applications, composants et bibliothèques de codes.

Meilleure approche

 var name = 'jeffrey';
var lastname = 'way';
function doSomething(){...}
console.log()

9. Commentez votre code

var DudeNameSpace = {
name:'Jeffrey';
lastname:'way',
doSometing: function(){...}
}
console.log(DudeNameSpace.name);

Cela peut paraître inutile au début, mais croyez-moi, vous aurez envie de commenter au mieux votre code Lorsque vous y reviendrez dans quelques mois Projet, que se passe-t-il ? Vous constatez que vous ne pouvez pas partager facilement vos réflexions originales sur chaque ligne de code. Ou, que se passe-t-il si l'un de vos collègues doit toujours modifier votre code ? 🎜> 10. Adoptez l'amélioration progressive

Considérez toujours comment gérer les situations dans lesquelles JavaScript est désactivé. Vous pensez peut-être : "La plupart des lecteurs de ma page l'ont activé, donc cela ne m'inquiète pas." problème. Cependant, cette chose est un énorme bug

.

你曾花时间去看过关闭JavaScript后你的漂亮的花动态哦是什么样么?也许他会完全破坏你的站点.按照以往经验,设计你的站点是应假设将会禁用JavaScript,那么,一旦你这样做了,那么开始渐进的增强你的网页布局吧!

11.不要传递字符串给"SetInterval"或"SetTimeout"

考虑一下如下代码:

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

这段代码不仅抵消,而且其行为与"eval"函数相同.永远不要传给字符串给SetInterval和SetTimeout.相反,颍川地一个函数名.

setInterval(someFunction, 3000);

12.不要使用"with"语句

乍一看,'with'语句似乎是个聪明的想法.基本概念是他们能够为深度嵌套对象提供一种简写方式,例如...

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

取代如下写法

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

很不幸,经过一些测试,会发现这种简写在设置新成员时表现非常糟糕.作为替代.你应该使用var.

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

13 使用{}而不是new Object()

JavaScript中有很多种穿件对象的方式.也许更传统的方式是使用''new''构造器.像这样:

var o = new Object(); o.name = 'Jeffrey'; o.lastname = 'Way'; o.someFuncion = function() { console.log(this.name); }

然而,这种方式因其行为并不是我们所想的那样而被认为是"糟糕的实践".相反,我推荐你使用更健壮的对象字面方法.

更好的写法

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

注意如果你只是想简单地创建个空对象,{}就派上用场了.

var o = {};

对象字面量使我们能够编写支持很多特性的代码,并对代码的实现者来说代码仍然相对直观,不需要直接调用构造器或维护传递给函数的参数的正确顺序,等等.

14.使用[]而不是New Array()

这同样适用于创建一个新数组

过去的写法

var a = new Array(); a[0] = 'Joe'; a[1] = 'Plumber';

更好的写法 var a = ['Joe', 'Plumber'];

Javascript中一个常见的错误是需要数组时使用对象或需要对象时使用数组,规则很简单:当属姓名是小的连续整数时,你应该使用数组,否则,使用对象

15.一长串变量? 省略''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';

相当的不言自明,我不知道这里是否有任何真正的速度提升,但是它使你的代码更加简洁了.

16.始终,始终使用分号

技术上来说,大多数浏览器都允许你省略一些分号

var someItem = 'some string' function doSomething() {     return 'something' }

话虽如此,但这是一种非常糟糕的做法,可能导致更大的问题,问题查找起来也更困难

更好的写法

var someItem = 'some string'; function doSomething() {     return 'something'; }

18.For in 语句

遍历对象内的成员时,你也会得到方法函数,为了解决这个问题,应始终将你的代码包装在一个if语句中来过滤信息

for(key in object) {     if(object.hasOwnProperty(key)) {         ... then do something...     } }

19.使用firebug的''Timer''特性来优化代码

需要一种快速简单地方法来检测一个操作花费多长时间么?

使用Firebug的timer特性记录结果

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

20.读书 面向对象的JavaScript

• JavaScript：语言精粹

• 学习jQuery 1.3

• 学习JavaScript

21.自执行函数(self-executing functions)

相比调用函数,当页面加载或调用父函数时,让函数自动执行会简单些.简单地将你的函数包装在圆括号内,并添加额外的一对圆括号,其本质上就调用了这个函数

(function doSomething() {     return {         name: 'jeff',         lastName: 'way'     };  })();

22.原始(raw)javascript代码的执行速度始终快于使用代码库

Javascript代码库,如jQuery和mootools,能够为你节省大量的编码时间--特别是使用ajax操作.话虽如此,适中谨记代码库的执行速度适中是比不上原始JavaScript代码的(假设了代码的正确性)

jQuery的each方法来做遍历非常赞,但使用原生for语句适中会快一些

23.crockford的json.parse

虽然JavaScript 2 应该有一个内置的json解析器,但我们仍旧需要自己实现.Douglas Crockford，JSON的创造者，已经实现了一个解析器供你使用。可以从这里下载。

简单地导入该脚本,你就能获得一个新的json全局对象,用于解析你的.json文件.

var response = JSON.parse(xhr.responseText); 
var container = document.getElementById('container'); 
for(var i = 0, len = response.length; i < len; i++) {     
container.innerHTML += &#39;<li>&#39; + response[i].name + &#39; : &#39; + response[i].email + &#39;</li>&#39;;
 }

24.删除''language''

在script标签内最常见的language属性,现在已经不用了  

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!