學習軌道
/
JavaScript
JavaScript
/
練習
/
水果採摘器
水果採摘器

水果採摘器

學習練習

簡介

回呼函式

回呼函式就是當作引數傳入的函式。 這種程式設計模式會在同步與非同步程式設計中建立一連串的函式呼叫。 撰寫回呼函式跟撰寫一般函式沒什麼不同;不過,回呼函式必須符合呼叫它的函式所定義的簽章。

const squareLength = 5;

// Caller function takes a callback function
function applyToSquare(callback) {
  return callback(squareLength);
}

// Callback must expect the possible argument from the calling function
function areaOfSquare(number) {
  return number * number;
}

applyToSquare(areaOfSquare); // => 25

你也可以把回呼函式寫成函式運算式、匿名函式運算式或箭頭函式運算式:

applyToSquare(function squarePerimeter(side) {
  return side * 4;
});

applyToSquare(function (side) {
  return side * 4;
});

applyToSquare((side) => {
  return side * 4;
});

說明

你正在為顧客打造一個全新的線上入口網站,讓他們能向果菜商訂購新鮮水果。果菜商有一個 API,你可以用它來查看他們是否有顧客想要的庫存。你需要建立一個小型函式庫,用來與果菜商的 API 互動。

1. 訂單成功時通知顧客

如果顧客的訂單成功,入口網站應該通知顧客。請定義onSuccess回呼函式,當果菜商有足夠的水果庫存、訂單因而成功時,這個函式會被呼叫。此函式應該呼叫匯入的notify函式,並傳入{ message: 'SUCCESS' },讓顧客知道他們的訂單成功了。

onSuccess();
// => `notify` called with `{ message: 'SUCCESS' }`

2. 訂單失敗時通知顧客

如果顧客的訂單失敗,入口網站應該通知顧客。請定義onError回呼函式,當果菜商_沒有_水果庫存,或是發生錯誤、訂單因而失敗時,這個函式會被呼叫。此函式應該呼叫匯入的notify函式,並傳入{ message: 'ERROR' },讓顧客知道他們的訂單失敗了。

onError();
// => `notify` called with `{ message: 'ERROR' }`

3. 建立 API 包裝函式來包裝果菜商的 API 訂單函式

水果訂單是透過果菜商的 API,經由提供的order函式下訂的。這個函式接受三個引數:一個_查詢_,內含所需水果的variety和quantity;一個在訂單成功時被呼叫的_回呼_函式;以及一個在訂單發生錯誤時被呼叫的_回呼_函式。

你希望讓程式碼庫不受潛在的外部變動影響,於是決定把對order函式的呼叫包裝進一個名為orderFromGrocer的新函式。請實作orderFromGrocer函式,它會嘗試透過呼叫果菜商的 APIorder函式來下訂單,並確保把傳入orderFromGrocer的引數轉發給這個 API 呼叫。

查詢的形式是一個_物件_:

const query = {
  variety: string,
  quantity: number,
};
orderFromGrocer(
  { variety: 'pear', quantity: 12 },
  exampleSuccessCallback,
  exampleErrorCallback,
);
// => `order` was called with the query and the callbacks

4. 簡化處理已下的訂單

現在顧客已經可以透過你的入口網站訂購水果了,不過你注意到自己在程式碼庫的許多地方都呼叫了orderFromGrocer函式,每次都得傳入一個query以及那兩個callback函式作為引數。你覺得這是重構程式碼的好機會,心想如果能只傳入所需水果的variety和quantity就能下訂單,應該會簡單許多。請定義postOrder輔助函式,它接受variety和quantity作為引數,並嘗試向果菜商下訂單。

postOrder('peach', 100);
// => order placed for 100 peaches
透過 GitHub 編輯 連結會在新視窗或分頁中開啟
JavaScript Exercism

準備好開始 水果採摘器 了嗎?

註冊 Exercism,透過 37 個概念159 個練習 和真人引導來學習並精通 JavaScript,全部免費。