LazyMan代码实现

yhaolpz 发布于2019-08-20 13:55 / 1627人阅读

摘要：只需要返回对象本身就可以了。这里只实现一个示例实现链式调用从队列头部插入最后一步封装还有一个大家可以来试一试。如果有想法的话欢迎提出大家交流一下

ES5实现LazyMan

lazyman主要原理是：

需要一个队列保存将要用到的事件

利用闭包将事件保存至队列中

创建一个中间件next用来触发事件

链式调用

使用lazyman需要实现的场景：

LazyMan("Tom");
// my name is Tom!
LazyMan("Tom").eat("Pissa");
// my name is Tom!
// Eat Pissa ~
LazyMan("Tom").eat("Pissa").sleep(2);
// my name is Tom!
// Eat Pissa ~
// WakeUp after 2s !
LazyMan("Tom").wekeup(2).eat("Pissa");
// getup after 2s !
// my name is Tom
// Eat Pissa

核心代码实现：

需要创建一个数组当做队列使用

function _LazyMan(name) {
    // 事件存储队列
    this.tasks = [];
    // 绑定this指向
    var _this = this;
    // 使用闭包
    var fn = (function(n) {
        // 绑定作用域
        var name = n;
        return function(name) {
            console.log("my name is "+ name);
            _this.next();
        }
    })(name);
    this.tasks.push(fn);
    // 启动任务
    setTimeout(function() {
        _this.next();
    }, 0)
}

我们需要一个中间件next用来触发事件

_LazyMan.prototype.next = function() {
    var fn = this.tasks.shift();
    fn && fn();
}

完成了触发器、队列存储的位置，下一步只要实现链式调用就可以了。只需要返回this对象本身就可以了。
这里只实现一个wakeup示例

实现链式调用

_LazyMan.prototype.wakeup = function(times) {
    var _this = this;
    var fn = (function(time){
        return function() {
            setTimeout(function(){
                console.log("getup after "+time+"s !")
                _this.next();
            }, time*1000)
        }
    })(times)
    // 从队列头部插入
    _this.tasks.unshift(fn);
    return this;
}

最后一步封装

function LazyMan(name) {
    return new _LazyMan(name)
}

还有一个sleep(), eat()大家可以来试一试。如果有想法的话欢迎提出~ 大家交流一下 O(∩_∩)O

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/81312.html

关于lazyman你还应该知道这几件事

摘要：首先我们来讲这个栈在中，每当有函数被执行的时候都会在当前的执行堆栈中创建一个新的堆栈帧，并放到栈顶。因为是链式调用，所以代码一直在同一个作用于中执行，也就是说当前的堆栈帧一直没有被移出栈。前言前几天在稀土上看到一篇面试的帖子，里面微信有一道题是lazyman的实现，具体要做的事情就是 LazyMan(Hank) //Hi! This is Hank! LazyMan(Hank)....

未东兴 2019-08-20 13:55 评论0 收藏0
LazyMan

实现函数LazyMan，使得： LazyMan(Hank); 输出Hi Hank! LazyMan(Hank).eat(dinner);输出Hi Hank!Eat dinner! LazyMan(Hank).sleep(5).eat(dinner); 输出Hi Hank!//等待五秒Eat dinner! LazyMan(Hank).sleepFirst(5).eat(dinner);输出//等待...

Winer 2019-08-21 15:26 评论0 收藏0
实现Lazyman

摘要：前言之前在掘金上到一篇文章关于微信面试的文章，其中提到了手动实现的问题。看起来好像挺有趣的，我们来分析以下分析首先我们看到例子有几个特点，一个是我们调用的时候不需要用到关键字，这意味着我们需要使用工厂函数另一个是要我们实现链式调用。前言之前在掘金上到一篇文章关于微信面试的文章，其中提到了手动实现Lazyman的问题。刚开始看到Lazyman我是一脸懵逼的，这是什么鬼，后来查了查了一...

Tonny 2019-08-21 15:34 评论0 收藏0
如何实现一个 LazyMan?

摘要：实现一个，可以按照以下方式调用输出输出等待秒输出输出等待秒以此类推。这是典型的流程控制，问题的关键是如何实现任务的顺序执行。实现一个LazyMan，可以按照以下方式调用: LazyMan(Hank)输出: Hi! This is Hank! LazyMan(Hank).sleep(10).eat(dinner)输出 Hi! This is H...

diabloneo 2019-07-25 11:32 评论0 收藏0
如何实现一个 LazyMan?

摘要：实现一个，可以按照以下方式调用输出输出等待秒输出输出等待秒以此类推。这是典型的流程控制，问题的关键是如何实现任务的顺序执行。实现一个LazyMan，可以按照以下方式调用: LazyMan(Hank)输出: Hi! This is Hank! LazyMan(Hank).sleep(10).eat(dinner)输出 Hi! This is H...

frank_fun 2019-06-27 15:34 评论0 收藏0