函数式 JavaScript（一）简介

让我们假装现在要完成一个任务：尽可能按照函数式语言的原则来写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中的表现。

赞 (0)

相关推荐

  • JavaScript DOM学习第一章 W3C DOM简介

    在这一章我主要介绍已经被新一代的浏览器所支持的W3C 第一级的DOM.对他的运作做一个大概的了解并且让你知道你可以对他们做什么. 首先是对于DOM的一些建议和DOM设计的目的,然后我会告诉你什么是节点(nodes)并且怎样通过DOM树来遍历节点.接着是如何得到一个特定的节点,以及怎样改变他的值和属性.最后就是DOM的终极目标:怎么创建一个自己的新节点. 建议 Level 1DOM是W3C制定的用来提供给任何程序语言来访问XML文档的.不管你用什么语言程序来处理XML文档,只要是Level 1DO

  • JavaScript 调试器简介

    但是仅从调试的角度来说,这些调试器的功能是完全够用的.其实我更需要的不是一个 JavaScript IDE,而是一个 JavaScript 重构工具,这样可以使我快速地对 JavaScript 组件进行重构,比使用 UltraEdit 进行查找/替换的原始方法效率会提高很多,而且更加安全.其实任何一种没有重构工具的语言的开发效率都是没有办法和 Java 这样的语言(有 Eclipse.IDEA 等等强大的重构工具)相提并论的.共产主义尚未实现,这确实是现实,但是并不意味着我们就一定要等待,就没有

  • JavaScript DOM 学习第五章 表单简介

    因为每一个表单的检测项都不同,所以我也不能给你一个万能的代码.你需要用我在这一章介绍的这些元素构建自己的检测函数.我在后面一张还有一个例子,你也可以参考. 在这一章我会首先讨论一下用JavaScript来检测表单的局限性,然后会解释一下提交时间处理程序,然后是表单本身的一些方法和属性.最后就是如何访问表单元素. 这里还有一篇Jeff Howden的介绍表单的使用错误和解决办法.Forms & JavaScript Living Together in Harmony局限性 首先,你需要了解当用户

  • javascript 基础简介 适合新手学习

    1. 关于JavaScript简单介绍 Ø 在网络或书籍所说的JavaScript大部分指客户端JavaScript. Ø JavaScript是一种轻量型.解释型.面向对象的编程语言. Ø JavaScript特性 1) 控制文档的外观和内容 2) 控制浏览器 3) 和HTML表单的交互 4) 和用户的交互 5) 用Cookie读写用户状态 6) 其它 2. 词法结构 2.1. 字符集 JavaScript程序是用Unicode字符集编写的. 2.2. 区分大小写 JavaScript是一种区

  • JavaScript 事件冒泡简介及应用

    一.什么是事件冒泡 在一个对象上触发某类事件(比如单击onclick事件),如果此对象定义了此事件的处理程序,那么此事件就会调用这个处理程序,如果没有定义此事件处理程序或者事件返回true,那么这个事件会向这个对象的父级对象传播,从里到外,直至它被处理(父级对象所有同类事件都将被激活),或者它到达了对象层次的最顶层,即document对象(有些浏览器是window). 打个比方说:你在地方法院要上诉一件案子,如果地方没有处理此类案件的法院,地方相关部门会帮你继续往上级法院上诉,比如从市级到省级,

  • JavaScript简介

    本文不是参考手册式文章,仅适用于对JS产生一个大致的认知,如需JS的详细语法与应用请移步w3school JavaScript是什么? JavaScript的诞生 在1995年前后,当时世界上的主流带宽为28.8Kbps,现在世界平均下载带宽为21.9Mbps(数据来源于http://www.netindex.com).当时的网民,每提交一次表单,都需要等待很久才能收到服务器的回应,甚至很可能等了几分钟收到的却是说缺少了某一项.为了改善用户体验,嵌入浏览器客户端的能实现简单表单判断的脚本诞生了,

  • Javascript前端UI框架Kit使用指南之Kitjs简介

    Javascript前端UI框架Kit使用指南之Kitjs简介

    Kitjs,(http://xueduany.github.com/KitJs),是我2011年底,离开淘宝UED之后,自己搞起的一套HTML5的前端widget库,原本的用途主攻手机端HTML页面交互组件使用,正如其字面意思Kit一样,愿景是做一个娇小,实用,既可以直接拿来用,也可以很方便做2次开发的一套组件.后来由于项目的越做越大,组件数的膨胀,也加入PC端浏览器(IE6+,FF,chrome核心系列等等)的支持,不再仅限于原来手机开发领域,开始正式迈向全平台.所以近期也对原来的所有模块按照

  • javascript中的window.location.search方法简介

    window.location.search方法是截取当前url中"?"后面的字符串, 例如:index.php?act=doctor,截取后的字符串就是act=doctor

  • javascript提取内容到作为文章简介的代码

    我们 www.jb51.net //字符长度 function limitL(){ var content=document.getElementById("content").value; if(content.length > 100){ content = content.substring(0,100); } document.getElementById("jianjie").value = content; } 有时真想做一个稻草人,站在一望无际的

  • 编程语言JavaScript简介

    JavaScript 是什么? JavaScript 是一种广泛应用于客户端网页(浏览器)开发的脚本语言,如用来给 HTML 网页添加动态功能,比如响应用户的各种操作等.JavaScript 是一种基于对象(Object)和事件驱动(Event Driven)并具有安全性能的脚本语言,大部分情况下是由网页浏览器来执行的. JavaScript 是美国 Sun 公司的注册商标,目前 Javascript 的最新版本为 1.9 版,遵循 Ecma 国际(前身为欧洲计算机制造商协会)的 ECMA-26

  • javascript中数组的多种定义方法和常用函数简介

    数组的定义:方法1. 复制代码 代码如下: var mycars=new Array()mycars[0]="sharejs.com"mycars[1]="Volvo"mycars[2]="BMW" 方法2.定义和初始化一起: 复制代码 代码如下: var mycars=new Array("Saab","Volvo","BMW"); 或者: 复制代码 代码如下: var mycars=

  • JavaScript静态类型检查工具FLOW简介

    Flow是Facebook出品的,针对JavaScript的静态类型检查工具.其代码托管在github之上,并遵守BSD开源协议. 关于Flow 它可以帮助我们捕获JavaScript开发中的常见错误,而不需要额外地修改你原有的代码,比如静态类型转换,空值引用等问题. 同时,Flow为JavaScript添加了静态类型的语法标识,这样开发者便可以明确代码中的类型,让其自动地被Flow所维护. 目前,Flow具有以下两特性: 1. Flow的类型检查具有可选性 除非你明确告诉Flow需要对某些文件

  • MongoDB中javascript脚本编程简介和入门实例

    注:作者使用的mongodb版本为2.4.7. 入门例子 复制代码 代码如下: conn = new Mongo();db = conn.getDB("db-name");  //选择数据库db.auth("user-name","password");  //用户验证 var map = function() {    split_result = this.sentence.split(" ");    for (var

随机推荐