函数式 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 相关文章推荐
jquery ajax abort()的使用方法
Oct 28 Javascript
javascript中的return和闭包函数浅析
Jun 06 Javascript
AngularJS向后端ASP.NET API控制器上传文件
Feb 03 Javascript
非常实用的js验证框架实现源码 附原理方法
Jun 08 Javascript
JS实现的表格行上下移动操作示例
Aug 03 Javascript
ES6 Promise对象概念与用法分析
Apr 01 Javascript
详解Angular2 之 结构型指令
Jun 21 Javascript
使用jQuery实现动态添加小广告
Jul 11 jQuery
webpack中CommonsChunkPlugin详细教程(小结)
Nov 09 Javascript
vue使用iframe嵌入网页的示例代码
Jun 09 Javascript
javascript实现考勤日历功能
Nov 29 Javascript
JS端基于download.js实现图片、视频时直接下载而不是打开预览
May 09 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 Memcached应用实现代码
2010/02/08 PHP
web站点获取用户IP的安全方法 HTTP_X_FORWARDED_FOR检验
2013/06/01 PHP
php的laravel框架快速集成微信登录的方法
2016/12/12 PHP
php装饰者模式简单应用案例分析
2019/10/23 PHP
js文件中调用js的实现方法小结
2009/10/23 Javascript
基于jquery的一个图片hover的插件
2010/04/24 Javascript
javascript 45种缓动效果 非常酷
2011/06/28 Javascript
Jquery 类网页微信二维码图块滚动效果具体实现
2013/10/14 Javascript
js中document.write的那点事
2014/12/12 Javascript
Javascript 多物体运动的实现
2014/12/24 Javascript
有关json_decode乱码及NULL的问题
2015/10/13 Javascript
jQuery实现宽屏图片轮播实例教程
2015/11/24 Javascript
简单介绍jsonp 使用小结
2016/01/27 Javascript
理解javascript中的with关键字
2016/02/15 Javascript
jQuery插件zTree实现清空选中第一个节点所有子节点的方法
2017/03/08 Javascript
使用命令行工具npm新创建一个vue项目的方法
2017/12/27 Javascript
vue webpack打包优化操作技巧
2018/02/22 Javascript
记录vue项目中遇到的一点小问题
2019/05/14 Javascript
vue - vue.config.js中devServer配置方式
2019/10/30 Javascript
Vue3项目打包后部署到服务器 请求不到后台接口解决方法
2020/02/06 Javascript
使用Python编写一个模仿CPU工作的程序
2015/04/16 Python
Python实现KNN邻近算法
2021/01/28 Python
Python实现爬虫抓取与读写、追加到excel文件操作示例
2018/06/27 Python
Python字典遍历操作实例小结
2019/03/05 Python
pandas DataFrame 行列索引及值的获取的方法
2019/07/02 Python
python与idea的集成的实现
2020/11/20 Python
CSS3 实现穿梭星空动画
2020/11/13 HTML / CSS
html5教程实现Photoshop渐变色效果
2013/12/04 HTML / CSS
丝芙兰波兰:Sephora.pl
2018/03/25 全球购物
实现strstr功能,即在父串中寻找子串首次出现的位置
2016/08/05 面试题
《棉鞋里的阳光》教学反思
2016/02/20 职场文书
2019年朋友圈经典励志语录50条
2019/07/05 职场文书
蔬果开业典礼发言稿应该怎么写?
2019/09/03 职场文书
Nginx设置日志打印post请求参数的方法
2021/03/31 Servers
MySQL 8.0 驱动与阿里druid版本兼容问题解决
2021/07/01 MySQL
PyTorch中permute的使用方法
2022/04/26 Python