js实现事件模型bind与trigger

最新推荐文章于 2020-08-29 13:28:11 发布

转载最新推荐文章于 2020-08-29 13:28:11 发布 · 105 阅读

1 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/pcd12321/p/5223347.html

本文介绍了一个简单的JavaScript事件发射器实现，并演示了如何通过原型链实现方法的链式调用。事件发射器使用自定义的Emitter类来绑定和触发事件，链式调用则通过_LazyMan构造函数实现。

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");

转载于:https://www.cnblogs.com/pcd12321/p/5223347.html