LazyMan代码实现

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