新书终于截稿,今天稍有空闲,为大家奉献一篇关于 JavaScript 语言风格的文章,主角是函数声明式。

灵活的 JavaScript 及其 multiparadigm

相信“函数式”这个概念对于很多前端开发者早已不再陌生:我们知道 JavaScript 是一门非常灵活,融合多模式(multiparadigm)的语言,这篇文章将会展示 JavaScript 里命令式语言风格和声明式风格的切换,目的在于使读者了解这两种不同语言模式的各自特点,进而在日常开发中做到合理选择,发挥 JavaScript 的最大威力。

为了方便说明,我们从典型的事件发布订阅系统入手,一步步完成函数式风格的改造。事件发布订阅系统,即所谓的观察者模式(Pub/Sub 模式),秉承事件驱动(event-driven)思想,实现了“高内聚、低耦合”的设计。如果读者对于此模式尚不了解,建议先阅读我的原创文章:探索 Node.js 事件机制源码 打造属于自己的事件发布订阅系统。这篇文章中从 Node.js 源码入手,剖析了事件发布订阅系统的实现,并基于 ES Next 语法,实现了一个命令式的事件发布模式。对于此基础内容,本文不再过多展开。

典型 EventEmitter 和改造挑战

了解事件发布订阅系统实现思想,我们来看一段简单且典型的基础实现:

class EventManager {
construct (eventMap = new Map()) {
this.eventMap = eventMap;
}
addEventListener (event, handler) {
if (this.eventMap.has(event)) {
this.eventMap.set(event, this.eventMap.get(event).concat([handler]));
} else {
this.eventMap.set(event, [handler]);
}
}
dispatchEvent (event) {
if (this.eventMap.has(event)) {
const handlers = this.eventMap.get(event);
for (const i in handlers) {
handlers[i]();
}
}
}
}

上面代码,实现了一个 EventManager 类:我们维护一个 Map 类型的 eventMap,对不同事件的所有回调函数(handler)进行维护。

  • addEventListener 方法对指定事件进行回调函数存储;
  • dispatchEvent 方法对指定的触发事件,逐个执行其回调函数。

在消费层面:

const em = new EventManager();
em.addEventListner('hello', function() {
console.log('hi');
});
em.dispatchEvent('hello'); // hi

这些都比较好理解。下面我们的挑战是:

  • 将以上 20 多行命令式的代码,转换为 7 行 2 个表达式的声明式代码;
  • 不再使用 {...} 和 if 判断条件;
  • 采用纯函数实现,规避副作用;
  • 使用一元函数,即函数方程式中只需要一个参数;
  • 使函数实现可组合(composable);
  • 代码实现要干净、优雅、低耦合。

Step1: 使用函数取代 class

基于以上挑战内容,addEventListener 和 dispatchEvent,不再作为 EventManager 类的方法出现,而成为两个独立的函数,eventMap 作为变量:

const eventMap = new Map();

function addEventListener (event, handler) {
if (eventMap.has(event)) {
eventMap.set(event, eventMap.get(event).concat([handler]));
} else {
eventMap.set(event, [handler]);
}
}
function dispatchEvent (event) {
if (eventMap.has(event)) {
const handlers = this.eventMap.get(event);
for (const i in handlers) {
handlers[i]();
}
}
}

在模块化的需求下,我们可以 export 这两个函数:

export default {addEventListener, dispatchEvent};

同时使用 import 引入依赖,注意 import 使用都是单例模式(singleton):

import * as EM from './event-manager.js';
EM.dispatchEvent('event');

因为模块是单例情况,所以在不同文件引入时,内部变量 eventMap 是共享的,完全符合预期。

Step2: 使用箭头函数

箭头函数区别于传统的函数表达式,更符合函数式“口味”:

const eventMap = new Map();
const addEventListener = (event, handler) => {
if (eventMap.has(event)) {
eventMap.set(event, eventMap.get(event).concat([handler]));
} else {
eventMap.set(event, [handler]);
}
}
const dispatchEvent = event => {
if (eventMap.has(event)) {
const handlers = eventMap.get(event);
for (const i in handlers) {
handlers[i]();
}
}
}

这里要格外注意箭头函数对 this 的绑定。

Step3: 去除副作用,增加返回值

为了保证纯函数特性,区别于上述处理,我们不能再去改动 eventMap,而是应该返回一个全新的 Map 类型变量,同时对 addEventListener 和 dispatchEvent 方法的参数进行改动,增加了“上一个状态”的 eventMap,以便推演出全新的 eventMap:

const addEventListener = (event, handler, eventMap) => {
if (eventMap.has(event)) {
return new Map(eventMap).set(event, eventMap.get(event).concat([handler]));
} else {
return new Map(eventMap).set(event, [handler]);
}
}
const dispatchEvent = (event, eventMap) => {
if (eventMap.has(event)) {
const handlers = eventMap.get(event);
for (const i in handlers) {
handlers[i]();
}
}
return eventMap;
}

没错,这个过程就和 Redux 中的 reducer 函数极其类似。保持函数的纯净,是函数式理念中极其重要的一点。

Step4: 去除声明风格的 for 循环

接下来,我们使用 forEach 代替 for 循环:

const addEventListener = (event, handler, eventMap) => {
if (eventMap.has(event)) {
return new Map(eventMap).set(event, eventMap.get(event).concat([handler]));
} else {
return new Map(eventMap).set(event, [handler]);
}
}
const dispatchEvent = (event, eventMap) => {
if (eventMap.has(event)) {
eventMap.get(event).forEach(a => a());
}
return eventMap;
}

Step5: 应用二元运算符

我们使用 || 和 && 来使代码更加具有函数式风格:

const addEventListener = (event, handler, eventMap) => {
if (eventMap.has(event)) {
return new Map(eventMap).set(event, eventMap.get(event).concat([handler]));
} else {
return new Map(eventMap).set(event, [handler]);
}
}
const dispatchEvent = (event, eventMap) => {
return (
eventMap.has(event) &&
eventMap.get(event).forEach(a => a())
) || event;
}

需要格外注意 return 语句的表达式:

return (
eventMap.has(event) &&
eventMap.get(event).forEach(a => a())
) || event;

Step6: 使用三目运算符代替 if

三目运算符更加直观简洁:

const addEventListener = (event, handler, eventMap) => {
return eventMap.has(event) ?
new Map(eventMap).set(event, eventMap.get(event).concat([handler])) :
new Map(eventMap).set(event, [handler]);
}
const dispatchEvent = (event, eventMap) => {
return (
eventMap.has(event) &&
eventMap.get(event).forEach(a => a())
) || event;
}

Step7: 去除花括号 {...}

因为箭头函数总会返回表达式的值,我们不在需要任何 {...} :

const addEventListener = (event, handler, eventMap) =>
eventMap.has(event) ?
new Map(eventMap).set(event, eventMap.get(event).concat([handler])) :
new Map(eventMap).set(event, [handler]); const dispatchEvent = (event, eventMap) =>
(eventMap.has(event) && eventMap.get(event).forEach(a => a())) || event;

Step8: 完成 currying 化

最后一步就是实现 currying 化操作,具体思路将我们的函数变为一元(只接受一个参数),实现方法即使用高阶函数(higher-order function)。为了简化理解,读者可以认为即是将参数 (a, b, c) 简单的变成 a => b => c 方式:

const addEventListener = handler => event => eventMap =>
eventMap.has(event) ?
new Map(eventMap).set(event, eventMap.get(event).concat([handler])) :
new Map(eventMap).set(event, [handler]); const dispatchEvent = event => eventMap =>
(eventMap.has(event) && eventMap.get(event).forEach (a => a())) || event;

如果读者对于此理解有一定困难,建议先补充一下 currying 化知识,这里不再展开。

当然这样的处理,需要考虑一下参数的顺序。我们通过实例,来进行消化。

currying 化使用:

const log = x => console.log (x) || x;
const myEventMap1 = addEventListener(() => log('hi'))('hello')(new Map());
dispatchEvent('hello')(myEventMap1); // hi

partial 使用:


const log = x => console.log (x) || x;
let myEventMap2 = new Map();
const onHello = handler => myEventMap2 = addEventListener(handler)('hello')(myEventMap2);
const hello = () => dispatchEvent('hello')(myEventMap2); onHello(() => log('hi'));
hello(); // hi

熟悉 python 的读者可能会更好理解 partial 的概念。简单来说,函数的 partial 应用可以理解为:

函数在执行时,要带上所有必要的参数进行调用。但是,有时参数可以在函数被调用之前提前获知。这种情况下,一个函数有一个或多个参数预先就能用上,以便函数能用更少的参数进行调用。

对于 onHello 函数,其参数即表示 hello 事件触发时的回调。这里 myEventMap2 以及 hello 事件等都是预先设定好的。对于 hello 函数同理,它只需要出发 hello 事件即可。

组合使用:

const log = x => console.log (x) || x;
const compose = (...fns) => fns.reduce((f, g) => (...args) => f(g(...args)));
const addEventListeners = compose(
log,
addEventListener(() => log('hey'))('hello'),
addEventListener(() => log('hi'))('hello')
); const myEventMap3 = addEventListeners(new Map()); // myEventMap3
dispatchEvent('hello')(myEventMap3); // hi hey

这里需要格外注意 compose 方法。熟悉 Redux 的读者,如果阅读过 Redux 源码,对于 compose 一定并不陌生。我们通过 compose,实现了对于 hello 事件的两个回调函数组合,以及 log 函数组合。

关于 compose 方法的奥秘,以及不同实现方式,请关注作者:Lucas HC,我将会专门写一篇文章介绍,并分析为什么 Redux 对 compose 的实现稍显晦涩,同时剖析一种更加直观的实现方式。

总结

函数式理念也许对于初学者并不是十分友好。读者可以根据自身熟悉程度以及偏好,在上述 8 个 steps 中,随时停止阅读。同时欢迎讨论。

本文意译了 Martin Novák 的 新文章,欢迎大神斧正。

广告时间:
如果你对前端发展,尤其 React 技术栈感兴趣:我的新书中,也许有你想看到的内容。关注作者 Lucas HC,新书出版将会有送书活动。

Happy Coding!

PS: 作者 Github仓库 和 知乎问答链接 欢迎各种形式交流。

EventEmitter:从命令式 JavaScript class 到声明函数式的华丽转身的更多相关文章

  1. JavaScript:了解一下函数式编程

    一.简介 在JavaScript中,函数就是第一类公民,它可以像字符串.数字等变量一样,使用var修饰并作为数据使用.它可以作为数值.可以作为参数.还可以作为返回结果.可以说JavaScript就是函 ...

  2. JavaScript中变量声明有var和没var的区别

    JavaScript中变量声明有var和没var的区别 JavaScript中有var和没var的区别 Js中的变量声明的作用域是以函数为单位,所以我们经常见到避免全局变量污染的方法是 (functi ...

  3. javascript的变量声明、数据类型

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  4. javascript语法之声明变量

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  5. JavaScript的函数声明与函数表达式的区别

    1)函数声明(Function Declaration); // 函数声明 function funDeclaration(type){ return type==="Declaration ...

  6. 转载 JavaScript的函数声明与函数表达式的区别

    1)函数声明(Function Declaration); // 函数声明 function funDeclaration(type){ return type==="Declaration ...

  7. javascript:function 函数声明和函数表达式 详解

    函数声明(缩写为FD)是这样一种函数: 有一个特定的名称 在源码中的位置:要么处于程序级(Program level),要么处于其它函数的主体(FunctionBody)中 在进入上下文阶段创建 影响 ...

  8. JavaScript 基础 (变量声明, 数据类型, 控制语句)

    创建: 2017/09/16 更新: 2017/09/24 更改标题 [JavaScript 概要]-> [JavaScript 基础] 完成: 2017/09/25 更新: 2017/10/0 ...

  9. javascript中函数声明、变量声明以及变量赋值之间的关系与影响

    javascript中函数声明.变量声明以及变量赋值之间的关系与影响 函数声明.变量声明以及变量赋值之间有以下几点共识: 1.所有的全局变量都是window的属性 2.函数声明被提升到范围作用域的顶端 ...

随机推荐

  1. PAT甲级——1002 A+B for Polynomials

    PATA1002 A+B for Polynomials This time, you are supposed to find A+B where A and B are two polynomia ...

  2. 系统学习javaweb4----CSS层叠样式表(结束)

    摘要:这几天临近过年,事情有点多,学习总是段段续续的,今天总算完成了CSS的基本知识学习. 学习笔记: 西瓜学习javaweb 1.css简述. 1.1 css是什么?有什么作用? HTML----- ...

  3. jquery JavaScript如何监听button事件

    下面的html页面中有两个按钮 <div class="layui-tab-item layui-show"> <form class="layui-f ...

  4. 网站爬取-案例四:知乎抓取(COOKIE登录抓取个人中心)(第二卷)

    接着上卷来分析,作为开发人员我们都知道,登录是一个想指定URL发送POST请求的过程,所以我们需要找到请求的URL,以及字段,先用一个错误账号和密码做一下尝试,如果是正确的话会直接跳转到别的页面,这样 ...

  5. djangp-filter的使用

    目录 Filter定义 Filter定义 定义如下Filter类 class BookFilter(django_filters.FilterSet): name = django_filters.C ...

  6. MySQL性能优化的21条最佳经验

    英文原文:<Top 20+ MySQL Best Practices>,编译:陈皓 今天,数据库的操作越来越成为整个应用的性能瓶颈了,这点对于Web应用尤其明显.关于数据库的性能,这并不只 ...

  7. HDU 5978 To begin or not to begin

    题目:HDU 5978 To begin or not to begin 思路: 题目意思是说:给出n个黑球,一个红球,拿到红球的人胜利.如果先手有优势的输出 1 ,没有优势的输出 2 ,机会均等则输 ...

  8. JVM核心组成部分与作用介绍

    jvm由多个部分组成运作的 1.class loader类加载器: 加载类到内存里面,Class loader只需负责加载. 符合条件结构就加载到里面跑, 是否能运行顺利或者有没有错误异常,则需要Ex ...

  9. jquery mobile AJAX特性的陷阱

    简单情况是 MVC 重定向,URL不变 试了N种方式,跳来跳去,无解,服务端跳,写JS跳,生成跳转中间页跳.失败 后来一看,明明已经跳到新页了,样式什么还是原页的,有点火大了. 出去溜一圈,喝杯水,和 ...

  10. js 函数的防抖(debounce)与节流(throttle)

    原文:函数防抖和节流: 序言: 我们在平时开发的时候,会有很多场景会频繁触发事件,比如说搜索框实时发请求,onmousemove, resize, onscroll等等,有些时候,我们并不能或者不想频 ...