javascript - 编写一个 People 类,使其的实例具有事件绑定、触发事件、解除绑定功能。(实例可能监听多个不同的事件,也可以去除监听事件)
本文介绍了javascript - 编写一个 People 类,使其的实例具有事件绑定、触发事件、解除绑定功能。(实例可能监听多个不同的事件,也可以去除监听事件)的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
问 题
/*
* TODO
*
*/
People.prototype.sayHi = function () {
console.log('Hi, I am ' + this.name)
}
// 目标效果:
var jerry = new People('Jerry')
jerry.sayHi() // => 输出:'Hi, I am Jerry'
jerry.on('greeting', say)
jerry.on('greeting', say2)
jerry.emit('greeting', 'Hi') // => 输出:'Hi, nice meeting you.' 和 'Hi, nice meeting you, too'
jerry.off('greeting', say)
jerry.emit('greeting', 'Hi') // => 只输出:'Hi, nice meeting you, too'
function say (greeting) {
console.log(greeting + ', nice meeting you.')
}
function say2 (greeting) {
console.log(greeting + ', nice meeting you, too')
解决方案
class People {
constructor (name) {
this.name = name
this.events = {}
}
sayHi () {
console.log('Hi, I am ' + this.name)
}
on (event, cbk) {
// 利用数组储存同事件的所有回调
(this.events[event] || (this.events[event] = [])).push(cbk)
}
off (event, cbk) {
let eventArr = this.events[event]
// 反向遍历,不至于删除数据之后,数组长度影响遍历
for(let i=eventArr.length-1; i>=0; i--){
if(cbk === eventArr[i]){
eventArr.splice(i,1)
}
}
}
emit (event, param){
let eventArr = this.events[event]
// 遍历同事件的所有回调,执行
eventArr.forEach(function(cbk){
cbk(param)
})
}
}
var jerry = new People('Jerry')
jerry.sayHi()
jerry.on('greeting', say)
jerry.on('greeting', say2)
jerry.emit('greeting', 'Hi')
jerry.off('greeting', say)
jerry.emit('greeting', 'Hi')
function say (greeting) {
console.log(greeting + ', nice meeting you.')
}
function say2 (greeting) {
console.log(greeting + ', nice meeting you, too')
}
这篇关于javascript - 编写一个 People 类,使其的实例具有事件绑定、触发事件、解除绑定功能。(实例可能监听多个不同的事件,也可以去除监听事件)的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文