一道腾讯前端面试题,用来学习与分享
面试题看的多,看到这篇觉得很不错,思考很多,特来分享一下~
<!--需求-->
<!-- '//>' 指控制台打印 -->
HardMan('lilei')
//> i'm lilei
HardMan('lilei').rest(10).learn('chinese')
//> i'm lilei
// 等待10秒
//> start learning after 10s
//> learning chinese
HardMan('lilei').restFirst(5).learn('chinese')
// 等待5s
//> start learning after 5s
//> i'm lilei
//> learning chinese
// 看到这个需求,我们整理一下,
// 首先只调用函数HardMan(name) 这里console.log('im'+name)即可
// 第二个.rest().learn() 这边有一个链式调用,那说明第一个函数调用后我们需要在函数内部返回一个包含.rest的对象, 并根据参数延迟时间与学习内容
// 紧接着 .restFirst()的调用, 优先执行这个函数内容,说明这个功能是需要插入到前面的。 下面我们看代码实现与思路整理
<!--实现-->
function HardMan (name) {
var task = [], //任务容器
after = 0; //初始延迟执行时间
function next() {
// 任务执行器
if(task.length) (task.shift()) (); // shift 用于把数组的第一个元素从其中删除,并返回第一个元素的值
// 这边执行next() 相当于调用task数组中的第一个函数,并删除它
};
function sleep(time) {
// 延时器
return function() {
setTimeout(function(){
after += time;
console.log('start learning after'+ after + 's')
}, time*1000)
}
};
// 提供外部方法
var fn = function() {};
fn.prototype.rest = function(time) {
task.push(sleep(time)); // 任务中加入sleep返回的函数
return this; // 返回当前this 用于链式调用
};
fn.prototype.restFirst = function(time) {
task.unshift(sleep(time)); // unshift() 方法可向数组的开头添加一个或更多元素 。 这边是加入到数组前面最先调用 。
return this;
};
fn.prototype.learn = function (sub) {
task.push(function() {
console.log('learn'+ sub);
after = 0; //初始化
next(); // 执行完执行下一个
})
return this;
};
task.push(function() {
console.log('i"m' + name);
after = 0;
next();
});
// 第一个
setTimeout(next, 0)
return new fn() // 返回 实例对象 可调用它的内部方法 例:HardMan (name).rest(time)
}
只看需求真的很难一下子想到这样的处理方法,通过这个主要学习思路,敲代码重要的就是逻辑。。。
语言能力不是很强,分析不好的地方希望指出,十分感谢~
前进道路长,学习不可怠