เนื้อหาของบทความนี้จะพูดถึงjavascript eventemitter หากคุณกำลังมองหาjavascript eventemitterมาถอดรหัสหัวข้อjavascript eventemitterกับPakamas Blogในโพสต์Build Your Own EventEmitterนี้.
Table of Contents
ข้อมูลทั่วไปเกี่ยวกับjavascript eventemitterในBuild Your Own EventEmitterโดยละเอียด
ที่เว็บไซต์pakamasblog.comคุณสามารถเพิ่มเนื้อหาอื่นที่ไม่ใช่javascript eventemitterสำหรับข้อมูลที่เป็นประโยชน์มากขึ้นสำหรับคุณ ที่เว็บไซต์Pakamas Blog เราอัปเดตข้อมูลใหม่และถูกต้องสำหรับผู้ใช้อย่างต่อเนื่อง, ด้วยความหวังว่าจะมีส่วนทำให้ข่าวสารที่สมบูรณ์ที่สุดสำหรับคุณ ช่วยให้ผู้ใช้เพิ่มข้อมูลบนอินเทอร์เน็ตในวิธีที่เร็วที่สุด.
หุ้นที่เกี่ยวข้องกับหมวดหมู่javascript eventemitter
ต้องการเพิ่มเติมเกี่ยวกับ React/Redux หรือไม่ ตรวจสอบรูปแบบ ‘Eventing’ ใน Javascript เป็นหนึ่งในกลไกการออกแบบที่ได้รับการยอมรับมากที่สุดของภาษา แต่งานอีเวนต์มีเบื้องหลังอย่างไร? เรียนรู้วิธีสร้างตัวปล่อยเหตุการณ์ของคุณเองในวิดีโอสั้นๆ นี้ สนใจวิดีโอรายสัปดาห์บน React/Javascript หรือไม่ เช็คเอาท์ ตรวจสอบหลักสูตรการสอนที่ยอดเยี่ยมนี้เกี่ยวกับ React และ Redux:
รูปภาพที่เกี่ยวข้องกับหัวข้อของjavascript eventemitter
นอกจากอ่านข่าวเกี่ยวกับบทความนี้แล้ว Build Your Own EventEmitter คุณสามารถดูเนื้อหาเพิ่มเติมด้านล่าง
เนื้อหาที่เกี่ยวข้องกับjavascript eventemitter
#Build #EventEmitter.
javascript,web development,react,redux.
Build Your Own EventEmitter.
javascript eventemitter.
เราหวังว่าการแบ่งปันที่เราให้ไว้จะเป็นประโยชน์กับคุณ ขอบคุณมากสำหรับการติดตามข้อมูลjavascript eventemitterของเรา
That’s pretty good, this seems like the observer design pattern
Thank you Stephen. You just my timer saver… cheers!
Something I wipped up in 5 minutes. This isn't exactly event emitter, but somwhat of the same thing, except a simpler way of understanding it without classes. This is definitely a great interview questions.
Interviewer would have definitely ask something like, implement the pub/sub pattern you see all the time in JS.
const Event = {
events: {},
on: function(eventName, func) {
this.events[eventName] = func
},
fire: function(eventName) {
this.events[eventName]()
}
}
Event.on('event1', function event1() {
console.log('event1') // event1
})
Event.on('event1', function event1() {
console.log('event1 – override') // event1
})
Event.on('event2', function event2() {
console.log('event2') // event2
})
Event.fire('event1') // event1 – override
Event.fire('event2') // event2
I was asked this interview question today and definitely struggled at first. Was able to complete it though!
Nice
Hi thank for the vid! One thing, the trigger seems not to forward multiple arguments with apply() this way, so I figured someone might try
trigger = (eventName, …rest) => {
if(this.events[eventName]) {
this.events[eventName].forEach( callback => {
callback.call(null, …rest);
})
}
}
instead, which relays all arguments passed. Cheers!
/*
The Prototypal approach, in case you needed to pass objects rather than a pointer.
———————————————————————————————————->
*/
const EventEmitter = function(n){
this.name = n
this.events = {}
return this
}
EventEmitter.prototype.on = function(eventName, callback){
this.events[eventName] ? this.events[eventName].push(callback) : this.events[eventName] = callback
}
EventEmitter.prototype.trigger = function(eventName, …args){
!(this.events[eventName]) || callback(this.name, this.events, args)
function callback(n, eventList, a){
for (n in eventList) {
(eventList[n]).apply(this, a)
}
}
}
/*
As seen below
———————————————————————————————————->
*/
let foo = new EventEmitter('foo')
foo.on('foo', (a) => {
console.log(a.handle)
a.crow()
})
foo.trigger('foo', {
handle: 'bar',
crow: () => {
setInterval(() => {
console.error(' { [ [!!!SQUAK!!!!} } }')
}, 500)
}
})
console.log(typeof foo)
console.log(typeof foo.trigger)
console.log(typeof foo.on)
console.log(foo.__proto__)
the " …rest " just saved my virtual javascript life, great vid, peace
Just got this as a 'take-home' interview question. Very similar!
Why did you chose to execute the callbacks with cb.apply(null, rest) instead of just cb(rest) ? Isn't it preferable that the callback keeps its context, in case it had something like "this.someProp" in its code?
Two questions here:
1. The trigger function will call all callbacks registered to that event with the specified arguments. So it follows that if:
this.events[eventName] = [cb1,cb2,cb3]
and I 'trigger' with trigger ( 'eventName', [arg1,arg2,arg3] ) that this will call cb1,cb2,cb3 thus:
cb1(arg1,arg2,arg3)
cb2(arg1,arg2,arg3)
cb3(arg1,arg2,arg3)
Let's hope all the callbacks take the same arguments….
2. What's the point of the emitter? Can I get some use cases?
Excellent video. Implementing this in JS was something I was wondering for some time. Thank you.
You can avoid the if else statement in the "on" method by dirrectly push the callback on the event array after adding this line of code : (events[eventName] || (events[eventName] = [])).push(…).
Please do a video on Redux sagas 🙂
Hi, if u call method "trigger" like this
trigger('change', 'vasya');
And early define like this
ee.on('change', (name) => {
console.log('hello ' + name + ' there!');
});
Result will be "hello undefined there!"
Maybe need fix this code:
this.events[eventName].forEach(cb => {
cb.apply(rest);
});
to change
this.events[eventName].forEach(cb => {
cb.apply(this, rest);
});
Or i dont understand purpose of rest arg?
Thanks.