函数式 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工具函数代码
Feb 17 Javascript
jquery的Theme和Theme Switcher使用小结
Sep 08 Javascript
表格奇偶行设置不同颜色的核心JS代码
Dec 24 Javascript
AngularJS内置指令
Feb 04 Javascript
详解JavaScript中数组和字符串的lastIndexOf()方法使用
Mar 13 Javascript
JS实现兼容各种浏览器的高级拖动方法完整实例【测试可用】
Jun 21 Javascript
BootStrap实现响应式布局导航栏折叠隐藏效果(在小屏幕、手机屏幕浏览时自动折叠隐藏)
Nov 30 Javascript
完美实现js选项卡切换效果(二)
Mar 08 Javascript
vue-router history模式下的微信分享小结
Jul 05 Javascript
创建Vue项目以及引入Iview的方法示例
Dec 03 Javascript
el-select 下拉框多选实现全选的实现
Aug 02 Javascript
vue的webcamjs集成方式
Nov 16 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
Smarty foreach控制循环次数的实现详解
2013/07/03 PHP
php获取本周开始日期和结束日期的方法
2015/03/09 PHP
php使用number_format函数截取小数的方法分析
2016/05/27 PHP
解决laravel-admin 自己新建页面里 js 需要刷新一次的问题
2019/10/03 PHP
判断多个元素(RADIO,CHECKBOX等)是否被选择的原理说明
2009/02/18 Javascript
setTimeout函数兼容各主流浏览器运行执行效果实例
2013/06/13 Javascript
javascript自然分类法算法实现代码
2013/10/11 Javascript
js日期对象兼容性的处理方法
2014/01/28 Javascript
jQuery中mouseover事件用法实例
2014/12/26 Javascript
JavaScript中的console.group()函数详细介绍
2014/12/29 Javascript
jquery插件uploadify实现带进度条的文件批量上传
2015/12/13 Javascript
JS获取一个未知DIV高度的方法
2016/08/09 Javascript
js/jq仿window文件夹框选操作插件
2017/03/08 Javascript
Vue.js实现移动端短信验证码功能
2017/03/29 Javascript
AugularJS从入门到实践(必看篇)
2017/07/10 Javascript
React-Native实现ListView组件之上拉刷新实例(iOS和Android通用)
2017/07/11 Javascript
VueJs单页应用实现微信网页授权及微信分享功能示例
2017/07/26 Javascript
基于Node.js模板引擎教程-jade速学与实战1
2017/09/17 Javascript
微信小程序下拉加载和上拉刷新两种实现方法详解
2019/09/05 Javascript
JavaScript享元模式原理与用法实例详解
2020/03/09 Javascript
windows10下python3.5 pip3安装图文教程
2018/04/02 Python
python中的decorator的作用详解
2018/07/26 Python
Python 实现两个列表里元素对应相乘的方法
2018/11/14 Python
Python Tkinter 简单登录界面的实现
2019/06/14 Python
python2 中 unicode 和 str 之间的转换及与python3 str 的区别
2019/07/25 Python
Python for循环通过序列索引迭代过程解析
2020/02/07 Python
pytorch数据预处理错误的解决
2020/02/20 Python
pytorch 实现在一个优化器中设置多个网络参数的例子
2020/02/20 Python
python制作抽奖程序代码详解
2021/01/15 Python
HTML5全屏(Fullscreen)API详细介绍
2015/04/24 HTML / CSS
Agoda台湾官网:国内外订房2折起
2018/03/20 全球购物
C#里面可以避免一个类被其他类继承么?如何?
2013/09/26 面试题
个人租房协议书(范本)
2014/10/14 职场文书
2015年为民办实事工作总结
2015/05/26 职场文书
保外就医申请书范文
2015/08/06 职场文书
幼儿园小班教育随笔
2015/08/14 职场文书