從回調地獄中保存

> javascript回調：從“回調地獄”到異步優雅

>開發人員經常會不屑一顧，將回調與可怕的“回調地獄”相關聯。 但是，回調是JavaScript異步性質的基礎。 鑰匙不是避免回調，而是掌握其有效使用。本文探討了管理回調的策略，從有問題的嵌套過渡到更清潔，更可維護的異步代碼。

>

完全丟棄回調類似於用沐浴水扔掉嬰兒。它們是一個強大的工具，替換它們通常會改變問題。 讓我們探討合理的編程實踐如何在避免陷阱的同時利用回調的力量。 我們將重點介紹堅實的原則來指導我們的方法。

鑰匙要點：

1. >理解和掌握回調：回調對於異步JavaScript至關重要。 本文強調有效的回調管理，而不是消除。
2. > 避免回調地獄：我們將檢查諸如使用命名函數，應用依賴性反轉原理以及利用多態性的技術，以獲取更清潔的，更可重複使用的代碼。
>。
3. 現代JavaScript解決方案：討論發展為諾言和async/await，演示這些功能如何簡化異步編程，並為“回調地獄”提供路徑。

什麼是回調地獄？ >回調是作為參數傳遞給另一個函數的函數，在以後的未指定時間內執行。 接收功能確定何時調用它。 這對於像ajax請求一樣的異步操作至關重要。 > 當異步代碼依靠嵌套回調，創建深度縮進的結構（臭名昭著的“厄運金字塔”）時，問題出現了。 考慮使用

>模擬異步調用的示例：>

這個嵌套的結構很快變得不可讀且難以維護。

> setTimeout

解決問題：命名函數和改進的結構

<code class="language-javascript">setTimeout(function (name) {
  var catList = name + ',';
  // ... more nested setTimeouts ...
}, 1, 'Panther');</code>

>

>用命名函數替換匿名函數可提高可讀性：>

雖然消除了視覺金字塔，但它引入了潛在的範圍問題和代碼重複。

deponenty反演

>

<code class="language-javascript">setTimeout(getPanther, 1, 'Panther');

function getPanther(name) {
  catList = name + ',';
  setTimeout(getJaguar, 1, 'Jaguar');
}
// ... more named functions ...</code>

依賴性反轉原則提倡編碼抽象而不是實現。 我們可以通過為我們的回調創建合同來實現這一目標：

>

此功能現在接受回調（）作為依賴項，將核心邏輯從特定的實現詳細信息中解耦。 。 靈活性

多態回調

<code class="language-javascript">function buildFerociousCats(list, returnValue, fn) {
  setTimeout(function asyncCall(data) {
    var catList = list === '' ? data : list + ',' + data;
    fn(catList);
  }, 1, returnValue);
}</code>

為了提高靈活性，我們可以引入多態性。 這使我們能夠在不更改核心功能的情況下更改回調的行為：

現在，

<code class="language-javascript">setTimeout(function (name) {
  var catList = name + ',';
  // ... more nested setTimeouts ...
}, 1, 'Panther');</code>

>對象封裝了列表和定界符函數，可以輕鬆地在不同的定界數（例如，逗號，管道）之間切換。

cat承諾和異步/等待增強的可讀性

>承諾，/

提供了處理異步操作的更多結構化方法。 包裝

在諾言中：async await buildFerociousCats>這允許使用

進行清潔鏈。

<code class="language-javascript">setTimeout(getPanther, 1, 'Panther');

function getPanther(name) {
  catList = name + ',';
  setTimeout(getJaguar, 1, 'Jaguar');
}
// ... more named functions ...</code>

/

>通過允許以更同步的樣式編寫異步代碼來進一步簡化這一點：.then() async await

結論

<code class="language-javascript">function buildFerociousCats(list, returnValue, fn) {
  setTimeout(function asyncCall(data) {
    var catList = list === '' ? data : list + ',' + data;
    fn(catList);
  }, 1, returnValue);
}</code>

在JavaScript中掌握回調涉及了解其細微差別並應用合理的編程原則。 通過採用諸如命名函數，依賴性反轉，多態性，承諾和/>之類的技術，我們可以超越“回調地獄”，並創建優雅，可維護的異步JavaScript代碼。 JavaScript的靈活性賦予了良好的編程實踐；對基本原理的紮實理解是編寫高效且可讀的代碼的關鍵。

>

以上是從回調地獄中保存的詳細內容。更多資訊請關注PHP中文網其他相關文章！