Javascript：实现LazyMan
需求
LazyMan(“Jane”)输出:
Hi! This is Jane!
LazyMan(“Jane”).sleep(20).eat(“dinner”)输出
Hi! This is Jane!
//等待20秒..
Wake up after 20
Eat dinner~
LazyMan(“Jane”).eat(“dinner”).eat(“supper”)输出
Hi This is Jane!
Eat dinner~
Eat supper~
LazyMan(“Jane”).sleepFirst(5).eat(“supper”)输出
//等待5秒
Wake up after 5
Hi This is Jane!
Eat supper~
代码实现
function Lazyman(name){
return new _lazyman(name);
}
function _lazyman(name){
//创建任务队列
this.task = [];
//保存指向lazyman的this，以供给闭包使用
let _this = this;
//默认问好
let fn = (function(name){
return ()=>{
console.log(`Hi! This is${
name}`);
//完成任务后执行下一个任务
_this.next();
}
})(name);
//将此任务存入任务队列
this.task.push(fn);
//启动第一个任务
setTimeout(()=>{
this.next();
},0);
}
_lazyman.prototype = {
//拿出队列中的第一个任务并执行
next : function(){
let fn = this.task.shift();
fn && fn();
},
eat : function(food){
let fn = (food=>{
return ()=>{
console.log(`Eat ${
food}~`);
this.next();
}
})(food);
this.task.push(fn);
return this;
},
sleep : function(time){
let fn = (time=>{
return ()=>{
console.log(`Wake up after ${
time}s`)
//阻塞下一个任务
setTimeout(()=>{
this.next();
},time*1000);
}
})(time);
this.task.push(fn);
return this;
},
sleepFirst : function(time){
let fn = (time=>{
return ()=>{
console.log(`wake up after ${
time}s`);
setTimeout(()=>{
this.next();
},time*1000);
}
})(time);
this.task.unshift(fn);
return this;
}
}
执行结果
Lazyman('yivi').sleepFirst(3).eat('peach').sleep(2).eat('apple')
wake up after 3s
Hi!This is yivi!
Eat peach~
wake up after 2s
Eat apple~
总结
此题目涉及链式调用、事件循环、闭包、观察者模式，可学习ES6的相关知识后再回看这道题，思路就会清晰很多！