12 façons d'écrire du code JS de haute qualité (vous apprendre à écrire du code de haute qualité)

Cet article vous explique comment suivre 12 méthodes pour écrire du code JS de haute qualité. Les amis qui en ont besoin peuvent s'y référer.

L'écriture de code JS de haute qualité rend non seulement les programmeurs confortables à regarder, mais améliore également la vitesse d'exécution du programme. Voici la méthode utilisée par l'éditeur pour l'organiser :

. 1. Comment écrire du code maintenable

Lorsqu'un bug survient, il est préférable que vous puissiez le corriger immédiatement. À ce stade, les quatre façons de résoudre le problème sont disponibles. ton esprit est toujours très clair. Sinon, vous passez à d'autres tâches ou le bug apparaît après un certain temps, et vous oubliez ce code spécifique au bout d'un moment. Regarder le code nécessite :

1. Passer du temps à apprendre et à comprendre 2. Le. le temps pour résoudre ce problème est de comprendre le code du problème qui doit être résolu

Il y a un autre problème, surtout pour les grands projets ou les entreprises, le gars qui corrige le bug n'est pas la personne qui a écrit le code (et le le gars qui a trouvé le bug et ce n'est pas la même personne qui corrige le bug). Par conséquent, vous devez réduire le temps nécessaire à la compréhension du code, qu’il s’agisse d’un code que vous avez écrit il y a quelque temps ou d’un code écrit par d’autres membres de l’équipe. Il s'agit du résultat net (revenus) et du bonheur des développeurs, car nous devrions créer des choses nouvelles et passionnantes au lieu de passer des heures et des jours à maintenir le code existant. Par conséquent, il est crucial de créer du code maintenable. Généralement, le code maintenable répond aux principes suivants :

Lisibilité

Cohérence

Prévisibilité

On dirait qu'il a été écrit par la même personne

Documenté

2. Variables globales Le problème avec

Le problème avec les variables globales est que ces variables globales sont partagées par tout le code de votre application JavaScript et de la page Web, elles vivent dans le même espace de noms global, donc lorsque deux parties différentes d'un programme définissent des variables globales avec le même nom mais des fonctions différentes, les conflits de noms sont inévitables. Il est également courant que les pages Web contiennent du code qui n'a pas été écrit par le développeur de la page, par exemple :

Bibliothèque JavaScript tierce

Code de script de l'annonceur

Code du script de suivi et d'analyse des utilisateurs tiers

Différents types de widgets, drapeaux et boutons

Par exemple, ce script tiers définit une variable globale, appelée A ; définissez ensuite également une variable globale nommée A dans votre fonction. Le résultat est que les dernières variables écrasent les précédentes et que le script tiers devient soudainement invalide ! Et il est difficile de le déboguer.

Donc : il est important d'utiliser le moins possible les variables globales, comme le mode espace de noms ou les fonctions qui sont automatiquement exécutées immédiatement, mais la chose la plus importante pour garder les variables globales au minimum est de toujours utiliser var pour déclarer des variables.

3. Oubliez les effets secondaires de var

Il existe quelques petites différences entre les variables globales implicites et les variables globales explicitement définies, ce qui passe par L'opérateur delete a la possibilité de laisser les variables non définies. Les détails sont les suivants :

Les variables globales créées via var (créées dans tout programme autre que les fonctions) ne peuvent pas être supprimées.

Les variables globales implicites non créées via var (qu'elles soient créées ou non dans une fonction) peuvent être supprimées.

Les variables globales implicites ne sont donc pas vraiment des variables globales, mais ce sont des propriétés de l'objet global. Les attributs peuvent être supprimés via l'opérateur delete, mais les variables ne le peuvent pas. Je n'écrirai pas le code spécifique.

4. Accéder à l'objet global

Dans le navigateur, l'objet global est accessible n'importe où dans le code via l'attribut window (sauf si vous avez fait quelque chose d'un peu scandaleux, comme déclarer une variable locale nommée window). Mais dans d'autres contextes, cette propriété de commodité pourrait être appelée autrement (ou même ne pas être disponible dans le programme). Si vous devez accéder à l'objet global sans identifiant de fenêtre codé en dur, vous pouvez effectuer les opérations suivantes dans la portée de la fonction à n'importe quel niveau :

var global = (function () { return this; }());

5. boucle for

Dans la boucle for, vous pouvez parcourir les valeurs de tableaux ou d'objets de type tableau, tels que les arguments et les objets HTMLCollection. La forme habituelle de la boucle est la suivante :

// Deuxième meilleure boucle pour (var i = 0; i < myarray.length; i++) { // Utilisez myarray[i] pour faire quelque chose>

L'inconvénient de cette forme de boucle est qu'il faut obtenir la longueur du tableau à chaque fois qu'il est bouclé. Cela réduit votre code, surtout lorsque myarray n'est pas un tableau, mais un objet HTMLCollection.

6. Ne pas étendre le prototype intégré

扩增构造函数的prototype属性是个很强大的增加功能的方法，但有时候它太强大了。增加内置的构造函数原型（如Object(), Array(), 或Function()）挺诱人的，但是这严重降低了可维护性，因为它让你的代码变得难以预测。使用你代码的其他开发人员很可能更期望使用内置的 JavaScript方法来持续不断地工作，而不是你另加的方法。另外，属性添加到原型中，可能会导致不使用hasOwnProperty属性时在循环中显示出来，这会造成混乱。

七、避免隐式类型转换

JavaScript的变量在比较的时候会隐式类型转换。这就是为什么一些诸如：false == 0 或 “” == 0 返回的结果是true。为避免引起混乱的隐含类型转换，在你比较值和表达式类型的时候始终使用===和!==操作符。

var zero = 0; if (zero === false) { // 不执行，因为zero为0, 而不是false } // 反面示例 if (zero == false) { // 执行了... }

八、避免eval()

如果你现在的代码中使用了eval()，记住该咒语“eval()是魔鬼”。此方法接受任意的字符串，并当作JavaScript代码来处理。当有 问题的代码是事先知道的（不是运行时确定的），没有理由使用eval()。如果代码是在运行时动态生成，有一个更好的方式不使用eval而达到同样的目 标。例如，用方括号表示法来访问动态属性会更好更简单：

// 反面示例 var property = "name"; alert(eval("obj." + property)); // 更好的 var property = "name"; alert(obj[property]);

使用eval()也带来了安全隐患，因为被执行的代码（例如从网络来）可能已被篡改。这是个很常见的反面教材，当处理Ajax请求得到的JSON 相应的时候。在这些情况下，最好使用JavaScript内置方法来解析JSON相应，以确保安全和有效。若浏览器不支持JSON.parse()，你可 以使用来自JSON.org的库。

同样重要的是要记住，给setInterval(), setTimeout()和Function()构造函数传递字符串，大部分情况下，与使用eval()是类似的，因此要避免。在幕后，JavaScript仍需要评估和执行你给程序传递的字符串：

// 反面示例 setTimeout("myFunc()", 1000); setTimeout("myFunc(1, 2, 3)", 1000); // 更好的 setTimeout(myFunc, 1000); setTimeout(function () { myFunc(1, 2, 3); }, 1000);

使用新的Function()构造就类似于eval()，应小心接近。这可能是一个强大的构造，但往往被误用。如果你绝对必须使用eval()，你 可以考虑使用new Function()代替。有一个小的潜在好处，因为在新Function()中作代码评估是在局部函数作用域中运行，所以代码中任何被评估的通过var 定义的变量都不会自动变成全局变量。另一种方法来阻止自动全局变量是封装eval()调用到一个即时函数中。

考虑下面这个例子，这里仅un作为全局变量污染了命名空间。

console.log(typeof un); // "undefined" console.log(typeof deux); // "undefined" console.log(typeof trois); // "undefined" var jsstring = "var un = 1; console.log(un);"; eval(jsstring); // logs "1" jsstring = "var deux = 2; console.log(deux);"; new Function(jsstring)(); // logs "2" jsstring = "var trois = 3; console.log(trois);"; (function () { eval(jsstring); }()); // logs "3" console.log(typeof un); // number console.log(typeof deux); // "undefined" console.log(typeof trois); // "undefined"

另一间eval()和Function构造不同的是eval()可以干扰作用域链，而Function()更安分守己些。不管你在哪里执行 Function()，它只看到全局作用域。所以其能很好的避免本地变量污染。在下面这个例子中，eval()可以访问和修改它外部作用域中的变量，这是 Function做不来的（注意到使用Function和new Function是相同的）。

(function () { var local = 1; eval("local = 3; console.log(local)"); // logs "3" console.log(local); // logs "3" }()); (function () { var local = 1; Function("console.log(typeof local);")(); // logs undefined

九、编码规范

建立和遵循编码规范是很重要的，这让你的代码保持一致性，可预测，更易于阅读和理解。一个新的开发者加入这个团队可以通读规范，理解其它团队成员书写的代码，更快上手干活。

十、缩进

代码没有缩进基本上就不能读了。唯一糟糕的事情就是不一致的缩进，因为它看上去像是遵循了规范，但是可能一路上伴随着混乱和惊奇。重要的是规范地使用缩进。

十一、注释

你必须注释你的代码，即使不会有其他人向你一样接触它。通常，当你深入研究一个问题，你会很清楚的知道这个代码是干嘛用的，但是，当你一周之后再回来看的时候，想必也要耗掉不少脑细胞去搞明白到底怎么工作的。

Évidemment, les commentaires ne peuvent pas aller aux extrêmes : chaque variable distincte ou une ligne distincte. Cependant, vous devez généralement documenter toutes les fonctions, leurs arguments et valeurs de retour, ou toute technique ou méthode inhabituelle. N'oubliez pas que les commentaires peuvent donner de nombreux indices aux futurs lecteurs de votre code ; les lecteurs n'ont besoin (sans trop lire) que des commentaires et des noms d'attributs de fonction pour comprendre votre code. Par exemple, lorsque vous disposez de cinq ou six lignes de programme qui effectuent une tâche spécifique, le lecteur peut ignorer ce détail si vous fournissez une description de l'objectif de la ligne et de la raison pour laquelle elle se trouve là. Il n’existe pas de règle absolue concernant le rapport commentaires/code, et certaines parties du code (telles que les expressions régulières) peuvent contenir plus de commentaires que de code.

12. Les appareils orthodontiques bouclés {}

Les appareils orthodontiques (également appelés appareils orthodontiques, les mêmes ci-dessous) doivent toujours être utilisés, même s'ils Lorsque facultatif. Techniquement, les accolades ne sont pas nécessaires s'il n'y a qu'une seule instruction dans un in ou un for, mais vous devez quand même les utiliser. Cela rend le code plus cohérent et plus facile à mettre à jour.

J'ai compilé ce qui précède pour vous, j'espère que cela vous sera utile à l'avenir.

Articles associés :

jsRésumé des avantages et inconvénients des trois méthodes d'appel

Chargement JS Explication détaillée de jquery.Méthode js

Explication détaillée de la méthode JS de génération de nombres aléatoires et de séquences aléatoires dans une plage spécifiée

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!