社区编辑申请
注册/登录
编程题:实现一个 LazyMan 方法
开发 前端
今天我们来看一道 JS 编程题。实现一个 LazyMan 方法。希望能够帮助到你。

大家好,我是前端西瓜哥。今天我们来看一道 JS 编程题。

问题

实现一个LazyMan,可以按照以下方式调用:

LazyMan("Hank")
输出:
Hi! This is Hank!
LazyMan("Hank").sleep(10).eat("dinner")
输出
Hi! This is Hank!
//等待10秒..
Wake up after 10
Eat dinner
LazyMan("Hank").eat("dinner").eat("supper")
输出
Hi! This is Hank!
Eat dinner
Eat supper
LazyMan(“Hank”).sleepFirst(5).eat("supper")
输出
//等待5
Wake up after 5
Hi! This is Hank!
Eat supper

以此类推。

需要实现的功能

我们先分析一下需要的效果。

首先是 Lazy('Hank') ,能够输出 Hi! This is Hank。

然后是 .sleep(10),会延迟 10 秒后,执行 Wake up after 10。之后的 eat 之类的会跟着延迟执行。

.eat('dinner'),是直接输出 Eat dinner。

最后是一个比较特殊的 .sleepFirst(5),它会被放到最前面提前执行,再执行其他事情。

思路

这道题不简单,它考察了多个知识点。

首先是它的使用形式为 链式调用,即对象的方法调用完后会返回这个对象,然后就可以继续调用这个对象的其他方法,形成一条链条一样的调用写法。

所以,这个 LazyMan('Hank') 应该返回一个对象,这个对象还必须有 sleep、eat、sleepFirst 这些方法。

所以,我先这样写:

function LazyMan(name) {
const solver = {
sleep(second) {
return solver;
},
eat(something) {
return solver;
},
sleepFirst(second) {
return solver;
},
};
return solver;
}

solver 的方法也可以返回 this。这里我没有返回 this,因为担心有 this 指向丢失的问题。

还有一种是使用 ES6 的 class 写法。

function LazyMan(name) {
return new MyLazyMan(name);
}
class MyLazyMan {}

多了一层封装,但可以更好地维护属性。否则就像我的写法那样,需要用闭包来维护变量。

回到正题。

然后我们再实现依次输出的效果,因为其中的 sleep,是异步的,而且 sleepFirst 还会前置输出,所以我们不能每执行一个方法,就立即输出。而是要先缓存一下,等到所有方法都调用完之后,再执行。

此外,因为要收集好所有任务才开始执行,所以我们要用 setTimeout 构造一个异步的宏任务,确保任务的执行在同步代码后执行。

function LazyMan(name) {
setTimeout(() => { // 确保不会过早执行
run();
});
function run() {
// 依次执行任务
}
}

所以,我们需要一个 队列 来保存。队列是一种先进先出的线性表,我们用数组实现,理论上性能更好是用链表,但要自己实现很麻烦,通常数据量也不大,所以开发中我们用数组就完事了。

一个重要的分歧点出现了,这个队列,保存什么?

一种想法是 queue 存一个对象,里面有 msg 和 t,记录输出内容,和延迟执行的时间。然后我们自己在对象内部执行业务逻辑。

{
msg: `Wake up after 10`,
t: 10,
}

还有一种想法是,queue 里存的是函数,将它们依次执行就好。

实现上类似 中间件 的写法,本质是设计模式的 责任链模式。执行完当前函数,我们调用 next 去执行下一个函数。如果你用过 Express 框架,可能就觉得比较熟悉。

run 是一个递归函数,不停地执行自身,从 queue 里取出第一个 task,执行它,然后再执行 run 方法,直到 queue 为空。

代码实现

function LazyMan(name) {
const queue = [
{
msg: `Hi! This is ${name}`,
t: undefined,
},
];
setTimeout(() => { // 确保在同步代码后执行
run();
});
function run() { // 依次执行任务
if (queue.length === 0) return;
const { msg, t } = queue.shift();
// 不需要延迟执行的任务,我把它们转为同步执行了
// 让它们都一致用异步执行也是可以的
if (t === undefined) {
console.log(msg);
run(); // 执行
} else {
setTimeout(() => {
console.log(msg);
run();
}, t * 1000);
}
}
const solver = {
sleep(second) {
queue.push({
msg: `Wake up after ${second}`,
t: second,
});
return solver;
},
eat(something) {
queue.push({
msg: `Eat ${something}`,
t: undefined,
});
return solver;
},
sleepFirst(second) {
// 比较特殊,要放到队列开头
queue.unshift({
msg: `Wake up after ${second}`,
t: second,
});
return solver;
},
};
return solver;
}

对于 sleep 这些方法,我只是负责让它们加入队列,具体的执行我都是在 run 里统一处理的。

我去网上看了下其他人的写法,发现比较多的是 Express 的 next 这种风格,那我也写一个吧。

function LazyMan(name) {
return new MyLazyMan(name);
}
class MyLazyMan {
constructor(name) {
this.queue = [];
this.queue.push(() => {
setTimeout(() => {
console.log(`Hi! This is ${name}`);
})
this.next(); // 千万不要忘记执行 next
})
// 这里依旧是确保在同步代码后执行
setTimeout(() => {
this.next();
})
}
next() {
setTimeout(() => {
if (this.queue.length === 0) return;
const task = this.queue.shift();
task();
})
}
eat(something) {
this.queue.push(() => {
console.log(`Eat ${something}`);
this.next();
});
return this;
}
sleep(second) {
this.queue.push(() => {
setTimeout(() => {
console.log(`Wake up after ${second}`);
this.next();
}, second * 1000);
});
return this;
}
sleepFirst(second) {
this.queue.unshift(() => {
setTimeout(() => {
console.log(`Wake up after ${second}`);
this.next();
}, second * 1000)
});
return this;
}
}

这里的注意点是,在 setTimeout 里不要忘记加上 this.next,否则执行的链条会在中途断掉。

写法很多,除此之外还可以用 Promise,用上 async/await,甚至用上 rxjs,读者可自行去尝试。

结尾

这道编程题,考察的东西比较多,包括业务代码编写能力、队列、中间件思想(责任链模式)、异步代码。

责任编辑:姜华 来源: 今日头条
相关推荐

2022-04-11 11:38:44

Python代码游戏

2022-05-18 23:42:08

网络安全安全分析工具

2022-04-20 20:28:40

HDF 驱动框架鸿蒙操作系统

2022-05-16 10:36:08

GitHub开源项目

2022-05-17 15:51:32

数据中心运维能力基础设施

2022-04-26 08:41:54

JDK动态代理方法

2022-04-01 15:18:04

HarmonyHDF 驱动鸿蒙

2022-04-19 14:41:29

Oracle数据库SQL

2022-04-15 09:23:29

Kubernetes面试题

2022-05-07 10:09:01

开发Java日志

2022-05-10 16:04:40

编程语言PythonC语言

2022-03-31 07:52:01

Java多线程并发

2022-05-11 14:05:11

区块链网络安全存储

2022-05-05 15:56:43

数字化转型锐捷网络

2022-05-23 10:55:19

华为数字化转型架构蓝图

2022-05-20 16:50:33

区块链Web3加密资产

2022-04-15 08:00:00

FUSE开发Android

2022-04-25 11:26:16

开发SpringBoot

2022-04-12 08:00:17

socket 编程网络编程网络 IO 模型

2022-04-11 13:37:54

编程语言PythonMATLAB

同话题下的热门内容

让程序员心动的11种新编程语言Flutter vs ReactJS:2022年应该选哪个?再有人问你什么是分库分表,直接把这篇文章发给他前端配置化真香~上班又多了60%的摸鱼时间2022年值得使用的 Node.js 框架HTTP 的缓存为什么这么设计?前端监控的搭建步骤,别再一头雾水了!如何加快Java中大型集合的处理

编辑推荐

太厉害了,终于有人能把TCP/IP协议讲的明明白白了!牛人5次面试腾讯不成功的经验HBase原理–所有Region切分的细节都在这里了Javascript如何监听页面刷新和关闭事件如何搭建一个HTTPS服务端
我收藏的内容
点赞
收藏

51CTO技术栈公众号