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