JavaScript 函數(shù)組合：構(gòu)建更易維護(hù)的代碼

JavaScript 函數(shù)組合是一種將多個(gè)簡單函數(shù)組合成單個(gè)更複雜函數(shù)的技術(shù)，這些函數(shù)按邏輯順序?qū)o定數(shù)據(jù)執(zhí)行子函數(shù)操作。函數(shù)應(yīng)用的順序會(huì)產(chǎn)生不同的結(jié)果。

為了編寫可維護(hù)的代碼，理解每個(gè)被組合函數(shù)的返回類型至關(guān)重要，以確保下一個(gè)函數(shù)可以正確處理它。 JavaScript 不會(huì)阻止組合返回不合適類型函數(shù)，因此這部分責(zé)任落在程序員身上。

對(duì)不熟悉函數(shù)式編程範(fàn)式的人來說，組合函數(shù)可能會(huì)使代碼看起來很複雜。但是，隨著 ES2015 語法的出現(xiàn)，使用箭頭函數(shù)，可以一行代碼創(chuàng)建簡單的組合函數(shù)，而無需特殊的組合方法。

組合函數(shù)應(yīng)該是純函數(shù)，這意味著每次將特定值傳遞給函數(shù)時(shí)，函數(shù)都應(yīng)返回相同的結(jié)果，並且函數(shù)不應(yīng)產(chǎn)生改變自身外部值的副作用。這將產(chǎn)生更簡潔、更易讀的代碼。

本文由 Jeff Mott、Dan Prince 和 Sebastian Seitz 共同評(píng)審。感謝所有 SitePoint 的同行評(píng)審者，使 SitePoint 的內(nèi)容達(dá)到最佳狀態(tài)！

函數(shù)式思維的優(yōu)勢(shì)之一是能夠使用小型、易於理解的單個(gè)函數(shù)來構(gòu)建複雜的功能。 但有時(shí)這需要反向思考問題，而不是正向思考，以便找出如何創(chuàng)建最優(yōu)雅的解決方案。在本文中，我將採用循序漸進(jìn)的方法來檢查 JavaScript 中的函數(shù)組合，並演示它如何產(chǎn)生更易於理解且錯(cuò)誤更少的代碼。

嵌套函數(shù)

組合是一種技術(shù)，它允許你將兩個(gè)或多個(gè)簡單函數(shù)組合成一個(gè)更複雜的函數(shù)，該函數(shù)按邏輯順序?qū)魅氲娜魏螖?shù)據(jù)執(zhí)行每個(gè)子函數(shù)。要獲得此結(jié)果，你需要將一個(gè)函數(shù)嵌套在另一個(gè)函數(shù)中，並對(duì)內(nèi)部函數(shù)的結(jié)果重複執(zhí)行外部函數(shù)的操作，直到產(chǎn)生結(jié)果。並且結(jié)果可能因函數(shù)應(yīng)用的順序而異。這可以使用我們已經(jīng)在 JavaScript 中熟悉的編程技術(shù)輕鬆演示，方法是將函數(shù)調(diào)用作為參數(shù)傳遞給另一個(gè)函數(shù)：

function addOne(x) {
  return x + 1;
}
function timesTwo(x) {
  return x * 2;
}
console.log(addOne(timesTwo(3))); //7
console.log(timesTwo(addOne(3))); //8

在這種情況下，我們定義了一個(gè) addOne() 函數(shù)來為一個(gè)值加 1，以及一個(gè) timesTwo() 函數(shù)將一個(gè)值乘以 2。通過將一個(gè)函數(shù)的結(jié)果作為另一個(gè)函數(shù)的參數(shù)傳入，我們可以看到如何將其中一個(gè)嵌套在另一個(gè)中會(huì)產(chǎn)生不同的結(jié)果，即使初始值相同也是如此。內(nèi)部函數(shù)先執(zhí)行，然後結(jié)果傳遞給外部函數(shù)。

命令式組合

如果你想重複執(zhí)行相同的操作序列，定義一個(gè)新函數(shù)來自動(dòng)應(yīng)用第一個(gè)函數(shù)和第二個(gè)函數(shù)可能會(huì)很方便。這可能看起來像這樣：

function addOne(x) {
  return x + 1;
}
function timesTwo(x) {
  return x * 2;
}
console.log(addOne(timesTwo(3))); //7
console.log(timesTwo(addOne(3))); //8

在這種情況下，我們手動(dòng)將這兩個(gè)函數(shù)按特定順序組合在一起。我們創(chuàng)建了一個(gè)新函數(shù)，該函數(shù)首先將傳遞的值分配給 holder 變量，然後通過執(zhí)行第一個(gè)函數(shù)，然後是第二個(gè)函數(shù)來更新該變量的值，最後返回該 holder 的值。 （請(qǐng)注意，我們使用名為holder 的變量來臨時(shí)保存我們傳入的值。對(duì)於這樣一個(gè)簡單的函數(shù)，額外的局部變量似乎是多餘的，但即使在命令式JavaScript 中，將傳入函數(shù)的參數(shù)值視為常量也是一個(gè)好習(xí)慣。局部修改它們是可能的，但這會(huì)造成關(guān)於在函數(shù)的不同階段調(diào)用時(shí)參數(shù)值是什麼的混淆。）類似地，如果我們想創(chuàng)建一個(gè)另一個(gè)新函數(shù)以相反的順序應(yīng)用這兩個(gè)較小的函數(shù)，我們可以執(zhí)行以下操作：

// ...來自上面的先前函數(shù)定義
function addOneTimesTwo(x) {
  var holder = x;
  holder = addOne(holder);
  holder = timesTwo(holder);
  return holder;
}
console.log(addOneTimesTwo(3)); //8
console.log(addOneTimesTwo(4)); //10

當(dāng)然，這段代碼開始看起來非常重複。我們的兩個(gè)新的組合函數(shù)幾乎完全相同，只是它們調(diào)用的兩個(gè)較小函數(shù)的執(zhí)行順序不同。我們需要簡化它（就像不要重複自己一樣）。此外，使用像這樣改變其值的臨時(shí)變量並不是很函數(shù)式，即使它隱藏在我們正在創(chuàng)建的組合函數(shù)內(nèi)部也是如此。底線：我們可以做得更好。

創(chuàng)建函數(shù)式組合

讓我們創(chuàng)建一個(gè)組合函數(shù)，它可以採用現(xiàn)有的函數(shù)並將它們按我們想要的順序組合在一起。為了以一致的方式做到這一點(diǎn)，而無需每次都處理內(nèi)部細(xì)節(jié)，我們必須決定要將函數(shù)作為參數(shù)傳入的順序。我們有兩個(gè)選擇。參數(shù)將分別是函數(shù)，它們可以從左到右或從右到左執(zhí)行。也就是說，使用我們提出的新函數(shù)，compose(timesTwo, addOne) 可以表示 timesTwo(addOne()) 從右到左讀取參數(shù)，或者 addOne(timesTwo()) 從左到右讀取參數(shù)。從左到右執(zhí)行參數(shù)的優(yōu)點(diǎn)是它們將以英語相同的閱讀方式讀取，這與我們命名組合函數(shù) timesTwoAddOne() 以暗示乘法應(yīng)在加法之前發(fā)生的方式非常相似。我們都知道邏輯命名對(duì)於簡潔易讀的代碼的重要性。從左到右執(zhí)行參數(shù)的缺點(diǎn)是待操作的值必須放在前面。但是，將值放在前面使得將來用其他函數(shù)組合結(jié)果函數(shù)不太方便。為了很好地解釋這種邏輯背後的思想，你無法超越 Brian Lonsdorf 的經(jīng)典視頻 Hey Underscore, You’re Doing it Wrong。 （儘管應(yīng)該注意的是，現(xiàn)在Underscore 有一個(gè)fp 選項(xiàng)可以幫助解決Brian 在將Underscore 與函數(shù)式編程庫（例如lodash-fp 或Ramda）一起使用時(shí)討論的函數(shù)式編程問題。）無論如何，我們真正想要做的是首先傳入所有配置數(shù)據(jù)，然後最後傳入要操作的值。因此，將我們的組合函數(shù)定義為讀取其參數(shù)並從右到左應(yīng)用它們最合乎邏輯。因此，我們可以創(chuàng)建一個(gè)看起來像這樣的基本組合函數(shù)：

function addOne(x) {
  return x + 1;
}
function timesTwo(x) {
  return x * 2;
}
console.log(addOne(timesTwo(3))); //7
console.log(timesTwo(addOne(3))); //8

使用這個(gè)非常簡單的組合函數(shù)，我們可以更簡單地構(gòu)建我們之前的兩個(gè)複雜函數(shù)，並看到結(jié)果相同：

// ...來自上面的先前函數(shù)定義
function addOneTimesTwo(x) {
  var holder = x;
  holder = addOne(holder);
  holder = timesTwo(holder);
  return holder;
}
console.log(addOneTimesTwo(3)); //8
console.log(addOneTimesTwo(4)); //10

雖然這個(gè)簡單的組合函數(shù)有效，但它並沒有考慮許多限制其靈活性和適用性的問題。例如，我們可能想要組合兩個(gè)以上的函數(shù)。此外，我們?cè)诖诉^程中會(huì)丟失這些信息。我們可以解決這些問題，但為了掌握組合的工作原理，這不是必需的。與其自己編寫，不如從現(xiàn)有的函數(shù)式庫（例如 Ramda）繼承更強(qiáng)大的組合，默認(rèn)情況下，它確實(shí)考慮了參數(shù)從右到左的順序。

類型是你的責(zé)任

重要的是要記住，程序員有責(zé)任知道每個(gè)被組合函數(shù)的返回類型，以便下一個(gè)函數(shù)可以正確處理它。與執(zhí)行嚴(yán)格類型檢查的純函數(shù)式編程語言不同，JavaScript 不會(huì)阻止你嘗試組合返回不合適類型值的函數(shù)。你不僅限於傳遞數(shù)字，甚至不限於從一個(gè)函數(shù)到下一個(gè)函數(shù)保持相同的變量類型。但是你負(fù)責(zé)確保你正在組合的函數(shù)已準(zhǔn)備好處理前一個(gè)函數(shù)返回的任何值。

考慮你的受眾

始終記住，其他人將來可能需要使用或修改你的代碼。在傳統(tǒng)的 JavaScript 代碼中使用組合對(duì)於不熟悉函數(shù)式編程範(fàn)式的人來說可能會(huì)顯得複雜。目標(biāo)是更簡潔、更易於閱讀和維護(hù)的代碼。但是，隨著 ES2015 語法的出現(xiàn)，甚至可以使用箭頭函數(shù)將簡單的組合函數(shù)作為單行調(diào)用來創(chuàng)建，而無需特殊的組合方法：

function addOne(x) {
  return x + 1;
}
function timesTwo(x) {
  return x * 2;
}
console.log(addOne(timesTwo(3))); //7
console.log(timesTwo(addOne(3))); //8

今天就開始組合吧

與所有函數(shù)式編程技術(shù)一樣，重要的是要記住你的組合函數(shù)應(yīng)該是純函數(shù)。簡而言之，這意味著每次將特定值傳遞給函數(shù)時(shí)，函數(shù)都應(yīng)返回相同的結(jié)果，並且函數(shù)不應(yīng)產(chǎn)生改變自身外部值的副作用。當(dāng)您有一組想要應(yīng)用於數(shù)據(jù)的相關(guān)功能，並且您可以將該功能的組件分解為可重用且易於組合的函數(shù)時(shí)，組合嵌套非常方便。與所有函數(shù)式編程技術(shù)一樣，我建議謹(jǐn)慎地將組合添加到你的現(xiàn)有代碼中以熟悉它。如果你做對(duì)了，結(jié)果將是更簡潔、更乾燥、更易讀的代碼。難道這不是我們都想要的嗎？

(以下為FAQ，已根據(jù)原文進(jìn)行調(diào)整和精簡，並避免重複信息)

關(guān)於函數(shù)組合和可維護(hù)代碼的常見問題

• 什麼是編程中的函數(shù)組合？ 函數(shù)組合是將簡單函數(shù)組合成更複雜函數(shù)的概念。你可以像搭積木一樣，用這些小型可重用的函數(shù)創(chuàng)建複雜、強(qiáng)大的功能。這有助於使代碼更易讀、更易維護(hù)和更具可擴(kuò)展性。

• 函數(shù)組合如何促進(jìn)可維護(hù)的代碼？ 函數(shù)組合通過鼓勵(lì)使用小型、可重用的函數(shù)來促進(jìn)可維護(hù)性。這些函數(shù)更容易理解、測(cè)試和調(diào)試。當(dāng)這些小型函數(shù)組合在一起以創(chuàng)建更複雜的功能時(shí)，更容易查明和修復(fù)可能出現(xiàn)的任何問題。這種模塊化方法還可以更容易地更新或修改代碼的某些部分，而不會(huì)影響整個(gè)系統(tǒng)。

• 編寫可維護(hù)代碼的最佳實(shí)踐是什麼？ 編寫可維護(hù)的代碼涉及多項(xiàng)最佳實(shí)踐，包括：保持函數(shù)小巧且專注於單一任務(wù)；使用有意義的變量和函數(shù)名稱；對(duì)代碼進(jìn)行註釋以解釋代碼邏輯背後的“原因”；遵循一致的編碼風(fēng)格和結(jié)構(gòu)。

• 函數(shù)組合與函數(shù)式編程有何關(guān)係？ 函數(shù)組合是函數(shù)式編程中的一個(gè)基本概念。函數(shù)式編程是一種將計(jì)算視為數(shù)學(xué)函數(shù)的求值並避免更改狀態(tài)和可變數(shù)據(jù)的範(fàn)例。在這種範(fàn)例中，函數(shù)組合在從更簡單的函數(shù)構(gòu)建更複雜的函數(shù)中起著至關(guān)重要的作用，從而提高了代碼的可重用性和可維護(hù)性。

• 實(shí)現(xiàn)函數(shù)組合的挑戰(zhàn)是什麼？ 函數(shù)組合雖然有很多好處，但也可能帶來挑戰(zhàn)。一個(gè)挑戰(zhàn)是，如果管理不當(dāng)，它可能會(huì)導(dǎo)致難以閱讀的代碼，尤其是在組合多個(gè)函數(shù)時(shí)。在組合函數(shù)鏈中處理錯(cuò)誤和異常也可能很困難。但是，可以通過良好的編碼實(shí)踐和正確使用函數(shù)組合來減輕這些挑戰(zhàn)。

• 函數(shù)組合如何改進(jìn)代碼測(cè)試？ 函數(shù)組合可以使代碼測(cè)試更輕鬆、更高效。由於組合函數(shù)是由較小、獨(dú)立的函數(shù)組成的，因此你可以單獨(dú)測(cè)試每個(gè)小型函數(shù)。這使得更容易隔離和修復(fù)錯(cuò)誤。它還促進(jìn)了單元測(cè)試的實(shí)踐，其中軟件的每個(gè)部分都單獨(dú)進(jìn)行測(cè)試以確保其正常工作。

以上是功能組成：可維護(hù)代碼的構(gòu)建塊的詳細(xì)內(nèi)容。更多資訊請(qǐng)關(guān)注PHP中文網(wǎng)其他相關(guān)文章！