級(jí)別: 初級(jí)

Shantanu Bhattacharya (shantanu@justawordaway.com), 首席顧問(wèn), Siemens Information Systems Limited

2006 年 7 月 20 日

函數(shù)式或聲明性編程是非常強(qiáng)大的編程方法，正逐漸在軟件行業(yè)流行起來(lái)。這篇文章將介紹一些相關(guān)的函數(shù)式編程概念，并提供有效使用這些概念的示例。作者將解釋如何使用 JavaScript(TM)（JavaScript 能導(dǎo)入函數(shù)式編程的構(gòu)造和特性）編寫(xiě)優(yōu)美的代碼。

簡(jiǎn)介

函數(shù)式編程語(yǔ)言在學(xué)術(shù)領(lǐng)域已經(jīng)存在相當(dāng)長(zhǎng)一段時(shí)間了，但是從歷史上看，它們沒(méi)有豐富的工具和庫(kù)可供使用。隨著 .NET 平臺(tái)上的 Haskell 的出現(xiàn)，函數(shù)式編程變得更加流行。一些傳統(tǒng)的編程語(yǔ)言，例如 C++ 和 JavaScript，引入了由函數(shù)式編程提供的一些構(gòu)造和特性。在許多情況下，JavaScript 的重復(fù)代碼導(dǎo)致了一些拙劣的編碼。如果使用函數(shù)式編程，就可以避免這些問(wèn)題。此外，可以利用函數(shù)式編程風(fēng)格編寫(xiě)更加優(yōu)美的回調(diào)。

函數(shù)式編程 函數(shù)式編程只描述在程序輸入上執(zhí)行的操作，不必使用臨時(shí)變量保存中間結(jié)果。重點(diǎn)是捕捉 “是什么以及為什么”，而不是 “如何做”。與將重點(diǎn)放在執(zhí)行連續(xù)命令上的過(guò)程性編程相比，函數(shù)式編程的重點(diǎn)是函數(shù)的定義而不是狀態(tài)機(jī)（state machine）的實(shí)現(xiàn)。 大型知識(shí)管理系統(tǒng)應(yīng)用程序從使用函數(shù)式編程風(fēng)格上受益頗多，因?yàn)楹瘮?shù)式編程簡(jiǎn)化了開(kāi)發(fā)。

因?yàn)楹瘮?shù)式編程采用了完全不同的組織程序的方式，所以那些習(xí)慣于采用命令式范例的程序員可能會(huì)發(fā)現(xiàn)函數(shù)式編程有點(diǎn)難學(xué)。在這篇文章中，您將了解一些關(guān)于如何采用函數(shù)式風(fēng)格，用 JavaScript 編寫(xiě)良好的、優(yōu)美的代碼的示例。我將討論：

• 函數(shù)式編程概念，包括匿名函數(shù)、調(diào)用函數(shù)的不同方法，以及將函數(shù)作為參數(shù)傳遞給其他函數(shù)的方式。

• 函數(shù)式概念的運(yùn)用，采用的示例包括：擴(kuò)展數(shù)組排序；動(dòng)態(tài) HTML 生成的優(yōu)美代碼；系列函數(shù)的應(yīng)用。

函數(shù)式編程概念

請(qǐng)告訴每個(gè)人。請(qǐng)把這個(gè)提交給： Digg Slashdot

在那些通過(guò)描述 “如何做” 指定解決問(wèn)題的方法的語(yǔ)言中，許多開(kāi)發(fā)人員都知道如何進(jìn)行編碼。例如，要編寫(xiě)一個(gè)計(jì)算階乘的函數(shù)，我可以編寫(xiě)一個(gè)循環(huán)來(lái)描述程序，或者使用遞歸來(lái)查找所有數(shù)字的乘積。在這兩種情況下，計(jì)算的過(guò)程都在程序中進(jìn)行了詳細(xì)說(shuō)明。清單 1 顯示了一個(gè)計(jì)算階乘的可能使用的 C 代碼。

			
int factorial (int n)
{
 if (n <= 0)
  return 1;
 else
  return n * factorial (n-1);
}

這類(lèi)語(yǔ)言也叫做過(guò)程性 編程語(yǔ)言，因?yàn)樗鼈兌x了解決問(wèn)題的過(guò)程。函數(shù)式編程與這個(gè)原理有顯著不同。在函數(shù)式編程中，需要描述問(wèn)題 “是什么”。 函數(shù)式編程語(yǔ)言又叫做聲明性 語(yǔ)言。同樣的計(jì)算階乘的程序可以寫(xiě)成所有到 n 的數(shù)字的乘積。計(jì)算階乘的典型函數(shù)式程序看起來(lái)如 清單 2 中的示例所示。

				
factorial n, where n <= 0 	:= 1
factorial n  := foldr * 1 take n [1..]

第二個(gè)語(yǔ)句指明要得到從 1 開(kāi)始的前 n 個(gè)數(shù)字的列表（take n [1..]），然后找出它們的乘積，1 為基元。這個(gè)定義與前面的示例不同，沒(méi)有循環(huán)或遞歸。它就像階乘函數(shù)的算術(shù)定義。一旦了解了庫(kù)函數(shù)（take 和 foldr）和標(biāo)記（list notation [ ]）的意義，編寫(xiě)代碼就很容易，而且可讀性也很好。

只用三行 Miranda 代碼就可以編寫(xiě)例程，根據(jù)參數(shù)，使用廣度優(yōu)先或深度優(yōu)先遍歷處理 n 叉樹(shù)的每個(gè)節(jié)點(diǎn)，而且元素可以是任何通用類(lèi)型。

從歷史上看，函數(shù)式編程語(yǔ)言不太流行有各種原因。但是最近，有些函數(shù)式編程語(yǔ)言正在進(jìn)入計(jì)算機(jī)行業(yè)。其中一個(gè)例子就是 .NET 平臺(tái)上的 Haskell。其他情況下，現(xiàn)有的一些語(yǔ)言借用了函數(shù)式編程語(yǔ)言中的一些概念。一些 C++ 實(shí)現(xiàn)中的迭代器和 continuation，以及 JavaScript 中提供的一些函數(shù)式構(gòu)造（functional construct），就是這種借用的示例。但是，通過(guò)借用函數(shù)式構(gòu)造，總的語(yǔ)言編程范例并沒(méi)有發(fā)生變化。JavaScript 并沒(méi)因?yàn)楹瘮?shù)式構(gòu)造的添加就變成了函數(shù)式編程語(yǔ)言。

我現(xiàn)在要討論 JavaScript 中的函數(shù)式構(gòu)造的各種美妙之處，以及在日常編碼和工作中使用它們的方式。我們將從一些基本功能開(kāi)始，然后用它們查看一些更有趣的應(yīng)用。

匿名函數(shù)

在 JavaScript 中，可以編寫(xiě)匿名函數(shù)或沒(méi)有名稱(chēng)的函數(shù)。為什么需要這樣的函數(shù)？請(qǐng)繼續(xù)往下讀，但首先我們將學(xué)習(xí)如何編寫(xiě)這樣一個(gè)函數(shù)。如果擁有以下 JavaScript 函數(shù)：
清單 3. 典型的函數(shù)

				
function sum(x,y,z) {
 return (x+y+z);
}

然后對(duì)應(yīng)的匿名函數(shù)看起來(lái)應(yīng)當(dāng)如下所示：
清單 4. 匿名函數(shù)

				
function(x,y,z) {
 return (x+y+z);
}

要使用它，則需要編寫(xiě)以下代碼：

				
var sum = function(x,y,z) {
 return (x+y+z);
}(1,2,3);
alert(sum);

使用函數(shù)作為值

也可以將函數(shù)作為值使用。還可以擁有一些所賦值是函數(shù)的變量。在最后一個(gè)示例中，還可以執(zhí)行以下操作：
清單 6. 使用函數(shù)賦值

				
var sum = function(x,y,z) {
 return (x+y+z);
}
alert(sum(1,2,3));

在上面 清單 6 的示例中，為變量 sum 賦的值是函數(shù)定義本身。這樣，sum 就成了一個(gè)函數(shù)，可以在任何地方調(diào)用。

調(diào)用函數(shù)的不同方法

JavaScript 允許用兩種方式調(diào)用函數(shù)，如清單 7 和 8 所示。

				
alert (“Hello, World!");

或

				
(alert) (“Hello, World!");

所以也可以編寫(xiě)以下代碼：

( function(x,y,z) { return (x+y+z) } ) (1, 2, 3);

可以在括號(hào)中編寫(xiě)函數(shù)表達(dá)式，然后傳遞給參數(shù)，對(duì)參數(shù)進(jìn)行運(yùn)算。雖然在 清單 8 的示例中，有直接包含在括號(hào)中的函數(shù)名稱(chēng)，但是按 清單 9 中所示方式使用它時(shí)，就不是這樣了。

將函數(shù)作為參數(shù)傳遞給其他函數(shù)

也可以將函數(shù)作為參數(shù)傳遞給其他函數(shù)。雖然這不是什么新概念，但是在后續(xù)的示例中大量的使用了這個(gè)概念?？梢詡鬟f函數(shù)參數(shù)，如 清單 10 所示。

				
var passFunAndApply = function (fn,x,y,z) { return fn(x,y,z); };

var sum = function(x,y,z) {
 return x+y+z;
};

alert( passFunAndApply(sum,3,4,5) ); // 12

執(zhí)行最后一個(gè) alert 語(yǔ)句輸出了一個(gè)大小為 12 的值。

使用函數(shù)式概念

前一節(jié)介紹了一些使用函數(shù)式風(fēng)格的編程概念。所給的示例并沒(méi)有包含所有的概念，它們?cè)谥匾苑矫嬉矝](méi)有先后順序，只是一些與這個(gè)討論有關(guān)的概念而已。下面對(duì) JavaScript 中的函數(shù)式風(fēng)格作一快速總結(jié)：

• 函數(shù)并不總是需要名稱(chēng)。
• 函數(shù)可以像其他值一樣分配給變量。
• 函數(shù)表達(dá)式可以編寫(xiě)并放在括號(hào)中，留待以后應(yīng)用。
• 函數(shù)可以作為參數(shù)傳遞給其他函數(shù)。

這一節(jié)將介紹一些有效使用這些概念編寫(xiě)優(yōu)美的 JavaScript 代碼的示例。（使用 JavaScript 函數(shù)式風(fēng)格，可以做許多超出這個(gè)討論范圍的事。）

擴(kuò)展數(shù)組排序

先來(lái)編寫(xiě)一個(gè)排序方法，可以根據(jù)數(shù)組元素的日期對(duì)數(shù)據(jù)進(jìn)行排序。用 JavaScript 編寫(xiě)這個(gè)方法非常簡(jiǎn)單。數(shù)據(jù)對(duì)象的排序方法接受一個(gè)可選參數(shù)，這個(gè)可選參數(shù)就是比較函數(shù)。在這里，需要使用 清單 11 中的比較函數(shù)。

清單 11. 比較函數(shù)

function (x,y) { return x.date – y.date; }

要得到需要的函數(shù)，請(qǐng)使用 清單 12 的示例。

清單 12. 排序函數(shù)的擴(kuò)展

arr.sort( function (x,y) { return x.date – y.date; } );

其中 arr 是類(lèi)型數(shù)組對(duì)象。排序函數(shù)會(huì)根據(jù) arr 數(shù)組中對(duì)象的日期對(duì)所有對(duì)象進(jìn)行排序。比較函數(shù)和它的定義一起被傳遞給排序函數(shù)，以完成排序操作。使用這個(gè)函數(shù)：

• 每個(gè) JavaScript 對(duì)象都有一個(gè) date 屬性。
• JavaScript 的數(shù)組類(lèi)型的排序函數(shù)接受可選參數(shù)，可選參數(shù)是用來(lái)排序的比較函數(shù)。這與 C 庫(kù)中的 qsort 函數(shù)類(lèi)似。

動(dòng)態(tài)生成 HTML 的優(yōu)美代碼

在這個(gè)示例中，將看到如何編寫(xiě)優(yōu)美的代碼，從數(shù)組動(dòng)態(tài)地生成 HTML?？梢愿鶕?jù)從數(shù)據(jù)中得到的值生成表格?；蛘?，也可以用數(shù)組的內(nèi)容生成排序和未排序的列表。也可以生成垂直或水平的菜單項(xiàng)目。

清單 13 中的代碼風(fēng)格通常被用來(lái)從數(shù)組生成動(dòng)態(tài) HTML。

清單 13. 生成動(dòng)態(tài) HTML 的普通代碼

var str=' '; for (var i=0;i<arr.length;i++) { var element=arr[i]; str+=... HTML generation code... } document.write(str);

可以用 清單 14 的代碼替換這個(gè)代碼。

清單 14. 生成動(dòng)態(tài) HTML 的通用方式

Array.prototype.fold=function(templateFn) { var len=this.length; var str=' '; for (var i=0 ; i<len ; i++) str+=templateFn(this[i]); return str; } function templateInstance(element) { return ... HTML generation code ... } document.write(arr.fold(templateInstance));

我使用 Array 類(lèi)型的 prototype 屬性定義新函數(shù) fold?，F(xiàn)在可以在后面定義的任何數(shù)組中使用該函數(shù)。

系列函數(shù)的應(yīng)用

考慮以下這種情況：想用一組函數(shù)作為回調(diào)函數(shù)。為實(shí)現(xiàn)這一目的，將使用 window.setTimeout 函數(shù)，該函數(shù)有兩個(gè)參數(shù)。第一個(gè)參數(shù)是在第二個(gè)參數(shù)表示的毫秒數(shù)之后被調(diào)用的函數(shù)。清單 15 顯示了完成此操作的一種方法。
清單 15. 在回調(diào)中調(diào)用一組函數(shù)

window.setTimeout(function(){alert(‘First!');alert(‘Second!');}, 5000);

清單 16 顯示了完成此操作的更好的方式。

清單 16. 調(diào)用系列函數(shù)的更好的方式

Function.prototype.sequence=function(g) { var f=this; return function() { f();g(); } }; function alertFrst() { alert(‘First!'); } function alertSec() { alert(‘Second!'); } setTimeout( alertFrst.sequence(alertSec), 5000);

在處理事件時(shí)，如果想在調(diào)用完一個(gè)回調(diào)之后再調(diào)用一個(gè)回調(diào)，也可以使用 清單 16 中的代碼擴(kuò)展。這可能是一個(gè)需要您自行完成的一個(gè)練習(xí)，現(xiàn)在您的興趣被點(diǎn)燃了吧。