唠唠嗑
放假在家当咸鱼有一段时间了,也好久没写笔记了,今天逛技术社区的时候遇到了一个有点意思的题目,正好也是我没遇到过的场景,于是记录一下
整活
需求是这样的:
实现一个 EatMan
说明:实现一个 EatMan,EatMan 可以有以下一些行为
示例:
1.EatMan(“Hank”) 输出
Hi This is Hank!
2.EatMan(“Hank”).eat(“dinner”).eat(“ supper”) 输出
Hi This is Hank!
Eat dinner~
Eat supper~
3.EatMan(“Hank”).eat(dinner’).eatFirst(“lunch”) 输出
Eat lunch
Hi This is Hank!
Eat supper~
4.EatMan(“Hank”).eat(‘dinner).eatFirst(“lunch”).eatFirst(“breakfast”) 输出
Eat breakfast~
Eat lunch~
Hi This is Hank!
Eat supper~
从这里不难看出,这里主要的点是链式调用和流程控制
链式调用很简单,核心的点就是函数执行完后 返回 this
,栗子:
1 2 3 4 5 6 7 8
| class EatMan { eat(food) { console.log(`eat ${food} ~`); return this; } }
new EatMan().eat('apple').eat('pear')
|
这样就实现链式调用了,下面上主菜 - 控制任务的执行顺序
这里参考某些中间件的实现思路,首先创建一个任务队列,把每个函数放进去,按顺序执行,每个函数执行完成后调用一个 next 函数,执行下一个函数
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48
| class EatMan { constructor(name) { this.name = name; this.tasks = []; this.init(); setTimeout(() => { this.next(); }, 0); }
init() { const _this = this const fn = function() { console.log('Hi This is Hank!'); _this.next() } this.tasks.push(fn) }
next() { const t = this.tasks.shift(); t && t(); }
eat(name) { const _this = this; const fn = function () { console.log(`Eat ${name}~`); _this.next(); }; this.tasks.push(fn); return this; }
eatFirst(name) { const _this = this; const fn = function () { console.log(`Eat ${name}~`); _this.next(); }; this.tasks.unshift(fn); return this; } }
new EatMan("Hank").eat("dinner").eat("supper").eatFirst("lunch").eatFirst("breakfirst");
|
输出:
Eat breakfirst~
Eat lunch~
Hi This is Hank!
Eat dinner~
Eat supper~
学废了扣1,没学废扣眼珠子~