函数式 JavaScript(一)简介


Posted in Javascript onJuly 07, 2014

让我们假装现在要完成一个任务:尽可能按照函数式语言的原则来写JavaScript代码。

接下来一系列文章就是为了让你们和我一起开始这样一段旅程。首先,我们需要纠正一些你们脑子中可能有的对函数式语言错误的概念。

JS语言中的函数式被严重误解。

很显然,有相当多的开发者要每天用JavaScript的函数式范式 。我想说有更大一部分JavaScript 开发者没有真正理解这些东西。

我认为造成这个的原因是绝大多数用于Web服务器端的开发语言都是来源于C,而大家都知道这些语言不是函数式语言。

一般有两个层面的困惑。第一层是关于以下示例中的用法,这是jQuery中非常常见的用法:

$(".signup").click(function(event){
    $("#signupModal").show();
    event.preventDefault();
});

在上面这段代码中:我们传了一个匿名函数作为参数,这就是在JavaScript 中臭名昭著的回调函数。这些函数会被调用吗?根本不会!

上面这个例子说明了函数式语言的一个关键特征:函数是一种参数。另一方面,这个例子只用三行代码违反了几乎所有能违反的函数式编程范式。

第二层的疑惑是更微妙的。看看这个:只有少数时髦的JS开发者是这样看自己的:

嗯,真不错!但是我已经完全了解函数式编程,我在所有的项目中都用了Underscore.js。

Underscore.js是一个非常著名并且随处可见的JavaScript 库。举个例子:假设我有一组词,并且我需要每个词对应的前两个字母。这用Underscore.js来写非常简单:

var firstTwoLetters = function(words){
    return _.map(words,function(word){
        return _.first(word,2);
    });
};

看这个JavaScript 例子。我用了函数式中精致又实用的函数:_.map和_.first。对于这个大家有什么想法?

虽然underscore.js和 _.map这样的函数都是很有用的函数式范式,但是像这个例子中这样把这些东西放在一起还是让我感到有些难以理解。我们真的需要这样做吗?

如果我们开始思考怎样才能更加“函数式”,也许我们可以把上面的例子改写成这样:

// ...a little bit of magic
var firstTwoLetters = map(first(2));

仔细想想,这一行代码和上面的5行是一样的效果。很多词只是参数或占位符。真正的逻辑在于把map函数、first函数和常量2用有意义的方式组合在一起。

有些人可能在想:这个例子中的神奇之处在哪里?毕竟,说任何一个例子神奇都有点像吹嘘,对吧?

我正打算用接下来的两篇文章来解释上面这个例子到底神奇在哪,如果你好奇的话,可以继续往下看。

这一系列博客是为了帮助大家怎样把函数式编程的美妙之处应用到你的JavaScript代码中。

下一节中,我将讨论JavaScript 语言中函数式及非函数式的多种元素。有了这些知识,我们可以通过把这些元素整合在一起,慢慢的在脑中形成函数式编程的完整体系,并且理解它们在JavaScript中的表现。

Javascript 相关文章推荐
JavaScript 设计模式 安全沙箱模式
Sep 24 Javascript
jquery 回车事件实现代码
Aug 23 Javascript
常见效果实现之返回顶部(结合淡入、淡出、减速滚动)
Jan 04 Javascript
UI Events 用户界面事件
Jun 27 Javascript
PHPMyAdmin导入时提示文件大小超出PHP限制的解决方法
Mar 30 Javascript
Angularjs中的事件广播 —全面解析$broadcast,$emit,$on
May 17 Javascript
angularJS 如何读写缓冲的方法(推荐)
Aug 06 Javascript
vue子组件使用自定义事件向父组件传递数据
May 27 Javascript
原生js封装运动框架的示例讲解
Oct 01 Javascript
利用jquery和BootStrap实现动态滚动条效果
Dec 03 jQuery
js实现二级联动简单实例
Jan 11 Javascript
一行JavaScript代码如何实现瀑布流布局
Dec 11 Javascript
5款JavaScript代码压缩工具推荐
Jul 07 #Javascript
jquery easyui使用心得
Jul 07 #Javascript
Node.js与PHP、Python的字符处理性能对比
Jul 06 #Javascript
我的Node.js学习之路(四)--单元测试
Jul 06 #Javascript
我的Node.js学习之路(三)--node.js作用、回调、同步和异步代码 以及事件循环
Jul 06 #Javascript
我的Node.js学习之路(二)NPM模块管理
Jul 06 #Javascript
我的Node.js学习之路(一)
Jul 06 #Javascript
You might like
PHP产生不重复随机数的5个方法总结
2014/11/12 PHP
PHP使用Redis长连接的方法详解
2018/02/12 PHP
php array 转json及java 转换 json数据格式操作示例
2019/11/13 PHP
TP5框架安全机制实例分析
2020/04/05 PHP
js面向对象 多种创建对象方法小结
2012/05/21 Javascript
js展开闭合效果演示代码
2013/07/24 Javascript
javascript window.open打开新窗口后无法再次打开该窗口问题的解决方法
2014/04/12 Javascript
JavaScript动态添加style节点的方法
2015/06/09 Javascript
Javascript的动态增加类的实现方法
2016/10/20 Javascript
javascript基本数据类型和转换
2017/03/17 Javascript
angularjs中使用ng-bind-html和ng-include的实例
2017/04/28 Javascript
vue.js利用defineProperty实现数据的双向绑定
2017/04/28 Javascript
基于Vue生产环境部署详解
2017/09/15 Javascript
JavaScript解析机制与闭包原理实例详解
2019/03/08 Javascript
pm2启动ssr失败的解决方法
2019/06/29 Javascript
JavaScript Array对象基本方法详解
2019/09/03 Javascript
javascript实现fetch请求返回的统一拦截
2019/12/22 Javascript
Vue中computed及watch区别实例解析
2020/08/01 Javascript
仅利用30行Python代码来展示X算法
2015/04/01 Python
Ubuntu下升级 python3.7.1流程备忘(推荐)
2018/12/10 Python
Python3 实现文件批量重命名示例代码
2019/06/03 Python
使用Python脚本zabbix自定义key监控oracle连接状态
2019/08/28 Python
Python 使用 Pillow 模块给图片添加文字水印的方法
2019/08/30 Python
Python实现平行坐标图的绘制(plotly)方式
2019/11/22 Python
python统计字符串中字母出现次数代码实例
2020/03/02 Python
记一次Django响应超慢的解决过程
2020/09/17 Python
大四毕业生学习总结的自我评价
2013/10/31 职场文书
办公室主任职责范文
2013/11/08 职场文书
2014年公务员思想汇报范文:全心全意为人民服务
2014/03/06 职场文书
捐资助学倡议书
2014/04/15 职场文书
信息员培训方案
2014/06/12 职场文书
党员学习中共十八大思想报告
2014/09/12 职场文书
党的群众路线教育实践活动个人自我剖析材料
2014/10/07 职场文书
2015年办公室主任工作总结
2015/04/09 职场文书
入党积极分子考察意见
2015/06/02 职场文书
导师鉴定意见
2015/06/05 职场文书