Why I Like Using Maps (and WeakMaps) for Handling DOM Nodes
1–10 of 30 posts
Re: Why I Like Using Maps (and WeakMaps) for Handling DOM Nodes
#2This might be one of the more interesting articles I've read in a few years that deal with low level direct DOM manipulation vs "yet another thing about React".
Re: Why I Like Using Maps (and WeakMaps) for Handling DOM Nodes
#3Nice! I have used Maps often for storing arbitrary key-value pairs, but until 5 minutes ago I didn't know you could use object references as keys. So this was a very good use of 5 mins.
Re: Why I Like Using Maps (and WeakMaps) for Handling DOM Nodes
#4This might be one of the more interesting articles I've read in a few years that deal with low level direct DOM manipulation vs "yet another thing about React".
Yeah, I’ve too noticed how hard it is to find any web development guidance involving direct DOM manipulation now!
I was recently refactoring some code and wondering whether to use a (JS) class… The search results were mostly about React Class Components. And I was contemplating building a reusable component… results from the past decade were split between React Components and Web components. (In retrospect I should’ve tried DDG or something not connected to my search history lol).
Anyway where are the vanilla JS/TS DOM manipulators blogging these days? I guess here is one, thankful for the post :)
Re: Why I Like Using Maps (and WeakMaps) for Handling DOM Nodes
#5Why not just use the 'dataset' property of the element itself? Then you can use querySelectorAll to find your selected rows automatically:
node.querySelectorAll('tr[data-selected="true"]');
Re: Why I Like Using Maps (and WeakMaps) for Handling DOM Nodes
#6I need to read & consider this more, but my word, putting data in the DOM is so divine, is so the web way. See, HTML is the Web, https://www.petelambert.com/journal/html-is-the-web
Re: Why I Like Using Maps (and WeakMaps) for Handling DOM Nodes
#7I would argue that all "mapping" structures should use Map these days. Objects should be used only for record/struct data with a fixed set of programmer-named keys.
I think MDN has a good comparison: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Refe...
The only real downside of maps is that they don't support JSON serialization. However you can fix this pretty easily by using a map with an overridden `toJSON` for serializable keys.
class StringMap extends Map {
toJSON() {
return Object.fromEntries(this);
}
}Re: Why I Like Using Maps (and WeakMaps) for Handling DOM Nodes
#8Why not just use the 'dataset' property of the element itself? Then you can use querySelectorAll to find your selected rows automatically: node.querySelectorAll('tr[data-selected="true"]'); In other words.. "use the DOM to handle the DOM."
That'd work for this specific case, but I think that was just a simplified example. A Map can store a value of any type, while the dataset property will always be a string. If you're only working with strings, it's a great option since you don't need to maintain a side data structure at all. But, serializing and deserializing arbitrary objects would be expensive.
Re: Why I Like Using Maps (and WeakMaps) for Handling DOM Nodes
#9I would argue that all "mapping" structures should use Map these days. Objects should be used only for record/struct data with a fixed set of programmer-named keys. I think MDN has a good comparison: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Refe... The only real downside of maps is that they don't support JSON serialization. However you can fix this pretty easily by using a map with an overridden `toJS…
I'd say the big downside is that they don't support the general looking accessor that I'd wager way way way too many people will accidentally use. Myself definitely being one of them. Would have been better if they didn't "seem" to work with the wrong syntax, at least. But, alas, here we are.
Re: Why I Like Using Maps (and WeakMaps) for Handling DOM Nodes
#10I would argue that all "mapping" structures should use Map these days. Objects should be used only for record/struct data with a fixed set of programmer-named keys. I think MDN has a good comparison: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Refe... The only real downside of maps is that they don't support JSON serialization. However you can fix this pretty easily by using a map with an overridden `toJS…
I'd say the big downside is that they don't support the general looking accessor that I'd wager way way way too many people will accidentally use. Myself definitely being one of them. Would have been better if they didn't "seem" to work with the wrong syntax, at least. But, alas, here we are.
I'm typically using TypeScript so that is more or less a non-issue. But even then it seems like an easy thing to get used to.