함수형 프로그래밍 기술을 사용하여 아름다운 JavaScript_javascript 팁 작성

레벨: 주니어

Shantanu Bhattacharya(shantanu@justawordaway.com), 수석 컨설턴트, Siemens Information Systems Limited

2006년 7월 20일

함수형 또는 선언형 프로그래밍은 소프트웨어 업계에서 점차 인기를 얻고 있는 매우 강력한 프로그래밍 방법입니다. 이 기사에서는 몇 가지 관련 함수형 프로그래밍 개념을 소개하고 이러한 개념을 효과적으로 사용하는 예를 제공합니다. 저자는 함수형 프로그래밍의 구조와 기능을 가져오는 JavaScript(TM)를 사용하여 아름다운 코드를 작성하는 방법을 설명합니다.

소개

함수형 프로그래밍 언어는 꽤 오랫동안 학문 분야에 존재해 왔지만 역사적으로는 보세요, 그들은 작업할 수 있는 풍부한 도구와 라이브러리 세트가 없습니다. 함수형 프로그래밍은 .NET 플랫폼에 Haskell이 등장하면서 더욱 대중화되었습니다. C 및 JavaScript와 같은 일부 전통적인 프로그래밍 언어에는 함수형 프로그래밍에서 제공하는 일부 구성 및 기능이 도입되었습니다. 많은 경우 JavaScript 중복으로 인해 코딩이 제대로 되지 않습니다. 함수형 프로그래밍을 사용하면 이러한 문제를 피할 수 있습니다. 또한 함수형 프로그래밍 스타일을 사용하여 더욱 우아한 콜백을 작성할 수 있습니다.

函数式编程函数式编程只描述在程序输入上执行的操作，不必使用临时变量保存中间结果。重点是捕捉 “是什么以及为什么”，而不是 “如何做”。与将重点放在执行连续命令上的过程性编程相比，函数式编程的重点是函数的定义而不是状态机（state machine）的实现。大型知识管理系统应用程序从使用函数式编程风格上受益颇多，因为函数式编程简化了开发。

함수형 프로그래밍은 프로그램을 구성하는 데 전혀 다른 방식을 사용하기 때문에 명령형 패러다임에 익숙한 프로그래머는 함수형 프로그래밍을 배우기가 다소 어려울 수 있습니다. 이 기사에서는 함수형 스타일을 사용하여 JavaScript로 훌륭하고 아름다운 코드를 작성하는 방법에 대한 몇 가지 예를 배우게 됩니다. 익명 함수, 함수를 호출하는 다양한 방법, 함수를 다른 함수에 인수로 전달하는 방법 등

• 함수 프로그래밍 개념 에 대해 논의하겠습니다.

  
  

• 함수 개념 사용, 예: 동적 HTML 시리즈로 생성된 아름다운 코드;

함수형 프로그래밍 개념

请告诉每个人。请把这个提交给：  Digg   Slashdot

'어떻게 하는지'를 기술하여 문제에 대한 해결책을 명시하는 언어에서는 많은 개발자가 코딩 방법을 알고 있습니다. 예를 들어 계승을 계산하는 함수를 작성하려면 프로그램을 설명하는 루프를 작성하거나 재귀를 사용하여 모든 숫자의 곱을 찾을 수 있습니다. 두 경우 모두 계산 프로세스가 프로그램에 자세히 설명되어 있습니다. 목록 1은 계승 계산에 사용 가능한 C 코드를 보여줍니다.

목록 1. 절차적 스타일 계승

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

이 유형의 언어는 또한 프로그래밍 언어는 문제 해결을 위한 프로세스를 정의하기 때문에 절차적이라고 합니다. 함수형 프로그래밍은 이 원칙과 크게 다릅니다. 함수형 프로그래밍에서는 문제가 "무엇"인지 설명해야 합니다. 함수형 프로그래밍 언어는 선언적 언어라고도 합니다. 계승값을 계산하는 동일한 프로그램은 n까지의 모든 숫자의 곱으로 작성할 수 있습니다. 계승 계산을 위한 일반적인 기능적 프로그램은 목록 2의 예와 같습니다.

목록 2. 기능적 스타일 계승

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

第二个语句指明要得到从 1 开始的前 n 个数字的列表（take n [1..]），然后找出它们的乘积，1 为基元。这个定义与前面的示例不同，没有循环或递归。它就像阶乘函数的算术定义。一旦了解了库函数（take 和 foldr）和标记（list notation [ ]）的意义，编写代码就很容易，而且可读性也很好。

只用三行 Miranda 代码就可以编写例程，根据参数，使用广度优先或深度优先遍历处理 n 叉树的每个节点，而且元素可以是任何通用类型。

从历史上看，函数式编程语言不太流行有各种原因。但是最近，有些函数式编程语言正在进入计算机行业。其中一个例子就是 .NET 平台上的 Haskell。其他情况下，现有的一些语言借用了函数式编程语言中的一些概念。一些 C++ 实现中的迭代器和 continuation，以及 JavaScript 中提供的一些函数式构造（functional construct），就是这种借用的示例。但是，通过借用函数式构造，总的语言编程范例并没有发生变化。JavaScript 并没因为函数式构造的添加就变成了函数式编程语言。

我现在要讨论 JavaScript 中的函数式构造的各种美妙之处，以及在日常编码和工作中使用它们的方式。我们将从一些基本功能开始，然后用它们查看一些更有趣的应用。

匿名函数

在 JavaScript 中，可以编写匿名函数或没有名称的函数。为什么需要这样的函数？请继续往下读，但首先我们将学习如何编写这样一个函数。如果拥有以下 JavaScript 函数：
清单 3. 典型的函数

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

然后对应的匿名函数看起来应当如下所示：
清单 4. 匿名函数

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

要使用它，则需要编写以下代码：

清单 5. 应用匿名函数

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

使用函数作为值

也可以将函数作为值使用。还可以拥有一些所赋值是函数的变量。在最后一个示例中，还可以执行以下操作：
清单 6. 使用函数赋值

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

在上面 清单 6 的示例中，为变量 sum 赋的值是函数定义本身。这样，sum 就成了一个函数，可以在任何地方调用。

调用函数的不同方法

JavaScript 允许用两种方式调用函数，如清单 7 和 8 所示。

清单 7. 典型的函数应用

				alert (“Hello, World!");

或

清单 8. 用函数作为表达式

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

所以也可以编写以下代码：

清单 9. 定义函数之后就可以立即使用它

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

可以在括号中编写函数表达式，然后传递给参数，对参数进行运算。虽然在 清单 8 的示例中，有直接包含在括号中的函数名称，但是按 清单 9 中所示方式使用它时，就不是这样了。

将函数作为参数传递给其他函数

也可以将函数作为参数传递给其他函数。虽然这不是什么新概念，但是在后续的示例中大量的使用了这个概念。可以传递函数参数，如 清单 10 所示。

清单 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

执行最后一个 alert 语句输出了一个大小为 12 的值。

使用函数式概念

前一节介绍了一些使用函数式风格的编程概念。所给的示例并没有包含所有的概念，它们在重要性方面也没有先后顺序，只是一些与这个讨论有关的概念而已。下面对 JavaScript 中的函数式风格作一快速总结：

• 函数并不总是需要名称。

• 函数可以像其他值一样分配给变量。

• 函数表达式可以编写并放在括号中，留待以后应用。

• 函数可以作为参数传递给其他函数。

这一节将介绍一些有效使用这些概念编写优美的 JavaScript 代码的示例。（使用 JavaScript 函数式风格，可以做许多超出这个讨论范围的事。）

• 扩展数组排序

• 先来编写一个排序方法，可以根据数组元素的日期对数据进行排序。用 JavaScript 编写这个方法非常简单。数据对象的排序方法接受一个可选参数，这个可选参数就是比较函数。在这里，需要使用 清单 11 中的比较函数。

  
  清单 11. 比较函数
  

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

  
  

  要得到需要的函数，请使用 清单 12 的示例。

  
  清单 12. 排序函数的扩展
  

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

  
  

  其中 arr 是类型数组对象。排序函数会根据 arr 数组中对象的日期对所有对象进行排序。比较函数和它的定义一起被传递给排序函数，以完成排序操作。使用这个函数：

  
  

• 每个 JavaScript 对象都有一个 date 属性。

• JavaScript 的数组类型的排序函数接受可选参数，可选参数是用来排序的比较函数。这与 C 库中的 qsort 函数类似。

• 动态生成 HTML 的优美代码

• 在这个示例中，将看到如何编写优美的代码，从数组动态地生成 HTML。可以根据从数据中得到的值生成表格。或者，也可以用数组的内容生成排序和未排序的列表。也可以生成垂直或水平的菜单项目。

  清单 13 中的代码风格通常被用来从数组生成动态 HTML。

  
  清单 13. 生成动态 HTML 的普通代码
  

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

  
  

  可以用 清单 14 的代码替换这个代码。

  
  清单 14. 生成动态 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 类型的 prototype 属性定义新函数 fold。现在可以在后面定义的任何数组中使用该函数。

• 系列函数的应用

• 考虑以下这种情况：想用一组函数作为回调函数。为实现这一目的，将使用 window.setTimeout 函数，该函数有两个参数。第一个参数是在第二个参数表示的毫秒数之后被调用的函数。清单 15 显示了完成此操作的一种方法。
  清单 15. 在回调中调用一组函数
  

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

  
  

  清单 16 显示了完成此操作的更好的方式。

  
  清单 16. 调用系列函数的更好的方式
  

  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);

  
  

  在处理事件时，如果想在调用完一个回调之后再调用一个回调，也可以使用 清单 16 中的代码扩展。这可能是一个需要您自行完成的一个练习，现在您的兴趣被点燃了吧。

 以上就是用函数式编程技术编写优美的 JavaScript_javascript技巧的内容，更多相关内容请关注PHP中文网（www.php.cn）！