より強力なコードを書くためのJavaScriptベストプラクティス — エラー防止

アマゾンで私の本をチェックしてくださいhttps://www.amazon.com/John-Au-Yeung/e/B08FT5NT62
今すぐ私の電子メールリストを購読http://jauyeung.net/subscribe/
JavaScriptは簡単にプログラミング言語を学ぶことです.実行して何かをするプログラムを書くのは簡単です.しかし、すべてのユースケースを説明し、堅牢なJavaScriptコードを書くのは難しいです.
この記事では、エラーを処理するコードを書くときにJSONとベストプラクティスを扱うときに、より頑健なコードを書く方法を見てみましょう.

JSONを使用するときにキャッチします。またはJSONをパースします。文字列化

JSON.parse and JSON.stringify 問題が発生した場合にエラーがスローされます.
いつでもJSON.parse エラーが発生した場合、エラーがスローされます.JSON.stringify 循環構造をJSONに変換しようとするとエラーが発生します.
したがって、我々は使用する必要がありますtry...catch 巻くJSON.stringify and JSON.parse エラーがプログラムを停止するのを防ぐために.
例えば、次のように書きます.

try {  
  const json = '{}';  
  const parsed = JSON.parse(json);  
} catch (ex) {  
  console.error(ex);  
}

それでJSON.parse JSONを解析する問題になると、プログラムをクラッシュさせません.また、置換することができますJSON.parse with JSON.stringify を使用するコードです.

eslintまたは別のリンターを使用してエラー

ESLILTはJavaScriptの標準的なリンターです.開発者が多くの種類の問題のコードまたは潜在的なバグを犯すのを防ぐために、構文エラーと混乱しているコードをチェックします.
これは、可能なエラーや役に立たないコードをチェックするルールの大きなリストを持っています.
たとえば、gettersのreturn文をチェックします.JavaScriptやクラスで何も返さないgetterを持つ点がないからです.何も返すゲッターは役に立たないです、そして、それがあるならば、それは多分間違いです.
他のものは、我々が多分使用するように、条件式で代入演算子を禁止することを含みます== or === 代わりにものを比較するために、我々は余分の等しいサインを忘れました.
そこに多くのルールがありますhttps://eslint.org/docs/rules/ .
これは、任意のプロジェクトの設定を簡単です.我々は、ちょうどインストールすることができますeslint 実行中のプロジェクトフォルダで

npm install eslint --save-dev

次に、実行して設定ファイルを作成します.

npx eslint --init

を有効にするルールをカスタマイズします.それは非常に柔軟性があり、すべてのルールのチェックを有効にする必要はありません.
また、多くのルールを追加するプラグインがたくさんあります.人気のルールはAirbnbとデフォルトのルールが含まれます.ノードも含めることができます.JSルール、角度、反応、Vueなど.

組み込みオブジェクトプロトタイプを混乱させないでください

組み込みのグローバルオブジェクトのプロトタイプを混乱させることはありません.オブジェクトObject (株)String (株)Date そして、それらのプロトタイプにおいて、インスタンスメソッドと変数を持ちます.
これらを誤って変更すると、これらの組み込みオブジェクトからインスタンスメソッドを呼び出したり、コード内で操作したりすることが多いので、コードを壊してしまう可能性があります.
ネイティブオブジェクトのメンバーには、独自のコードのメンバーとの名前の衝突もあります.
また、組み込みオブジェクトのプロトタイプを変更すると、多くの人が標準ライブラリの一部であると考えるかもしれません.
我々は人々がその間違いをして、より悪いコードを書いて、道を下により多くの問題を作成したくないです.
したがって、組み込みオブジェクトとそのプロトタイプを変更する必要はありません.
組み込みのネイティブオブジェクトが提供しない新しい機能を必要とする場合は、必要に応じて独自のコードをScratchから参照し、ネイティブの項目を組み込みます.
また、あなたのアプリケーションがターゲットになっているブラウザに存在しない新しいネイティブメソッドを使用したい場合は、PolyFillsを使用して、独自に実装するのではなく、その機能を追加できます.
写真でSean McGee をUnsplash

常に厳しいモードを使用します

JavaScriptは人々が人々がしなければならないことをたくさん行うように使用されます.
strict modeは、書き込みの対象となっていないコードを書き込みますnull or undefined 省略して、グローバル変数を誤って作成するvar (株)let or const ○○.
エラーをスローする他のものは、Object.freeze それに適用する方法.
例えば、以下のように厳格モードでは動作しません.

const foo = {};  
Object.preventExtensions(foo);  
foo.newProp = 'foo';

ただし、厳密モードでは

'use strict'  
const foo = {};  
Object.preventExtensions(foo);  
foo.newProp = 'foo';

エラーを取得しません' uncatch typeError :プロパティnewpropを追加できませんが、オブジェクトは拡張できません'.
また、JavaScriptの将来のバージョンで使用される可能性のあるキーワードや構文を使用することを禁止しています.例えば、変数を宣言できませんclass それが予約されたキーワードであるので.
デフォルトでは、すべてのJavaScriptモジュールに厳密モードが適用されます.しかし、古いスタイルのスクリプトは、デフォルトで厳密なモードを持っていません.したがって、我々はそれらが追加することによって厳しいモードを持っていることを確認する必要があります'use strict' 我々のコードのトップに.
また、追加することができます'use strict' 関数の中には、厳密にどこでも厳密なモードが必要なので、スクリプトファイルの上に置くだけです.
厳格モードでは、多くの種類のエラーをコミットするのを防ぎますので、常にそれをしなければなりません.

結論

JavaScriptコードエラーの防止はeslintとstrictモードで簡単です.彼らは私たちが悪いコードをデバッグすることから多くの時間を節約するように多くの種類のエラーを作るのを防ぎます.
また、我々は使用する必要がありますtry...catch JSONの構文解析と構文解析を行う際にエラーをキャッチします.