To this day, I will not use jQuery because there are native DOM methods. However I come across an issue. Those native DOM methods have long names.
The previous code is to create an element, append text to the created element, query an element, and then append the created element to the queried element. This seems like a lot of text. Suddenly jQuery syntax is appealing. Compare the next code block to the previous code block.
That is much shorter than the native way. But I don’t want to include all of jQuery if I just want basic DOM methods!
Wait a moment. I like doing things on my own. What if I make something that would accomplish the conciseness of jQuery?
First, the IIFE wrapper and Library init.
I’ll do this! Pass into the IIFE a callback function to attach the library to the DOM. The library will be a function that can be called. The function will have a selector as a parameter. In the init function of the library, use the
Object.create() method to make an instance of the methods. Attach any metadata to the library. The init function will be called each time the Library is invoked, so then that means I can get a fresh instance of the methods I’ll create.
I’ll make those methods now. They need to provide a shortcut for me to access the DOM. I commonly query elements, create elements, and append nodes to created or queried elements.
query and the
create methods are straight forward. Use the DOM methods and return the result. The
give method essentially gives an element node or text node to a queried or created element. That
give method will use a created or queried element based on if the
attachee parameter is text or an element.
So, this mini library that I made does things in a shorter fashion than the old DOM way!
It’s not as short as the jQuery way, but I like it more than typing DOM methods. Great! I engineered a small library for my own use case.