JavaScript Advanced：エレガントなJavaScriptコードの書き方

コンテンツ

1.保守可能なコード

一般的に、コードが保守可能であるということは、次の特性があることを意味します。

理解しやすく、元の開発者に尋ねる必要はありません。誰でもコードの機能と実装方法を確認できます。
常識に沿って、操作がどれほど複雑であっても、コード内のすべてが論理的に見えます。
適応が容易で、データが変更された場合でも、完全に書き直す必要はありません。
拡張が容易なコード構造は、コア機能の将来の拡張をサポートするように注意深く設計されています。
デバッグが簡単で、問題が発生した場合、コードは明確な情報を提供し、問題を直接特定できます。

2.コーディング仕様-読みやすさ

コードを保守しやすくするには、最初にコードを読み取り可能にする必要があります。コードのインデントは、読みやすさを確保するための重要な基盤です。全員が同じインデントを使用すると、プロジェクト全体のコードが理解しやすくなります。インデントは通常、タブキーではなくスペースの数で定義されます。これは、タブキーの表示方法がテキストコンパイラによって異なり、通常、インデントは4スペースであるためです。
読みやすさのもう1つの側面は、コードコメントです。ほとんどのプログラミング言語では、メソッドごとにコメントを書くことが広く受け入れられています。
一般的に、コメントは次の場所に書き込む必要があります。

関数とメソッド、各関数とメソッドは、その目的、およびタスクを実行するために使用されるアルゴリズムを説明するためにコメント化する必要があります。同時に、関数またはメソッドの前提、各パラメーターの意味、および関数が値を返すかどうかも明確に記述してください。
大きなコードブロック、複数行のコードですが、単一のタスクを完了するために使用される場合は、完了するタスクを明確に記述するために、前にコメントを付ける必要があります。
複雑なアルゴリズムが問題を解決するために独自の方法を使用する場合は、注釈を使用して説明する必要があります。これは、他の人がコードをレビューするのに役立つだけでなく、将来自分がコードをレビューするのにも役立ちます。
ブラックテクノロジー、いくつかの特別な方法、および特定の仮定を使用します。

3.変数と関数の命名

コード内の変数と関数の適切な命名は、その可読性と保守性にとって重要です。

変数名はnameである必要があります。
関数名は動詞で始まる必要があります。
変数、関数、およびメソッドはすべて小文字で始まり、キャメルケースを使用します。
名前はできるだけわかりやすく直感的である必要がありますが、冗長すぎないようにしてください。

第四に、緩い結合

アプリケーションのある部分が別の部分に緊密に依存しすぎると、コードが緊密に結合され、保守が困難になります。
典型的な問題は、あるオブジェクトが別のオブジェクトを直接参照しているため、一方を変更するともう一方を変更しなければならない場合があることです。密結合のソフトウェアは保守が難しく、頻繁に書き直す必要があります。

1.HTMLとJavaScriptを分離します

Web開発で最も一般的な結合はHTMLとJavaScriptです。Webページでは、HTMLとJavaScriptはさまざまなレベルのソリューションを表します。HTMLはデータであり、JavaScriptは動作です。これは、それらが相互運用するためには、2つのテクノロジーを異なる方法でリンクする必要があるためです。残念ながら、これらの方法のいくつかは、HTMLとJavaScriptの緊密な結合につながります。
JavaScriptをHTMLに直接埋め込むか、

<!-- 使用<script>造成紧密耦合 -->
<script>
	document.write("hello 哪吒编程");
</script>

<!-- 使用事件处理程序属性造成紧密耦合 -->
<input type="button" value="Click me" onclick="dosomething()"/>

これは技術的には問題ありませんが、実際には、データを表すHTMLと動作を定義するJavaScriptを緊密に結合します。理想的には、HTMLとJavaScriptを完全に分離し、JavaScriptを外部ファイルからインポートして、DOMを使用して追加する必要があります。行動。
一般に、JavaScriptで大量のHTMLを作成することは避けてください。繰り返しになりますが、これは主に、データ層と動作層がそれぞれの機能を実行することを保証するためであり、問題が発生したときに問題を特定しやすくなります。

2.CSSとJavaScriptを分離します

Webアプリケーションのもう1つのレイヤーはCSSで、ページのスタイル設定を担当します
。JavaScriptとCSSは密接に関連しており、どちらもHTMLの上に構築されるため、一緒に使用されることがよくあります。
CSSとJavaScriptが密接に関連している例：

element.style.color = "red";
element.style.backgroundColor = "blue";

3.アプリケーションロジックとイベントハンドラーを分離します

すべてのWebアプリケーションには、さまざまなイベントをリッスンする多数のイベントハンドラーがあります。ただし、アプリケーションロジックをイベントハンドラーから分離できるものはほとんどありません。
アプリケーションロジックとビジネスロジックを分離する際に注意する必要があるいくつかのポイントを次に示します。

イベントオブジェクトを他のメソッドに渡さないでください。イベントオブジェクトで必要なデータのみを渡してください。
アプリケーションで可能なすべての操作は、イベントハンドラーなしで実行する必要があります。
イベントハンドラーはイベントを処理し、後続の処理をアプリケーションロジックに任せる必要があります。
上記を実行すると、コードの保守性が大幅に向上するだけでなく、将来のテストと開発に多くの可能性が開かれます。

5.コーディング規約

1.オブジェクトの所有権を尊重する
2.グローバル変数を宣言しない
他のオブジェクトや関数の名前空間として作成できるグローバル変数は最大で1つです。
3.nullを比較しないでください
4.定数を使用してください

繰り返し値
ユーザーインターフェイス文字列
URL
変動する可能性のある値

6.スコープの認識

スコープチェーン内のスコープの数が増えると、現在のスコープチェーン外の変数にアクセスするために必要な時間も増えます。スコープチェーンをトラバースする必要があるため、グローバル変数へのアクセスはローカル変数へのアクセスよりも常に遅くなります。ドメインチェーンタイムイニシアチブは、コードのパフォーマンスを向上させることができます。

1.グローバルルックアップを避ける

コードのパフォーマンスを向上させるための非常に重要なことの1つは、おそらくグローバルルックアップに注意することです。グローバル変数と関数は、スコープチェーンのルックアップのため、ローカル変数と比較して常に最も時間がかかります。
ドキュメントがforループで複数回参照される場合、スコープチェーンのルックアップのみが必要なため、ドキュメントオブジェクトへの参照をローカルスコープに保存することで、この関数のパフォーマンスを大幅に向上させることができます。

2.withステートメントは適用されません

withステートメントは、パフォーマンスが重要なコードでは避ける必要があります。関数と同様に、withステートメントは独自のスコープを作成するため、その中のコードのスコープチェーンを長くします。withステートメント内の反磁性は、スコープチェーンルックアップにもう1つのステップがあるため、その外で実行されるコードよりも低速である必要があります。

セブン、サイクルを最適化する

したがって、プログラミングで一般的に使用される構文構造whileループはJavaScriptで非常に一般的です。ループは同じコードを複数回実行するため、ランタイムが自動的に増加するため、これらのループの最適化はパフォーマンス最適化の重要な部分です。

1.終了条件を簡素化します

ループがループされるたびに終了条件が計算されるため、可能な限り高速にする必要があります。

2.ループ本体を簡素化します

ループ本体は最も時間のかかる部分ですので、可能な限り最適化してください。ループの外に簡単に移動できる集中的な計算が含まれていないことを確認してください。

3.使用後のテストサイクル

最も一般的なループはforループとwhileループで、どちらもテストファーストループです。do-whileは、終了条件の初期評価を回避するため、より高速なテスト後のループです。

4.ループを展開します

ループの数が制限されている場合は、通常、ループを破棄して関数を複数回呼び出す方が高速です。

8.文を最小限に抑える

JavaScriptコードステートメントの数は、実行速度に影響します。複数の操作を実行できるステートメントは、それぞれ1つの操作を実行する複数のステートメントよりも高速です。次に、最適化の目標は、スクリプト全体の実行時間を短縮するために組み合わせることができるステートメントを見つけることです。

1.複数の変数宣言

2.反復値を挿入します

反復値（インクリメントまたはデクリメント）を使用する場合は常に、可能な限り複合ステートメントを使用してください。
例：
let name = values[i++]
代替

let name = values[i];
i++;

3.配列とオブジェクトリテラルを使用します

9、DOMの相互作用を最適化する

すべてのJavaScriptコードで、DOMを含む部分は間違いなく非常に遅いです。ページの全体または一部を頻繁に再レンダリングする必要があるため、DOMの操作と操作には多くの時間がかかります。また、DOMには大量の情報が含まれているため、一見単純な操作には長い時間がかかる場合があります。DOMの相互作用を最適化する方法を理解すると、スクリプトの実行を大幅に高速化できます。

1.リアルタイムの更新を最小限に抑える

DOMにアクセスする場合、アクセスされた部分が表示されたページの一部である限り、DOMはリアルタイムの更新操作を実行しています。これは、ユーザーが表示できるようにページの表示をすぐに更新する必要があるため、ライブ更新と呼ばれます。そのような更新はすべて、ページ上の文字を挿入するか、コンテンツの一部を削除するかにかかわらず、パフォーマンスの低下を招きます。これは、ブラウザが更新を実行する前に、このために何千ものメトリックを再計算する必要があるためです。リアルタイムの更新が多いほど、コードの実行に時間がかかります。

2.innerHTMLを使用する

ページに新しいDOMノードを作成するには、createElement（）やappendChild（）などのDOMメソッドを使用する方法と、innerHTMLを使用する方法の2つがあります。少数のDOM更新の場合、2つの手法にほとんど違いはありませんが、多数のDOM更新の場合、innerHTMLを使用すると、標準のDOMメソッドを使用して同じ構造を作成するよりもはるかに高速になります。
innerHTMLに値を割り当てる場合、バックグラウンドでHTMLパーサーが作成され、JavaScriptのDOMメソッドの代わりにネイティブDOM呼び出しを使用してDOM構造が作成されます。これは、インタープリターコードではなくコンパイル済みコードを実行するため高速です。

3.委任されたイベントを使用する

ほとんどのWebアプリケーションは、ユーザーとの対話にイベントハンドラーを多用します。ページ内のイベントハンドラーの数は、ページがユーザーの操作に応答する速度に直接関係します。ページの応答への影響を減らすために、イベントの委任を可能な限り使用する必要があります。
イベントの委任は、イベントのバブリングを利用します。バブリングイベントは、イベントターゲットではなく、ターゲットの任意の祖先要素で処理できます。この知識に基づいて、イベントハンドラーを複数のターゲットを担当する上位レベルの要素に追加できます。ページ全体のイベントはドキュメントレベルで処理できるため、可能な限り、イベントハンドラーをドキュメントレベルで追加する必要があります。

4 HTMLCollection

Webアプリケーションにはパフォーマンスの大きな問題があるため、HTMLCollectionにアクセスする限り、そのプロパティであろうとメソッドであろうと、クエリドキュメントがトリガーされ、このクエリにはかなりの時間がかかります。HTMLCollectionへのアクセス数を減らすと、大幅に時間がかかります。スクリプトのパフォーマンスを向上させます。
HTMLCollectionアクセスを最適化するための最も重要な場所は、ループです。

10.JavaScriptマインドマップ

ここに画像の説明を挿入

公開番号に注意してください：Nezhaプログラミング

Nezhaプログラミングは毎週高品質の記事を更新しています。注意を払った後、[CSDN]に返信して、Javaマインドマップ、Java学習資料、および大規模なインタビュー資料を受け取ります。

私にWeChatを追加してください：18525351592

技術交流グループにあなたを引き込み、グループには多くの技術ビッグウィッグがあり、技術を一緒に交換し、一緒に前進し、一緒に大きな工場に入り、技術書を無料で購入できます~~