用函数式编程技术编写优美的 JavaScript


Posted in Javascript onNovember 25, 2006

级别: 初级

Shantanu Bhattacharya (shantanu@justawordaway.com), 首席顾问, Siemens Information Systems Limited

2006 年 7 月 20 日

函数式或声明性编程是非常强大的编程方法,正逐渐在软件行业流行起来。这篇文章将介绍一些相关的函数式编程概念,并提供有效使用这些概念的示例。作者将解释如何使用 JavaScript(TM)(JavaScript 能导入函数式编程的构造和特性)编写优美的代码。

简介

函数式编程语言在学术领域已经存在相当长一段时间了,但是从历史上看,它们没有丰富的工具和库可供使用。随着 .NET 平台上的 Haskell 的出现,函数式编程变得更加流行。一些传统的编程语言,例如 C++ 和 JavaScript,引入了由函数式编程提供的一些构造和特性。在许多情况下,JavaScript 的重复代码导致了一些拙劣的编码。如果使用函数式编程,就可以避免这些问题。此外,可以利用函数式编程风格编写更加优美的回调。

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

因为函数式编程采用了完全不同的组织程序的方式,所以那些习惯于采用命令式范例的程序员可能会发现函数式编程有点难学。在这篇文章中,您将了解一些关于如何采用函数式风格,用 JavaScript 编写良好的、优美的代码的示例。我将讨论:

  • 函数式编程概念,包括匿名函数、调用函数的不同方法,以及将函数作为参数传递给其他函数的方式。
  • 函数式概念的运用,采用的示例包括:扩展数组排序;动态 HTML 生成的优美代码;系列函数的应用。

函数式编程概念

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

在那些通过描述 “如何做” 指定解决问题的方法的语言中,许多开发人员都知道如何进行编码。例如,要编写一个计算阶乘的函数,我可以编写一个循环来描述程序,或者使用递归来查找所有数字的乘积。在这两种情况下,计算的过程都在程序中进行了详细说明。清单 1 显示了一个计算阶乘的可能使用的 C 代码。


清单 1. 过程风格的阶乘
int factorial (int n) { if (n

这类语言也叫做过程性 编程语言,因为它们定义了解决问题的过程。函数式编程与这个原理有显著不同。在函数式编程中,需要描述问题 “是什么”。 函数式编程语言又叫做声明性 语言。同样的计算阶乘的程序可以写成所有到 n 的数字的乘积。计算阶乘的典型函数式程序看起来如 清单 2 中的示例所示。


清单 2. 函数式风格的阶乘
factorial n, where n

第二个语句指明要得到从 1 开始的前 n 个数字的列表(take n [1..]),然后找出它们的乘积,1 为基元。这个定义与前面的示例不同,没有循环或递归。它就像阶乘函数的算术定义。一旦了解了库函数(takefoldr)和标记(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

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


清单 14. 生成动态 HTML 的通用方式
Array.prototype.fold=function(templateFn) { var len=this.length; var str=' '; for (var i=0 ; i

我使用 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 相关文章推荐
JQuery验证jsp页面属性是否为空(实例代码)
Nov 08 Javascript
简单的Jquery遮罩层代码实例
Nov 14 Javascript
jQuery循环动画与获取组件尺寸的方法
Feb 02 Javascript
JS实现生成会变大变小的圆环实例
Aug 05 Javascript
JQuery标签页效果的两个实例讲解(4)
Sep 17 Javascript
详解jQuery移动页面开发中的ui-grid网格布局使用
Dec 03 Javascript
javascript实现网页端解压并查看zip文件
Dec 15 Javascript
JS实现的简单轮播图运动效果示例
Dec 22 Javascript
静态页面实现 include 引入公用代码的示例
Sep 25 Javascript
vue组件之间通信实例总结(点赞功能)
Dec 05 Javascript
JavaScript之实现一个简单的Vue示例
Jan 17 Javascript
js中实现继承的五种方法
Jan 25 Javascript
通过JAVASCRIPT读取ASP设定的COOKIE
Nov 24 #Javascript
键盘控制事件应用教程大全
Nov 24 #Javascript
Javascript操纵Cookie实现购物车程序
Nov 23 #Javascript
删除重复数据的算法
Nov 23 #Javascript
在JavaScript中实现命名空间
Nov 23 #Javascript
js变量作用域及可访问性的探讨
Nov 23 #Javascript
bcastr2.0 通用的图片浏览器
Nov 22 #Javascript
You might like
PHP SEO优化之URL优化方法
2011/04/21 PHP
php计算整个目录大小的方法
2015/06/01 PHP
PHP 开发者该知道的 5 个 Composer 小技巧
2016/02/03 PHP
PHP 年月日的三级联动实例代码
2017/05/24 PHP
django中的ajax组件教程详解
2018/10/18 PHP
PHP开发api接口安全验证操作实例详解
2020/03/26 PHP
使用jquery实现简单的ajax
2013/07/08 Javascript
JavaScript实现的内存数据库LokiJS介绍和入门实例
2014/11/17 Javascript
关于axios返回空对象的问题解决
2017/04/04 Javascript
Angularjs上传图片实例详解
2017/08/06 Javascript
浅析JS抽象工厂模式
2017/12/14 Javascript
利用JS判断客户端类型你应该知道的四种方法
2017/12/22 Javascript
JS文件中加载jquery.js的实例代码
2018/05/05 jQuery
js嵌套的数组扁平化:将多维数组变成一维数组以及push()与concat()区别的讲解
2019/01/19 Javascript
详解使用webpack+electron+reactJs开发windows桌面应用
2019/02/01 Javascript
jQuery模仿ToDoList实现简单的待办事项列表
2019/12/30 jQuery
解决vue elementUI中table里数字、字母、中文混合排序问题
2020/01/07 Javascript
Vue跨域请求问题解决方案过程解析
2020/08/07 Javascript
[58:57]2018DOTA2亚洲邀请赛3月29日小组赛B组 Effect VS VGJ.T
2018/03/30 DOTA
python使用os模块的os.walk遍历文件夹示例
2014/01/27 Python
Python编程实现双链表,栈,队列及二叉树的方法示例
2017/11/01 Python
教你用一行Python代码实现并行任务(附代码)
2018/02/02 Python
python如何去除字符串中不想要的字符
2020/07/05 Python
python实现在图片上画特定大小角度矩形框
2018/10/24 Python
python脚本开机自启的实现方法
2019/06/28 Python
Python脚本实现监听服务器的思路代码详解
2020/05/28 Python
详解Python 中的容器 collections
2020/08/17 Python
html5是什么_动力节点Java学院整理
2017/07/07 HTML / CSS
SEPHORA丝芙兰德国官方购物网站:化妆品、护肤品和香水
2020/01/21 全球购物
Java中实现多态的机制是什么?
2014/12/07 面试题
社区敬老月活动实施方案
2014/02/17 职场文书
项目合作意向书范本
2014/04/01 职场文书
周恩来的四个昼夜观后感
2015/06/03 职场文书
2015年暑期社会实践总结
2015/07/13 职场文书
2016新年晚会开场白
2015/12/03 职场文书
MySQL索引失效十种场景与优化方案
2023/05/08 MySQL