前言:为什么要学习这个方法

遇到这个方法主要是最近在阅读redux,koa 原理 等多次遇到这个方法,为了更好地理解框架原理,于是深入学习了一下compose的实现。

然后也发现这属于函数式编程的东西,发现函数式编程是进击前端进阶的必经之路,因为像其中的纯函数的概念在redux的reducer中也展示得淋漓尽致​,而保留函数计算结果的思想无论是在vue,还是react等其他框架也多处见到。

所以建议​有时间可以去看下函数试编程。

接下来,就让我们学习下其中的compose函数吧​!

compose简介

compose就是执行一系列的任务(函数),比如有以下任务队列

let tasks = [step1, step2, step3, step4]

每一个step都是一个步骤,按照步骤一步一步的执行到结尾,这就是一个compose

compose在函数式编程中是一个很重要的工具函数,在这里实现的compose有三点说明

  • 第一个函数是多元的(接受多个参数),后面的函数都是单元的(接受一个参数)
  • 执行顺序的自右向左的
  • 所有函数的执行都是同步的

还是用一个例子来说,比如有以下几个函数

let init = (...args) => args.reduce((ele1, ele2) => ele1 + ele2, 0)
let step2 = (val) => val + 2
let step3 = (val) => val + 3
let step4 = (val) => val + 4

这几个函数组成一个任务队列

steps = [step4, step3, step2, init]

使用compose组合这个队列并执行

let composeFunc = compose(...steps)

console.log(composeFunc(1, 2, 3))

执行过程

6 -> 6 + 2 = 8 -> 8 + 3 = 11 -> 11 + 4 = 15

所以流程就是从init自右到左依次执行,下一个任务的参数是上一个任务的返回结果,并且任务都是同步的,这样就能保证任务可以按照有序的方向和有序的时间执行。

compose的实现

好了,我们现在已经知道compose是什么东西了,现在就来实现它吧!

最容易理解的实现方式

思路就是使用递归的过程思想,不断的检测队列中是否还有任务,如果有任务就执行,并把执行结果往后传递,这里是一个局部的思维,无法预知任务何时结束。直观上最容易理解。

const compose = function(...funcs) {
let length = funcs.length
let count = length - 1
let result
return function f1 (...arg1) {
result = funcs[count].apply(this, arg1)
if (count <= 0) {
count = length - 1
return result
}
count--
return f1.call(null, result)
}
}

删繁就简来看下,去掉args1参数

const compose = function(...funcs) {
let length = funcs.length
let count = length - 1
let result
return function f1 () {
result = funcs[count]()
if (count <= 0) {
count = length - 1
return result
}
count--
return f1(result)
}
}

这就好看很多,我们假设有三个方法,aa,bb,cc

 function aa() {
console.log(11);
} function bb() {
console.log(22);
}
function cc() {
console.log(33);
return 33
}

然后传入compose

compose(aa,bb,cc)

此时count = 2,则下面其实是执行cc

result = funcs[count]()

然后count--。再递归执行f1,则下面其实就是执行bb

result = funcs[count]()

这样,就实现了 从funcs数组里从右往左依次拿方法出来调用,再把返回值传递给下一个。

后面的步骤同理​。​

这其实是一种面向过程的思想

手写javascript中reduce方法

为什么要手写?其实你要是能够很熟练的使用reduce,我觉得不必手写reduce,只是我觉得熟悉一下reduce内部的实现可以更好地理解后面的内容,况且 也不会太难呀!

 function reduce(arr, cb, initialValue){
var num = initValue == undefined? num = arr[0]: initValue;
var i = initValue == undefined? 1: 0
for (i; i< arr.length; i++){
num = cb(num,arr[i],i)
}'
return num
}

如代码所示,就是先判断有没有传入初始值,有的话,下面的循环直接 从i = 0开始,否则i=1开始。

如果没有传入初始值,num就取 数组的第一个元素。这也是说明了为什么传入初始值,i就=1,因为第一个都被取出来了,就不能再取一次啦啦啦!

下面使用我们写的reduce方法

 function fn(result, currentValue, index){
return result + currentValue
} var arr = [2,3,4,5]
var b = reduce(arr, fn,10)
var c = reduce(arr, fn)
console.log(b) // 24

好了 ,没毛病,既然我们了解了reduce原理,就看看下面的redux中compose的实现

redux中compose的实现

function compose(...funcs) {
if (funcs.length === 0) {
return arg => arg
} if (funcs.length === 1) {
return funcs[0]
}
debugger
return funcs.reduce((a, b) => (...args) => a(b(...args)))
}

很简短,非常的巧妙,但是不是很不好理解。不过没关系。

依旧通过例子来讲解。

function aa() {
console.log(11);
} function bb() {
console.log(22);
}
function cc() {
console.log(33);
}

假设只有这三个方法,我们怎样才能先执行cc再执行bb,再执行aa呢?

没错,可以直接写

aa(bb(cc()))

就是这样,非常巧妙,不仅完成了执行顺序,还实现了前一个方法执行返回的结果传递给了下一个即将要执行的方法。

而下面这段代码所做的就是将funcs数组[aa,bb,cc],转化成aa(bb(cc()))

funcs.reduce((a, b) => (...args) => a(b(...args)))

怎么办到的?

看看下面的解释:

reduce内部第一次执行返回的结果是 一个方法

(...args) => aa(bb(...args))

我们现在把这个方法简化成dd,即

dd = (...args) => aa(bb(...args))

reduce内部第二次执行的时候,此时的a 是 上一次返回的dd方法,b是cc

所以执行结果是

(...args) => dd(cc(...args))

dd(cc(...args))不就是先执行cc再执行dd吗?而dd就是执行bb再执行aa。

我的天,!这不是俄罗斯套娃吗!没错 redux中的compose的实现原理就是套娃哈哈哈!

参考文章

https://segmentfault.com/a/1190000011447164

最后

文章首发于公众号《前端阳光》,欢迎加入技术交流群。

前端进阶之认识与手写compose方法的更多相关文章

  1. 2019前端面试系列——JS高频手写代码题

    实现 new 方法 /* * 1.创建一个空对象 * 2.链接到原型 * 3.绑定this值 * 4.返回新对象 */ // 第一种实现 function createNew() { let obj ...

  2. 手写redux方法以及数组reduce方法

    reduce能做什么? 1)求和 2)计算价格 3)合并数据 4)redux的compose方法 这篇文章主要内容是什么? 1)介绍reduce的主要作用 2)手写实现reduce方法 0)了解red ...

  3. UI进阶之--网易彩票手写plist文件,动态创建控制器与tableViewcell

    点击右上角设置按钮 点击按钮后发生的事件:1. 控制器的跳转,进入新的控制器.view, 2. 跳转的时候对将要跳转的目标控制的子控件进行了布局.---通过手写plist文件的方式加载 为按钮注册单击 ...

  4. JavaScript手写new方法

    1.看一下正常使用的new方法 function father(name){ this.name=name; this.sayname=function(){ console.log(this.nam ...

  5. 推荐使用并手写实现redux-actions原理

    @ 目录 一.前言 二.介绍 2.1 创建action 2.2 reducer 2.3 触发action 三. 认识与手写createAction() 3.1 用法 3.2 原理实现 四.认识hand ...

  6. 手写系列-实现一个铂金段位的 React

    一.前言 本文基于 https://pomb.us/build-your-own-react/ 实现简单版 React. 本文学习思路来自 卡颂-b站-React源码,你在第几层. 模拟的版本为 Re ...

  7. 如何手写一个js工具库?同时发布到npm上

    自从工作以来,写项目的时候经常需要手写一些方法和引入一些js库 JS基础又十分重要,于是就萌生出自己创建一个JS工具库并发布到npm上的想法 于是就创建了一个名为learnjts的项目,在空余时间也写 ...

  8. 前端面试手写代码——call、apply、bind

    1 call.apply.bind 用法及对比 1.1 Function.prototype 三者都是Function原型上的方法,所有函数都能调用它们 Function.prototype.call ...

  9. 前端面试手写代码——模拟实现new运算符

    目录 1 new 运算符简介 2 new 究竟干了什么事 3 模拟实现 new 运算符 4 补充 预备知识: 了解原型和原型链 了解this绑定 1 new 运算符简介 MDN文档:new 运算符创建 ...

随机推荐

  1. 使用 JavaScript 操作浏览器历史记录 API

    History 是 window 对象中的一个 JavaScript 对象,它包含了关于浏览器会话历史的详细信息.你所访问过的 URL 列表将被像堆栈一样存储起来.浏览器上的返回和前进按钮使用的就是 ...

  2. java 打包压缩包下载文件

    1. 下载压缩包zip方法 @Override public void downloadZip(HttpServletResponse servletResponse) { String nowTim ...

  3. MyBatis 使用手册

    MyBatis 是一款优秀的持久层框架,它支持自定义 SQL.存储过程以及高级映射.MyBatis 免除了几乎所有的 JDBC 代码以及设置参数和获取结果集的工作.MyBatis 可以通过简单的 XM ...

  4. 你了解JWT吗?

    1. 什么是JWT JWT简称 JSON Web Token,也就是通过 JSON 形式作为 Web 应用中的令牌,用于在各方之间安全地将信息作为 JSON 对象传输.在数据传输过程中还可以完成数据加 ...

  5. 死磕以太坊源码分析之Kademlia算法

    死磕以太坊源码分析之Kademlia算法 KAD 算法概述 Kademlia是一种点对点分布式哈希表(DHT),它在容易出错的环境中也具有可证明的一致性和性能.使用一种基于异或指标的拓扑结构来路由查询 ...

  6. FL Studio12如何进行图示编辑

    FL Studio在国内被大家 亲切的称为"水果"深受喜爱玩电音的音乐人的追捧,本章节采用图文结合的方式给大家讲解它的FL Studio12是如何进行图示编辑的. 单击图示按钮可以 ...

  7. 攻克solo第七课(Randy Rhoads风格)

    本期文章,笔者将通过Guitar Pro 7吉他软件跟大家分享一下Randy Rhoads的solo句子. 相信很多精研电吉他的朋友都会听过这个一手把Ozzy Osbourne从离开黑色安息日乐队的深 ...

  8. jQuery 第十章 ajax 什么是回调地狱 优化回调地狱

    回调地狱 什么是回调地狱,回调函数,一个嵌套着一个,到最后,缩略图成了 一个三角形, 造成了可阅读性差,可阅读性差就代表代码的可维护性 和 可迭代性差,最后还有一个就是可扩展性差. 也不符合设计模式的 ...

  9. 测试Hessian反序反序列化 客户端少字段和多字段时能否成功

    import java.io.*; import com.caucho.hessian.io.HessianInput; import com.caucho.hessian.io.HessianOut ...

  10. bootstrap火速布局"企业级"页面

    套娃 .container(两边有margin)/container-fluid(无) 大盒,写一个当爹就行 .row 行 .col 列 列中可再嵌套行和列 大小 把屏幕分成十二列看 .col-(xs ...