高品質の JS コードを書く 12 の方法 (高品質のコードの書き方を教える)

この記事では、高品質の JS コードを作成するための 12 の方法を説明します。これを必要とする友人は参照してください。

高品質の JS コードを作成すると、プログラマが見やすくなるだけでなく、プログラムの実行速度も向上します。

メンテナンス可能なコードの書き方 1.

バグが発生したときは、その問題を解決するための 4 つの方法がまだ頭の中にはっきりと残っていることが最善です。そうしないと、他のタスクに移るか、一定時間が経過するとバグが発生し、しばらくしてコードを確認すると、次のことが必要になります。

1. 時間をかけて問題を学習し、理解する 2.解決すべき問題コードを理解するのが最善の時期です

特に大規模なプロジェクトや企業の場合、別の問題があります。バグを修正する人はコードを書いた人ではありません (そしてバグを発見した人でもありません)バグを修正した人は同一人物ではありません）。したがって、以前に自分が書いたコードであっても、チームの他のメンバーが書いたコードであっても、コードを理解するのにかかる時間を短縮することが重要です。これは収益 (収益) と開発者の幸福に関係します。なぜなら、レガシー コードの保守に何時間も何日も費やすのではなく、新しくエキサイティングなものを構築する必要があるからです。したがって、保守可能なコードを作成することが重要です。一般に、保守可能なコードには次の原則があります:

可読性

一貫性

予測可能性

同じ人によって書かれたように見える

が文書化されている

2. グローバル変数の問題

グローバル変数の問題は、JavaScript アプリケーションと Web ページのすべてのコードがこれらのグローバル変数を共有し、それらが同じ Global 名前空間に存在することです。そのため、プログラムの 2 つの異なる部分が存在する場合、同じ名前で異なる関数を持つグローバル変数を定義すると、名前の競合が避けられません。 Web ページには、ページの開発者によって記述されていないコードが含まれることもよくあります。例:

サードパーティの JavaScript ライブラリ

広告主のスクリプト コード

サードパーティのユーザー追跡および分析スクリプト コード

さまざまなタイプのウィジェット、ロゴ、ボタン

たとえば、サードパーティのスクリプトは A という名前のグローバル変数を定義し、関数内でも A という名前のグローバル変数を定義します。その結果、後の変数によって前の変数が上書きされ、サードパーティのスクリプトが突然無効になります。そしてそれをデバッグするのは困難です。

つまり: 名前空間モードや自動的にすぐに実行される関数など、グローバル変数の使用をできるだけ少なくすることが重要ですが、グローバル変数を最小限に抑えるために最も重要なことは、常に var を使用して変数を宣言することです。

3. var の副作用を忘れてください

暗黙的なグローバル変数と明示的に定義されたグローバル変数の間には小さな違いがあります。それは、delete 演算子を使用して変数を未定義のままにする機能です。詳細は以下の通りです:

varで作成したグローバル変数(関数以外のプログラムで作成したもの)は削除できません。

var を介して作成されていない暗黙的なグローバル変数 (関数内で作成されたかどうかに関係なく) は削除できます。

つまり、暗黙的なグローバル変数は実際にはグローバル変数ではなく、グローバル オブジェクトのプロパティです。属性は delete 演算子で削除できますが、変数は削除できません。具体的なコードは書きません。

4. グローバル オブジェクトにアクセスする

ブラウザでは、(ローカル変数という名前のウィンドウを宣言するなど、とんでもないことをしない限り) window 属性を介してコード内のどこからでもグローバル オブジェクトにアクセスできます。ただし、他のコンテキストでは、この便利なプロパティは別の名前で呼ばれる場合があります (またはプログラムで使用できない場合もあります)。ハードコーディングされたウィンドウ識別子を使用せずにグローバル オブジェクトにアクセスする必要がある場合は、関数スコープの任意のレベルで次の操作を行うことができます:

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

5. for ループ

for ループ内を使用すると、引数や HTMLCollection オブジェクトなどの配列または配列に似たオブジェクトの値をループできます。通常のループ形式は次のとおりです:

// 次善のループ for (var i = 0; i この形式のループ欠点は、ループするたびに配列の長さを取得する必要があることです。これにより、特に myarray が配列ではなく HTMLCollection オブジェクトである場合に、コードが削減されます。

6. 組み込みプロトタイプを拡張しないでください

扩增构造函数的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

九、编码规范

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

十、缩进

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

十一、注释

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

明らかに、コメントは極端に、つまり変数ごとに分けたり、行を分けたりすることはできません。ただし、通常はすべての関数、そのパラメータと戻り値、または珍しいテクニックやメソッドを文書化する必要があります。コメントは、今後コードを読む人に多くの手がかりを与える可能性があることに注意してください。読者は、コードを理解するために (あまり読みすぎなくても) コメントと関数の属性名だけを必要とします。たとえば、特定のタスクを実行するプログラムが 5 行または 6 行ある場合、その行の目的とその行が存在する理由を説明すれば、読者はこの詳細をスキップできます。コードに対するコメントの比率について厳密な規則はなく、コードの一部 (正規表現など) にはコードよりも多くのコメントが含まれる場合があります。

12. 中括弧 {}

中括弧 (中括弧とも呼ばれます、以下同じ) は、オプションの場合でも常に使用する必要があります。技術的には、in または for にステートメントが 1 つしかない場合は中括弧は必要ありませんが、コードの一貫性が高まり、更新が容易になります。

上記は私があなたのためにまとめたものです。

関連記事:

js 3つの呼び出し方法のメリット・デメリットまとめ

JSでjqueryを読み込むjsメソッドの詳細説明

JSの詳細説明指定した範囲の乱数や乱数列を生成する方法

以上が高品質の JS コードを書く 12 の方法 (高品質のコードの書き方を教える)の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。