Lesson of the day: Read more code.
Hahahahaha lmao wtf /die. :@
So, you should always read code. I know everyone says, “reading code is the best way to learn and improve your code” or something. But we are lazy. Stuff in code confuses us and we go back to watching House M.D. the 30th time.
Its fun reading about code. Its fun reading about people who write code. Its fun reading about their opinions. What is NOT fun is reinventing the wheel.
Let me explain. I wrote an event delegation method for my framework. It should’ve been straight forward and simple but I tried doing it like jQuery. Except, I didn’t bother looking at jQuery’s code too well. I just wanted to have the same method signature.
event.on(el, type, selector, callback)
Now, to be able to handle proper CSS selectors for the Selector parameter I wrote my own parser. The whole ID, Class, everything. Now I needed a loop that traverses from event.target to the delegate Element. So I wrote that.
Thats right. I wrote all that. Now if you’ve done this sorta thing before you probably know why I’m pissed off.
Anyway, combined with the selector parser and the traverser it worked well enough. Almost perfectly. So much so that I didn’t have to look at it for months and it did its job just fine. There were quirks I would have to fix every now and then, but nothing that made me think do I REALLY need it?.
Before getting into it all, I did try a few times to understand how jQuery does it. But god damn jQuery has so many things happening(the whole reason why I wanted to stop using it) that it was impossible to understand and stay focused for my incredibly short attention spanned brain.
I just happened to look at gator.js today and OMFG!
“But wait!”, you say. “Isn’t it obvious? If browsers provide querySelector et all, they probably provide a way to do selector matching too, right?” Well obviously they do!
What am I talking about? MatchesSelector. Or rather…
MatchesSelector = el.matches || el.webkitMatchesSelector || el.mozMatchesSelector || el.msMatchesSelector || el.oMatchesSelector;
This function does everything my 100 lines of code did and probably much faster at that. I’m not sure how my tremendous amount of googling never caught this. But I’ve learnt a lesson today.
Read more code. If you don’t understand this particular piece of code(jQuery), then read something that does something similar(gator.js), then come back to this one. Repeat.
Time to hone my GoogleFu.
P.S. I lied. Coding the whole traverser and selector parser was actually kinda fun.
(This was originally written a few months back. Don’t remember when. It was sitting in a text file which, unfortunately, I modified before I could see its last changed date.)