js實現事件模型bind與trigger


function Emitter() {
    this._listener = [];//_listener[自定義的事件名] = [所用執行的匿名函數1, 所用執行的匿名函數2]
}

//注冊事件
Emitter.prototype.bind = function(eventName, callback) {
    var listener = this._listener[eventName] || [];//this._listener[eventName]沒有值則將listener定義為[](數組)。
    listener.push(callback);
    this._listener[eventName] = listener;
}

 //觸發事件
Emitter.prototype.trigger = function(eventName) {
    var args = Array.prototype.slice.apply(arguments).slice(1);//atgs為獲得除了eventName后面的參數(注冊事件的參數)
    var listener = this._listener[eventName];

    if(!Array.isArray(listener)) return;//自定義事件名不存在
    listener.forEach(function(callback) {
        try {
            callback.apply(this, args);
        }catch(e) {
            console.error(e);
        }
    })
}
//實例
var emitter = new Emitter();
    emitter.bind("myevent", function(arg1, arg2) {
        console.log(arg1, arg2);
    });

    emitter.bind("myevent", function(arg1, arg2) {
        console.log(arg2, arg1);
    });

    emitter.trigger('myevent', "a", "b");

  實現鏈式調用的例子,原理與事件模型相同

function LazyMan(name) {
            return new _LazyMan(name);
        }
        function _LazyMan(name) {
            console.log("Hi This is " + name)
            this.task = [];
            var _this = this;
            var namer = (function(name) {
                return function() {
                    console.log(name);
                    _this.next();
                }
            })(name)
            this.task.push(namer);
            setTimeout(function() {
                _this.next();
            }, 0);
            return this;
        }
        _LazyMan.prototype.next = function() {
            var fn = this.task.shift();
            fn&&fn();
        }
        _LazyMan.prototype.eat = function(val) {
            var _this = this;
            var eat = (function(val) {
                return function() {
                    console.log("eat" + val);
                    _this.next();
                }
            })(val);
            this.task.push(eat);
            return this;
        }
        _LazyMan.prototype.sleep = function(time) {
            var _this = this;

            var timer = (function(time) {
                return function() {
                    setTimeout(function() {
                        console.log("wait");  
                        console.log("time=" + time);
                        _this.next();
                    }, time*1000);
                }
                
            })(time);
            this.task.push(timer);
            return this;
        }
    
    //LazyMan("Hank").eat("dinner").eat("supper");
    LazyMan("Hank").sleep(3).eat("dinner");

 

  


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM