一道腾讯前端面试题,用来学习与分享

面试题看的多,看到这篇觉得很不错,思考很多,特来分享一下~

<!--需求-->
<!-- '//>' 指控制台打印 -->
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)
}

只看需求真的很难一下子想到这样的处理方法,通过这个主要学习思路,敲代码重要的就是逻辑。。。

语言能力不是很强,分析不好的地方希望指出,十分感谢~

posted @ 2019-01-16 16:14  前端MRzhu  阅读(406)  评论(0编辑  收藏  举报