開発者は、しばしば軽daでコールバックを見て、恐ろしい「コールバックHell」と関連付けます。 ただし、コールバックはJavaScriptの非同期性の基本です。 キーはコールバックを避けるのではなく、効果的な使用を習得します。この記事では、コールバックを管理するための戦略を調査し、問題のあるネストからクリーン、より保守可能な非同期コードへの移行。
async
を使用して、非同期呼び出しをシミュレートします
await
問題への対処:名前付き関数と改善された構造
匿名関数を指定された関数に置き換えると、読みやすさが向上します:
これにより視覚的なピラミッドが排除されますが、潜在的なスコーピングの問題とコードの複製を導入します。
setTimeout
setTimeout(function (name) { var catList = name + ','; // ... more nested setTimeouts ... }, 1, 'Panther');
依存関係の反転原則は、実装ではなく抽象化をコーディングすることを提唱しています。 コールバックの契約を作成することでこれを達成できます:
この関数は、依存関係としてコールバック(
)を受け入れ、特定の実装の詳細からコアロジックを切り離す。 柔軟性のための多型コールバックsetTimeout(getPanther, 1, 'Panther'); function getPanther(name) { catList = name + ','; setTimeout(getJaguar, 1, 'Jaguar'); } // ... more named functions ...
柔軟性を高めるために、多型を導入できます。 これにより、コア機能を変更せずにコールバックの動作を変更できます。
setTimeout(function (name) { var catList = name + ','; // ... more nested setTimeouts ... }, 1, 'Panther');
オブジェクトはリストとデリミッター関数をカプセル化し、異なる区切り文字間の簡単な切り替え(たとえば、コンマ、パイプ)を有効にします。
cat
約束と/は、非同期操作を処理するためのより構造化された方法を提供します。 約束で
ラッピング:
async
これにより、await
を使用したクリーンなチェーンが可能になります。 buildFerociousCats
/
setTimeout(getPanther, 1, 'Panther'); function getPanther(name) { catList = name + ','; setTimeout(getJaguar, 1, 'Jaguar'); } // ... more named functions ...
.then()
結論async
await
JavaScriptでのコールバックのマスタリングには、彼らのニュアンスを理解し、サウンドプログラミングの原則を適用することが含まれます。 名前付き関数、依存関係の反転、多型、約束、
function buildFerociousCats(list, returnValue, fn) { setTimeout(function asyncCall(data) { var catList = list === '' ? data : list + ',' + data; fn(catList); }, 1, returnValue); }
以上がコールバックヘルから救われましたの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。