函数式 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 相关文章推荐
永不消失的title提示代码
Feb 15 Javascript
js 跨域和ajax 跨域问题小结
Jul 01 Javascript
js与C#进行时间戳转换
Nov 14 Javascript
Underscore.js 1.3.3 中文注释翻译说明
Jun 25 Javascript
sencha ext js 6 快速入门(必看)
Jun 01 Javascript
AngularJS 实现弹性盒子布局的方法
Aug 30 Javascript
EasyUI 结合JS导出Excel文件的实现方法
Nov 10 Javascript
微信小程序实现点击返回顶层的方法
Jul 12 Javascript
微信小程序实现添加手机联系人功能示例
Nov 30 Javascript
angular4自定义组件非input元素实现ngModel双向数据绑定的方法
Dec 28 Javascript
微信小程序实现弹出菜单动画
Jun 21 Javascript
js单线程的本质 Event Loop解析
Oct 29 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+jQuery 注册模块开发详解
2014/10/14 PHP
为Plesk PHP7启用Oracle OCI8扩展方法总结
2019/03/29 PHP
JavaScript 创建运动框架的实现代码
2013/05/08 Javascript
jquery ajax属性async(同步异步)示例
2013/11/05 Javascript
AJAX跨域请求json数据的实现方法
2013/11/11 Javascript
使用js判断TextBox控件值改变然后出发事件
2014/03/07 Javascript
JavaScript中property和attribute的区别详细介绍
2015/03/03 Javascript
JavaScript中神奇的call()方法
2015/03/12 Javascript
基于jquery插件实现拖拽删除图片功能
2020/08/27 Javascript
JS实现的打字机效果完整实例
2016/06/20 Javascript
详解Jquery EasyUI tree 的异步加载(遍历指定文件夹,根据文件夹内的文件生成tree)
2017/02/11 Javascript
Angular2 父子组件数据通信实例
2017/06/22 Javascript
详解webpack进阶之loader篇
2017/08/23 Javascript
AngularJs ng-change事件/指令的用法小结
2017/11/01 Javascript
浅谈JsonObject中的key-value数据解析排序问题
2017/12/06 Javascript
详解基于Koa2开发微信二维码扫码支付相关流程
2018/05/16 Javascript
5分钟快速看懂ES6中的反射与代理
2019/12/19 Javascript
使用AutoJs实现微信抢红包的代码
2020/12/31 Javascript
[03:37]2016完美“圣”典 风云人物:Mikasa专访
2016/12/07 DOTA
python3实现跳一跳点击跳跃
2018/01/08 Python
Python面向对象实现一个对象调用另一个对象操作示例
2019/04/08 Python
PyTorch中的padding(边缘填充)操作方式
2020/01/03 Python
python读取ini配置的类封装代码实例
2020/01/08 Python
pytorch 中pad函数toch.nn.functional.pad()的用法
2020/01/08 Python
Python Unittest原理及基本使用方法
2020/11/06 Python
python如何修改文件时间属性
2021/02/05 Python
丝芙兰美国官网:SEPHORA美国
2016/08/03 全球购物
TCP/IP模型的分界线
2012/12/01 面试题
称象教学反思
2014/02/03 职场文书
活动总结报告格式
2014/05/09 职场文书
公证委托书格式
2014/09/13 职场文书
银行贷款收入证明
2014/10/17 职场文书
2014年幼儿园保育工作总结
2014/12/02 职场文书
小学班主任评语
2014/12/29 职场文书
初三语文教学反思
2016/03/03 职场文书
广告策划的实习心得体会总结!
2019/07/22 职场文书