函数式 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 isArray()函数判断对象类型的种种方法
Oct 11 Javascript
iframe实用操作锦集
Apr 22 Javascript
jQuery使用andSelf()来包含之前的选择集
May 19 Javascript
Node.js的特点和应用场景介绍
Nov 04 Javascript
解决jquery实现的radio重新选中的问题
Jul 03 Javascript
JS模仿编辑器实时改变文本框宽度和高度大小的方法
Aug 17 Javascript
js点击文本框后才加载验证码实例代码
Oct 20 Javascript
深入理解js中this的用法
May 28 Javascript
关于在Servelet中如何获取当前时间的操作方法
Jun 28 Javascript
vue实现购物车抛物线小球动画效果的方法详解
Feb 13 Javascript
JS实现多选框的操作
Jun 24 Javascript
Angular性能优化之第三方组件和懒加载技术
May 10 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生成EXCEL的东东
2006/10/09 PHP
ecshop实现smtp发送邮件
2015/02/03 PHP
Android App中DrawerLayout抽屉效果的菜单编写实例
2016/03/21 PHP
PHP反射API示例分享
2016/10/08 PHP
dojo学习第二天 ajax异步请求之绑定列表
2011/08/29 Javascript
js动态生成指定行数的表格
2013/07/11 Javascript
文本框回车提交与禁止提交示例
2013/09/27 Javascript
jquery实现简单手风琴菜单效果实例
2015/06/13 Javascript
移动端 一个简单易懂的弹出框
2016/07/06 Javascript
省市二级联动小案例讲解
2016/07/24 Javascript
vue上传图片到oss的方法示例(图片带有删除功能)
2018/09/27 Javascript
vue中组件的过渡动画及实现代码
2018/11/21 Javascript
js根据需要计算数组中重复出现某个元素的个数
2019/01/18 Javascript
bootstrap table实现横向合并与纵向合并
2019/07/18 Javascript
[02:46]2014DOTA2国际邀请赛 选手为你解读比赛MVP充满梦想
2014/07/09 DOTA
重命名批处理python脚本
2013/04/05 Python
python with statement 进行文件操作指南
2014/08/22 Python
Python中str.format()详解
2017/03/12 Python
Django自定义用户认证示例详解
2018/03/14 Python
解决Pycharm中import时无法识别自己写的程序方法
2018/05/18 Python
python实现汉诺塔算法
2021/03/01 Python
解决Pyinstaller 打包exe文件 取消dos窗口(黑框框)的问题
2019/06/21 Python
Flask配置Cors跨域的实现
2019/07/12 Python
pandas通过字典生成dataframe的方法步骤
2019/07/23 Python
详解python列表(list)的使用技巧及高级操作
2019/08/15 Python
Python正则表达式急速入门(小结)
2019/12/16 Python
文明家庭先进事迹材
2014/01/27 职场文书
商场消防安全责任书
2014/07/29 职场文书
英语课前三分钟演讲稿
2014/08/19 职场文书
旅游局领导班子“四风”问题对照检查材料思想汇报
2014/09/29 职场文书
2014年社区矫正工作总结
2014/11/18 职场文书
个人党性分析总结
2015/03/05 职场文书
2015年酒店工作总结
2015/04/28 职场文书
2015小学教师年度工作总结
2015/05/12 职场文书
二胎满月酒致辞
2015/07/29 职场文书
CSS实现背景图片全屏铺满自适应的3种方式
2022/07/07 HTML / CSS