第一步:对象属性赋值为函数,对象内部函数控制年龄这一参数变化,同时成长事件也执行。

  class Person{
constructor(){
this.name = '';
this.age = 0;
this.growup()//不断成长
this.growEvent = null//成长经历的事情
}
setName(val){
this.name = val
}
growup(){
let _this = this;
setInterval(()=>{
_this.age++;
if(_this.growEvent instanceof Function){//判断是不是函数
_this.growEvent()
}
},100)
} }
let hx = new Person()
hx.setName('韩信')
hx.growEvent = function(){
if(this.age == 18){
console.log('开始参军啦')
}
}

继续思考:成长事件只能接受一个函数,那么如果是多个函数呢?韩信要打仗,要建功立业的呀。可以很快的想到growEvent换成数组来接受多个函数。

那么,growEvent就要靠Push进数组了,而不是粗暴的赋值了。成长事件执行的时候也不再是上门的_this.growEvent,而是循环了。

  class Person{
constructor(){
this.name = '';
this.age = 0;
this.growup()//不断成长
this.growEvent = []//需要接受多个函数
}
setName(val){
this.name = val
}
growup(){
let _this = this;
setInterval(()=>{
_this.age++;
_this.growEvent.forEach(cb=>{
if(cb instanceof Function){
cb.call(this)//需要注意更改this指向,不然指向window
}
})
},100)
} }
let hx = new Person()
hx.setName('韩信')
hx.growEvent.push(function(){
if(this.age == 18){
console.log('开始参军啦')
}
})
hx.growEvent.push(function(){
if(this.age == 20){
console.log('当上小队长啦')
}
})

上面的这种方式成长事件采用直接Push的方式看着好像有点辣眼睛,那么我们可以添加一个addEventListener方法来帮我们Push

class Person{
constructor(){
this.name = '';
this.age = 0;
this.growup()//不断成长
this.growEvent = []//需要接受多个函数
}
setName(val){
this.name = val
}
growup(){
let _this = this;
setInterval(()=>{
_this.age++;
_this.growEvent.forEach(cb=>{
if(cb instanceof Function){
cb.call(this)//需要注意更改this指向,不然指向window
}
})
},100)
}
addEventListener(cb){
if(cb instanceof Function){
this.growEvent.push(cb)
}
} }
let hx = new Person()
hx.setName('韩信')
hx.addEventListener(function(){
if(this.age == 18){
console.log('开始参军啦')
}
})
hx.addEventListener(function(){
if(this.age == 20){
console.log('当上小队长啦')
}
})

写到了这里看上去好像有点那啥的样子了。那么,假设成长事件需要一个名字呢?比如,hx,addEventListener("marry",funciton(){})

那我们就需要继续对growEvent继续改装,改成对象形式,每个属性的属性值都是一个数组。

在Push事件,以及执行事件的时候也要更改一下。

class Person{
constructor(){
this.name = '';
this.age = 0;
this.growup()//不断成长
this.growEvent = {}//需要接受多个函数
}
setName(val){
this.name = val
}
growup(){
let _this = this;
setInterval(()=>{
_this.age++;
for(let i in _this.growEvent){
if(_this.growEvent[i] && _this.growEvent[i] instanceof Array){
_this.growEvent[i].forEach(cb=>{
if(cb instanceof Function){
cb.call(this)//需要注意更改this指向,不然指向window
}
})
}
} },100)
}
addEventListener(name,cb){
if(name && cb instanceof Function){
if(this.growEvent[name]){
this.growEvent[name].push(cb)
}else{
this.growEvent[name] = []
this.growEvent[name].push(cb)
}
}
} }
let hx = new Person()
hx.setName('韩信')
hx.addEventListener('army',function(){
if(this.age == 18){
console.log('开始参军啦')
}
})
hx.addEventListener('lead',function(){
if(this.age == 20){
console.log('当上小队长啦')
}
})
hx.addEventListener('lead',function(){
if(this.age == 25){
console.log('当上大队长啦')
}
})

那么接下来要做的是如何removeEventListener 呢?一种方式是粗暴的直接清空数组,把多个事件同时清除。

class Person{
constructor(){
this.name = '';
this.age = 0;
this.growup()//不断成长
this.growEvent = {}//需要接受多个函数
}
setName(val){
this.name = val
}
growup(){
let _this = this;
setInterval(()=>{
_this.age++;
for(let i in _this.growEvent){
if(_this.growEvent[i] && _this.growEvent[i] instanceof Array){
_this.growEvent[i].forEach(cb=>{
if(cb instanceof Function){
cb.call(this)//需要注意更改this指向,不然指向window
}
})
}
} },100)
}
addEventListener(name,cb){
if(name && cb instanceof Function){
if(this.growEvent[name]){
this.growEvent[name].push(cb)
}else{
this.growEvent[name] = []
this.growEvent[name].push(cb)
}
}
}
removeEventListener(name){
if(name && this.growEvent.hasOwnProperty(name)){
this.growEvent[name] = []
}
}
}
let hx = new Person()
hx.setName('韩信')
hx.addEventListener('army',function(){
if(this.age == 18){
console.log('开始参军啦')
}
})
hx.addEventListener('lead',function(){
if(this.age == 20){
console.log('当上小队长啦')
}
})
hx.addEventListener('lead',function(){
if(this.age == 25){
console.log('当上大队长啦')
}
})
hx.removeEventListener('army');

上面这样的话,韩信就不会开始参军了,直接当小队长起步。

但是这样做的话还是有点不好,包括js里的原生事件也是,移除监听的时候,是需要函数名称的。具名函数无论是在回调还是递归里都非常有用。

class Person{
constructor(){
this.name = '';
this.age = 0;
this.growup()//不断成长
this.growEvent = {}//需要接受多个函数
}
setName(val){
this.name = val
}
growup(){
let _this = this;
setInterval(()=>{
_this.age++;
for(let i in _this.growEvent){
if(_this.growEvent[i] && _this.growEvent[i] instanceof Array){
_this.growEvent[i].forEach(cb=>{
if(cb instanceof Function){
cb.call(this)//需要注意更改this指向,不然指向window
}
})
}
} },100)
}
addEventListener(name,cb){
if(name && cb instanceof Function){
if(this.growEvent[name]){
this.growEvent[name].push(cb)
}else{
this.growEvent[name] = []
this.growEvent[name].push(cb)
}
}
}
removeEventListener(name,cbName){
if(name && this.growEvent.hasOwnProperty(name)){
this.growEvent[name] = this.growEvent[name].filter(cb=>{
return cb != cbName
})
}
}
}
let hx = new Person()
hx.setName('韩信')
hx.addEventListener('army',function(){
if(this.age == 18){
console.log('开始参军啦')
}
})
hx.addEventListener('lead',fn)
function fn(){
if(this.age == 20){
console.log('当上小队长啦')
}
}
hx.addEventListener('lead',function(){
if(this.age == 25){
console.log('当上大队长啦')
}
})
hx.removeEventListener('lead',fn);

这样的话,韩信就没有当小队长这个过程啦!

写一个addEventListener以及removeEventListener的更多相关文章

  1. 事件监听addEventListener()和removeEventListener() ---------1

    一直想写一个原生事件监听的记录,方便以后看,不愿意写主要是事件监听的单词太长,记起来好难记每次都要查,这次把知道的写完了,来这里查好了,以后要是理解的更透彻了,就再补全好了 首先,DOM0级事件和DO ...

  2. (转)addEventListener()与removeEventListener()详解

    转自:http://www.111cn.net/wy/js-ajax/48004.htm addEventListener()与removeEventListener()用于处理指定和删除事件处理程序 ...

  3. 如何写一个跨浏览器的事件处理程序 js

    如何 写一个合格的事件处理程序,看如下代码: EventUtil可以直接拿去用 不谢 <!DOCTYPE html> <html> <head> <title ...

  4. addEventListener()与removeEventListener(),追加事件和删除追加事件

    addEventListener()与removeEventListener()用于追加事件和删除追加.所有的DOM节点中都包含这两种方法,并且它们都接受3个参数:要处理的事件名.作为事件处理程序的函 ...

  5. 手写一个虚拟DOM库,彻底让你理解diff算法

    所谓虚拟DOM就是用js对象来描述真实DOM,它相对于原生DOM更加轻量,因为真正的DOM对象附带有非常多的属性,另外配合虚拟DOM的diff算法,能以最少的操作来更新DOM,除此之外,也能让Vue和 ...

  6. 兼容8事件绑定与解绑addEventListener、removeEventListener和ie的attachEvent、detachEvent

    兼容8事件绑定与解绑addEventListener.removeEventListener和ie的attachEvent.detachEvent   ;(function(){ // 事件绑定 bi ...

  7. 分享:计算机图形学期末作业!!利用WebGL的第三方库three.js写一个简单的网页版“我的世界小游戏”

    这几天一直在忙着期末考试,所以一直没有更新我的博客,今天刚把我的期末作业完成了,心情澎湃,所以晚上不管怎么样,我也要写一篇博客纪念一下我上课都没有听,还是通过强大的度娘完成了我的作业的经历.(当然作业 ...

  8. js高级程序设计笔记之-addEventListener()与removeEventListener(),事件解除与绑定

    js高级程序设计笔记之-addEventListener()与removeEventListener(),事件解除与绑定 addEventListener()与removeEventListener( ...

  9. 用vue写一个仿app下拉刷新的组件

    如果你用vue弄移动端的页面,那么下拉刷新还是比较常见的场景,下面来研究如何写一个下拉刷新的组件(先上图); 由于节省大家的时间,样式就不贴出来了. html结构也不必介绍了,直接看代码吧-.- &l ...

随机推荐

  1. [转]IE和FireFox中JS兼容之event .

    转载于:http://blog.csdn.net/jiachunfeng/article/details/6448186 http://justcoding.iteye.com/blog/587876 ...

  2. 牛客网Java刷题知识点之代码块(局部代码快、构造代码块、静态代码块)

    不多说,直接上干货! 代码块包括局部代码快.构造代码块.静态代码块. 代码块,就是一段独立的代码空间. 1.局部代码快 对局部变量的生命周期进行控制. 2.构造代码块 对所有对象进行初始化. 3.静态 ...

  3. 定义与声明、头文件与extern总结(转)

    本文转自: http://lpy999.blog.163.com/blog/static/117372061201182051413310/ http://blog.csdn.net/feitianx ...

  4. 使用mspaint查看图片像素

    图片打码服务,要求对图像验证码进行切图,即具体知道像素的位置,网上搜了yhb-chi但下载不方便. 就想着看看mspaint可不可以,将图片拖到mspaint中: 显示了整张图片的像素大小(100X4 ...

  5. 【Iperf】iperf测试wlan的性能

    1.概念: iperf命令是一个网络性能测试工具.iperf可以测试TCP和UDP带宽质量. iperf可以测量最大TCP带宽,具有多种参数和UDP特性.iperf可以报告带宽,延迟抖动和数据包丢失. ...

  6. 关于webform textbox Password 模式

    textbox在这个模式时,如果进行点击按钮或者其他与后台交互的操作,则状态不会保留,既密码框内容会被清空: 这个可以在前台使用 隐藏控件加js获取密码框内容赋值到隐藏控件,点击刷新后通过后台为密码框 ...

  7. Weblogic中配置Active Directory Authentication Provider

    其要点或者容易出错的关键点是:(<>及其中说明代表需要替换的内容)         Host: ads.yourdomain.com         Host填AD服务器的域名或IP    ...

  8. idea创建Javaweb项目

    1.Javaweb项目结构 1.1修改生成.class文件的位置为WEB-INF下的classes: 生成的.class文件位置: 1.2 设置第三方jar包添加位置:

  9. 显卡(GPU)的基础知识

    显卡的性能指标有: 流处理器(SP)数量 核心频率 流处理器的架构 显存容量 显存频率 显存带宽 1. 流处理器的数量 把一个GPU当成是一个画画的工厂,其中流处理器的数量就是画师的数量,其数量自然是 ...

  10. Spring-cloud微服务 Eureka学习教程-分布式搭建EurekaServer、EurekaClient(中级)

    我们这里只有一台服务器,所以我们先仿集群搭建. 完整demo项目代码:https://github.com/wades2/EurekaDemo2 在这之前我们先分析分析Eureka相比其他注册中心的好 ...