Javascript函数式编程简单介绍


Posted in Javascript onOctober 11, 2015

几十年来,函数式编程一直是计算机科学狂热者的至爱,由于数学的纯洁性和谜一般的本质, 它被埋藏在计算机实验室,只有数据学家和有希望获得博士学位的人士使用。但是现在,它正经历一场复兴, 这要感谢一些现代语言比如Python,Julia,Ruby,Clojure以及——但不是最后一个——Javascript。

你是说Javascript?这个WEB脚本语言?没错!

Javascript已经被证明是一项长期以来都没有消失的重要的技术。这主要是由于它扩展的一些框架和库而使其具有重生的能力, 比如backbone.js,jQuery,Dojo,underscore.js等等。这与Javascript函数式编程语言的真实身份直接相关。 对Javascript函数式编程的理解很重要,并且在相当长的一段时间会对各种水平的程序员很有用。

为什么呢?函数式编程非常强大、健壮并且优雅。它对于大型数据结构非常有用并且高效。 Javascript作为一个客户端脚本语言,在应对日益复杂的网站时,函数式地操作DOM、 组织API响应以及完成一些其它任务会非常有好处。

在这本书里,你将会学习用Javascript进行函数式编程所需要知道的一切:如何用函数式编程构建你的Javascript web应用, 如何解锁Javascript隐藏的力量,如何编写更强大的代码,并且由于程序更小,使得代码更容易维护,能够更快被下载, 并且花费更少的开支。你还会学到函数式编程的核心概念,以及如何将它们应用到Javascript, 还有将Javascript作为函数式语言时如何回避一些问题,如何在Javascript中混合使用函数式编程和面向对象编程。

不过在我们开始前,先来做个实验。

例子

也许快速举个例子是介绍Javascript函数式编程最好的方式。我们将用Javascript完成一些任务—— 一个使用传统、原生的方法,另一个使用函数式编程。然后我们将会比较这两种方法。

应用——一个电子商务网站

为了追求真实感,我们来做一个电子商务网站,一个邮购咖啡豆的公司。这个网站会销售好几种类型的咖啡, 有不同的品质,当然也有不同的价格。

命令式方法

首先,我们开始写程序。为了让这个例子接地气,我们需要创建一些对象来保存数据。如果需要的话我们可以从数据库里取值。 但是现在我们假设他们是静态定义的: 

// create some objects to store the data.
var columbian = {
 name: 'columbian',
 basePrice: 5
};
var frenchRoast = {
 name: 'french roast',
 basePrice: 8
};
var decaf = {
 name: 'decaf',
 basePrice: 6
};
// 我们将使用辅助函数计算价格
// 根据size打印到一个HTML的列表中
function printPrice(coffee, size) {
 if (size == 'small') {
  var price = coffee.basePrice + 2;
 }
 else if (size == 'medium') {
  var price = coffee.basePrice + 4;
 }
 else {
  var price = coffee.basePrice + 6;
 }
 // create the new html list item
 var node = document.createElement("li");
 var label = coffee.name + ' ' + size;
 var textnode = document.createTextNode(label+' price: $'+price);
 node.appendChild(textnode);
 document.getElementById('products').appendChild(node);
}
// 现在我们只需根据咖啡的各种价格和size的组合调用printPrice函数
printPrice(columbian, 'small');
printPrice(columbian, 'medium');
printPrice(columbian, 'large');
printPrice(frenchRoast, 'small');
printPrice(frenchRoast, 'medium');
printPrice(frenchRoast, 'large');
printPrice(decaf, 'small');
printPrice(decaf, 'medium');
printPrice(decaf, 'large');

如你所见,这个代码非常基础。如果现在有更多的咖啡种类而不只是这三个改怎么办?如果有20个,甚至50个? 如果有更多的size呢?如果有有机和无机之分呢?这将会很快将代码量变得巨大无比!

采用这种方法,我们让机器去打印每一种咖啡类型和每一个size。这就是采用这种命令式方法的基本问题。

函数式编程

命令式的代码一步一步地告诉电脑需要做什么来解决问题,相反,函数式编程追求用数学方式来描述问题, 其余的交给电脑来做。

通过更函数式一些的方式,同样的应用可以这样来写:

// 从接口中分解数据和逻辑
var printPrice = function(price, label) {
 var node = document.createElement("li");
 var textnode = document.createTextNode(label+' price: $'+price);
 node.appendChild(textnode);
 document.getElementById('products 2').appendChild(node);
}
// 为每种咖啡创建函数对象
var columbian = function(){
 this.name = 'columbian';
 this.basePrice = 5;
};
var frenchRoast = function(){
 this.name = 'french roast';
 this.basePrice = 8;
};
var decaf = function(){
 this.name = 'decaf';
 this.basePrice = 6;
};
// 为每种size通过字面量创建对象
var small = {
 getPrice: function(){return this.basePrice + 2},
 getLabel: function(){return this.name + ' small'}
};
var medium = {
 getPrice: function(){return this.basePrice + 4},
 getLabel: function(){return this.name + ' medium'}
};
var large = {
 getPrice: function(){return this.basePrice + 6},
 getLabel: function(){return this.name + ' large'}
};
// 将所有咖啡的种类和size放到数组里
var coffeeTypes = [columbian, frenchRoast, decaf];
var coffeeSizes = [small, medium, large];
// 创建由上面内容组成的新对象,并把它们放到一个新数组里
var coffees = coffeeTypes.reduce(function(previous, current) {
 var newCoffee = coffeeSizes.map(function(mixin) {
  // `plusmix`是函数式的minxin, 见第7章
  var newCoffeeObj = plusMixin(current, mixin);
  return new newCoffeeObj();
 });
 return previous.concat(newCoffee);
},[]);
// 现在我们已经定义了如何获得所有咖啡种类和size组合方式的价格,现在可以直接打印它们了
coffees.forEach(function(coffee){
 printPrice(coffee.getPrice(),coffee.getLabel());
});

首先需要明确的是这个代码更加模块化了。现在新增一种size或者信新增一个咖啡种类就像下面的代码这样简单:

var peruvian = function(){
 this.name = 'peruvian';
 this.basePrice = 11;
};
var extraLarge = {
 getPrice: function(){return this.basePrice + 10},
 getLabel: function(){return this.name + ' extra large'}
};
coffeeTypes.push(Peruvian);
coffeeSizes.push(extraLarge);

咖啡对象的数组和size对象的数组混合(mix)到了一起,也就是他们的方法和成员变量被组合到了一块儿 ——通过一个叫“plusMinxin”的自定义函数(详见第七章)。这些咖啡类型的类(columbian, frenchRoast, decaf)包含了成员变量, 而这些size对象(small, medium, large)包含了获取名称和计算价格的方法。 ”混合”(minxing)这个动作通过一个map操作来起作用,也就是对数组中的每一个成员执行一个纯函数并返回一个新的函数, 然后这些返回的函数被放到了一个reduce函数中被操作,reduce也是一个高阶函数,和map有些像, 只是reduce把数组里的所有元素处理后组合到了一个东西里面。最终,新的数组包含了所有可能的种类和size的组合, 这个数组通过forEach方法遍历,forEach也是一个高阶函数,它会让数组里面每一个对象作为参数执行一遍回调函数。 在这个例子里,这个回调函数是一个匿名函数,它获取这些对象后,以对象的getPrice()和getLabel() 两个方法的返回值作为参数调用printPrice函数。

实际上,我们可以让这个例子更加函数式:去掉coffees变量,并将函数串到一起链式调用,这也是函数式编程的一个小技巧。

coffeeTypes.reduce(function(previous, current) {
 var newCoffee = coffeeSizes.map(function(mixin) {
  // `plusMixin` function for functional mixins, see Ch.7
  var newCoffeeObj = plusMixin(current, mixin);
  return new newCoffeeObj();
 });
 return previous.concat(newCoffee);
},[]).forEach(function(coffee) {
 printPrice(coffee.getPrice(),coffee.getLabel());
});

这样,控制流没有像命令式代码那样从头到尾的顺序进行。在函数式编程里,map函数和其它高阶函数代替了for和while循环, 只有少量关键的代码是在顺序执行。 这使得新接触的人在阅读这样范式的代码有些困难,但是一旦你能够欣赏它,你就会发现这根本没啥难的, 而且这样写看起来更好。

这个例子仅仅是刚开始展露Javascript中函数式编程能做什么。通过这本书,你将会看到更多函数式实现的强悍的例子。

总结

首先,采用函数式风格的优点已经明确了。 其次,不要害怕函数式编程。的确,它往往被认为是编程语言的纯逻辑形式,但是我们不需要理解lambda演算也能够在日常任务中应用它。 实际上,通过把我们的程序拆分成小的片段,它们变得更容易被理解、维护,也更加可靠。 map和reduce函数是Javascript中不太被知道的内建函数,然而我们将要关注它们。

Javascript是一个脚本语言,可交互,易使用,不需要编译。我们甚至不需要下载任何开发软件, 你最喜欢的浏览器就可以作为开发环境的解释器。

感兴趣吗?好,我们开始!

Javascript 相关文章推荐
jQuery 研究心得 取得属性的值
Nov 30 Javascript
WordPress JQuery处理沙发头像
Jun 22 Javascript
Javascript 调试利器 Firebug使用详解六
Jul 05 Javascript
JQuery 插件模板 制作jquery插件的朋友可以参考下
Mar 17 Javascript
跟着Jquery API学Jquery之一 选择器
Apr 07 Javascript
jQuery层次选择器选择元素使用介绍
Apr 18 Javascript
raphael.js绘制中国地图 地图绘制方法
Feb 12 Javascript
Ionic快速安装教程
Jun 03 Javascript
JS中页面与页面之间超链接跳转中文乱码问题的解决办法
Dec 15 Javascript
angularjs实现分页和搜索功能
Jan 03 Javascript
Jquery动态列功能完整实例
Aug 30 jQuery
js实现点击选项置顶动画效果
Aug 25 Javascript
jQuery实现仿新浪微博浮动的消息提示框(可智能定位)
Oct 10 #Javascript
JS+DIV+CSS排版布局实现美观的选项卡效果
Oct 10 #Javascript
JS实现漂亮的窗口拖拽效果(可改变大小、最大化、最小化、关闭)
Oct 10 #Javascript
JavaScript实现的浮动层框架用法实例分析
Oct 10 #Javascript
表单验证插件Validation应用的实例讲解
Oct 10 #Javascript
JS实现的车标图片提示效果代码
Oct 10 #Javascript
jqTransform美化表单
Oct 10 #Javascript
You might like
JAVA/JSP学习系列之二
2006/10/09 PHP
php mail to 配置详解
2014/01/16 PHP
PHP获取POST数据的几种方法汇总
2015/03/03 PHP
List Information About the Binary Files Used by an Application
2007/06/11 Javascript
Confirmer JQuery确认对话框组件
2010/06/09 Javascript
js实现进度条的方法
2015/02/13 Javascript
深入理解JavaScript系列(40):设计模式之组合模式详解
2015/03/04 Javascript
js实现仿Discuz文本框弹出层效果
2015/08/13 Javascript
javascript cookie基础应用之记录用户名的方法
2016/09/20 Javascript
在DWR中实现直接获取一个JAVA类的返回值的两种方法
2016/12/25 Javascript
使用Dropzone.js上传的示例代码
2017/10/10 Javascript
浅谈Vuex@2.3.0 中的 state 支持函数申明
2017/11/22 Javascript
jquery的 filter()方法使用教程
2018/03/22 jQuery
vue 本地环境跨域请求proxyTable的方法
2018/09/19 Javascript
vue+iview 实现可编辑表格的示例代码
2018/10/31 Javascript
如何为vuex实现带参数的 getter和state.commit
2019/01/04 Javascript
原生javascript实现类似vue的数据绑定功能示例【观察者模式】
2020/02/24 Javascript
如何在node环境实现“get数据解析”代码实例
2020/07/03 Javascript
python解析xml文件实例分享
2013/12/04 Python
python基础教程之popen函数操作其它程序的输入和输出示例
2014/02/10 Python
举例详解Python中的split()函数的使用方法
2015/04/07 Python
python发送邮件功能实现代码
2016/07/15 Python
在Pycharm中自动添加时间日期作者等信息的方法
2019/01/16 Python
Python3多目标赋值及共享引用注意事项
2019/05/27 Python
简单了解python的一些位运算技巧
2019/07/13 Python
python3应用windows api对后台程序窗口及桌面截图并保存的方法
2019/08/27 Python
在python中利用pycharm自定义代码块教程(三步搞定)
2020/04/15 Python
Python连接Impala实现步骤解析
2020/08/04 Python
利用纯CSS3实现动态的自行车特效源码
2017/01/20 HTML / CSS
优秀电子工程系毕业生求职信
2014/05/24 职场文书
酒店餐厅2014重阳节活动策划方案
2014/09/16 职场文书
鲁迅故居导游词
2015/02/05 职场文书
结婚保证书(卖身契)
2015/02/26 职场文书
2015年计算机教学工作总结
2015/07/22 职场文书
python字符串拼接.join()和拆分.split()详解
2021/11/23 Python
Redis实战高并发之扣减库存项目
2022/04/14 Redis