多种方式实现 LazyMan
本教程会用多种方式来实现一个 LazyMan
。
先来了解一下什么是 LazyMan
, LazyMan
方法可以按照以下方式调用:
一般思路可以通过 任务队列 来解决 LazyMan
问题,结合 Promise 或者 async 还可以更加优雅的实现。
还可另辟蹊径通过 RxJS 以及其丰富的操作符来解决 LazyMan
问题。
为了保证阅读效果,建议读者边阅读边动手实操,点击这里可以下载源码。
1、任务队列实现
这种模式类似 中间件模式, 核心是 next
方法,每当队列中的一个方法执行完都会调用 next
来执行队列中的另外一个方法,直到全部执行完成。
而构造函数中的 setTimeout
保证了队列开始执行的时间是在下一个事件循环中,从而确保当前的链式调用中的所有行为在调用之前被加载进队列之中。
运行查看效果:
2、任务队列 + `Promise` 实现
使用 Promise
来实现很讨巧,可以用 Promise
的天然异步来替代 **方法一** 中的 next
调用方式
运行查看效果:
3、任务队列 + `async` 实现
这种实现方式和 方法二 的实现方式差别不大,只不过用 async
的方式来实现更加优雅
运行查看效果:
4、RxJS实现
基于 RxJS 的实现方式让人看起来耳目一新,不过需要读者朋友拥有良好的 RxJS 基础。
RxJS 对异步的天然支持以及丰富的操作符让这一切变的非常简单。
在实现 LazyMan
中,核心是 concatAll
操作符,他会收集所有 observables,并在当前一个完成时订阅下一个。
运行查看效果:
上面例子的完整代码可以点这里查看,如果觉得写的不错,可以给笔者一个 star,感谢阅读。
相关链接
评论