函数式 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 相关文章推荐
两种WEB下的模态对话框 (asp.net或js的分别实现)
Dec 02 Javascript
SlideView 图片滑动(扩展/收缩)展示效果
Aug 01 Javascript
jquery时间下拉框小例子
Apr 15 Javascript
js统计页面的来访次数实现代码
May 09 Javascript
js获取窗口相对于屏幕左边和上边的位置坐标
May 15 Javascript
angularJS中$apply()方法详解
Jan 07 Javascript
JavaScript Function函数类型介绍
Apr 08 Javascript
JSON简介以及用法汇总
Feb 21 Javascript
JS尾递归的实现方法及代码优化技巧
Jan 19 Javascript
详解vue3.0 的 Composition API 的一种使用方法
Oct 26 Javascript
vue使用exif获取图片经纬度的示例代码
Dec 11 Vue.js
JavaScript点击按钮生成4位随机验证码
Jan 28 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 adodb分页实现代码
2009/03/19 PHP
php模板引擎技术简单实现
2016/03/15 PHP
thinkphp实现分页显示功能
2016/12/03 PHP
php 访问oracle 存储过程实例详解
2017/01/08 PHP
ThinkPHP3.2框架使用addAll()批量插入数据的方法
2017/03/16 PHP
Laravel使用支付宝进行支付的示例代码
2017/08/16 PHP
php实现微信支付之企业付款
2018/05/30 PHP
PHP Cli 模式设置进程名称的方法
2019/06/12 PHP
PHP的HTTP客户端Guzzle简单使用方法分析
2019/10/30 PHP
[原创]保存的js无法执行的解决办法
2007/02/25 Javascript
JQuery小知识
2010/10/15 Javascript
Jquery 切换不同图片示例代码
2013/12/05 Javascript
javascript实现的一个带下拉框功能的文本框
2014/05/08 Javascript
JavaScript引用类型和基本类型详解
2016/01/06 Javascript
浅谈JS函数定义方式的区别
2016/10/30 Javascript
详解微信小程序开发—你期待的分享功能来了,微信小程序序新增5大功能
2016/12/23 Javascript
关于Mac下安装nodejs、npm和cnpm的教程
2018/04/11 NodeJs
vuex state及mapState的基础用法详解
2018/04/19 Javascript
一步步教你利用Docker设置Node.js
2018/11/20 Javascript
GOJS+VUE实现流程图效果
2018/12/01 Javascript
Electron vue的使用教程图文详解
2019/07/05 Javascript
如何通过shell脚本自动生成vue文件详解
2019/09/10 Javascript
vue实现倒计时获取验证码效果
2020/04/17 Javascript
jquery绑定事件 bind和on的用法与区别分析
2020/05/22 jQuery
原生js实现弹幕效果
2020/11/29 Javascript
[40:17]2018DOTA2亚洲邀请赛 4.5 淘汰赛 LGD vs Liquid 第一场
2018/04/06 DOTA
Python命令行参数解析工具 docopt 安装和应用过程详解
2019/09/26 Python
Python ATM功能实现代码实例
2020/03/19 Python
PyQt5通过信号实现MVC的示例
2021/02/06 Python
Expedia马来西亚旅游网站:廉价酒店,度假村和航班预订
2016/07/26 全球购物
优衣库美国官网:UNIQLO美国
2018/04/14 全球购物
美国高档帽子网上商店:Hats.com
2018/08/09 全球购物
澳大利亚排名第一的狂热牛仔品牌:ONETEASPOON
2018/11/20 全球购物
Delphi软件工程师试题
2013/01/29 面试题
小组名称和口号
2014/06/09 职场文书
离婚协议书怎么写
2014/09/12 职场文书