博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
js实现事件模型bind与trigger
阅读量:4702 次
发布时间:2019-06-09

本文共 2629 字,大约阅读时间需要 8 分钟。

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

你可能感兴趣的文章
环境搭建
查看>>
解密EXL
查看>>
简易版cnlog
查看>>
erlang程序运行的几种方式
查看>>
堆heap和栈Stack(百科)
查看>>
html5页面实现点击复制功能
查看>>
mac os设置root密码
查看>>
MSSQL—行转列
查看>>
Int类型空判断
查看>>
关于闭包的作用,以及优缺点
查看>>
【CF809E】Surprise me! 树形DP 虚树 数学
查看>>
FFT什么的
查看>>
nodejs版本管理
查看>>
poj 3347
查看>>
回车与换行的区别
查看>>
ztree使用
查看>>
JavaScript中数组Array方法详解
查看>>
有些人,爱不到,忘不了
查看>>
站立会议10
查看>>
7-24 树种统计
查看>>