函数式 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提交整个表单元素的快捷办法
Mar 27 Javascript
jquery showModelDialog的使用方法示例详解
Nov 19 Javascript
JavaScript动态改变HTML页面元素例如添加或删除
Aug 10 Javascript
基于 Node.js 实现前后端分离
Apr 23 Javascript
浅析js绑定事件的常用方法
May 15 Javascript
JavaScript:Date类型全面解析
May 19 Javascript
angularjs中ng-attr的用法详解
Dec 31 Javascript
详解PHP中pathinfo()函数导致的安全问题
Jan 05 Javascript
jq源码解析之绑在$,jQuery上面的方法(实例讲解)
Oct 13 jQuery
微信小程序实现animation动画
Jan 26 Javascript
Vue-router的使用和出现空白页,路由对象属性详解
Sep 03 Javascript
vue项目中实现的微信分享功能示例
Jan 21 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
成本8450万,票房仅2亿,口碑两极分化,又一部DC电影扑街了
2020/04/09 欧美动漫
PHP n个不重复的随机数生成代码
2009/06/23 PHP
Erlang的运算符(比较运算符,数值运算符,移位运算符,逻辑运算符)
2012/07/23 PHP
php格式化电话号码的方法
2015/04/24 PHP
Yii2中cookie用法示例分析
2016/07/18 PHP
微信公众平台开发教程④ ThinkPHP框架下微信支付功能图文详解
2019/04/10 PHP
js鼠标左右键 键盘值小结
2010/06/11 Javascript
JavaScript 函数参数是传值(byVal)还是传址(byRef) 分享
2013/07/02 Javascript
javascript设计模式之工厂模式示例讲解
2014/03/04 Javascript
javascript中数组方法汇总
2015/07/07 Javascript
jQuery中使用animate自定义动画的方法
2016/05/29 Javascript
Google 地图事件实例讲解
2016/08/06 Javascript
BootStrap Typeahead自动补全插件实例代码
2016/08/10 Javascript
详解js的延迟对象、跨域、模板引擎、弹出层、AJAX【附实例下载】
2016/12/19 Javascript
jquery实现表单获取短信验证码代码
2017/03/13 Javascript
基于vue实现多引擎搜索及关键字提示
2017/03/16 Javascript
canvas简单快速的实现知乎登录页背景效果
2017/05/08 Javascript
微信小程序之电影影评小程序制作代码
2017/08/03 Javascript
Bootstrap框架建立树形菜单(Tree)的实例代码
2017/10/30 Javascript
vue2之简易的pc端短信验证码的问题及处理方法
2019/06/03 Javascript
js布局实现单选按钮控件
2020/01/17 Javascript
详解JavaScript之Array.reduce源码解读
2020/11/01 Javascript
python算法学习之基数排序实例
2013/12/18 Python
Python中对象迭代与反迭代的技巧总结
2016/09/17 Python
详解Python3.6的py文件打包生成exe
2018/07/13 Python
对Python3之进程池与回调函数的实例详解
2019/01/22 Python
Python matplotlib学习笔记之坐标轴范围
2019/06/28 Python
python如何使用socketserver模块实现并发聊天
2019/12/14 Python
Python本地及虚拟解释器配置过程解析
2020/10/13 Python
基于Python模拟浏览器发送http请求
2020/11/06 Python
HTML5 新事件 小结
2009/07/16 HTML / CSS
学期自我鉴定范文
2013/10/01 职场文书
汽车制造与装配专业自荐信范文
2014/01/02 职场文书
高中体育教学反思
2014/01/29 职场文书
秘书英文求职信范文
2014/01/31 职场文书
爱国主义教育演讲稿
2014/08/26 职场文书