DEV Community


Discussion on: How to make a resizable panel control with Web Components

ndesmic profile image
ndesmic Author

You're right. It actually comes from some boilerplate I copy-and-paste a lot and was not necessary here. I always go back-and-forth with consistency. Do I only bind things that might have issues like event handlers or do everything to be consistent about it?

dannyengelman profile image
Danny Engelman • Edited

With lexical scope bind is old notation

Event handlers don't need bind either, when you call them properly:

this.onclick = (evt) => this.myHandler(evt)

and not:

this.onclick = this.myHandler.bind(this)

The latter sucks from a code readablity POV, you have no clue a vital parameter is passed

Thread Thread
ndesmic profile image
ndesmic Author • Edited

I don't think there's much of a difference in readability. Say for example myHandler doesn't use this at all. Would you write this.onclick = e => myHandler(e) to make it clear the event was passed or just this.onclick = myHandler? My general intuition is to try to keep it consistent and I generally prefer to not inline handlers (at least in the final product anyway) as I find it starts to clutter up the event handler registrations. To note things that are handlers versus plain methods I usually do by name onClick onPointerMove etc. so hopefully it would be apparent it takes an event parameter. These might be areas where I might switch to decorators whenever they start landing.