A blog that dreams of a life without wasted jQuery

Hello.
I'm Mandai, in charge of Wild on the development team.

When developing with JavaScript, there may be many situations where you simply install jQuery and get things done.
But what if you only really need one or two features?

jQuery is an easy-to-use library, and I think I will continue to use it, but unless I decide to use it completely, I think it would be nice to have other options.

This time, I would like to introduce "that feature" that is the only one I want.

menu

 

first draft

• I want $.ready()
• I want to quickly retrieve objects with $('div#hogehoge > .fuga')
• I want $('hoge').on()
• I want datepicker()
• I want $('hoge').addClass()

 

I want $.ready()

I think this is jQuery's greatest invention, but you can also implement it yourself by using Promises.
If there are no problems with window.onload, that may be fine.
However, let's quickly get this done by using a small module that only provides ready().

• domready
• document-ready
• doc-ready

There are several candidates, but I think these are the ones.
All of them generally work as expected, but there are some differences in browser (mainly IE) compatibility, so please check each site.

 

I want to quickly retrieve objects with $('div#hogehoge > .fuga')

This is standard for browsers and is fine.

• If you want to specify the ID, getElementById()
• To specify a single class, use getElementsByClassName()
• If you want to make complicated specifications, use document.querySelector(), document.querySelectorAll()

There is no problem with this.

document.querySelector() is very powerful and can use any CSS selector, so you can also search by ID selector, but it is slower than getElementById().

However, methods other than getElementById() have been implemented at different times and are not supported by some browsers.
If you need to cover a wide range of browsers, I think using jQuery is a good choice.

Check with Can I Use

 

I want $('hoge').on()

This can also be handled using the browser's standard addEventListener() method.

var hoge_obj = document.getElementById('hoge'); // Simple version hoge_obj.addEventListener('', (e)=>{ // Some processing }); // Version that can be deleted and managed with removeEventListener() var hoge_func = (e) => { // Some processing }; hoge_obj.addEventListener('click', hoge_func); // Remove the listener hoge_obj.removeEventListener('click', hoge_func);

 

You can easily write this by setting an anonymous function to the second argument of addEventListener(), but the disadvantage of this case is that you cannot remove the registered listener with removeEventListener().
To avoid this, declare the anonymous function as the second argument in advance and register it.
By this step, you will be able to identify the function with removeEventListener(), and you will be able to delete listeners that are no longer needed.

However, depending on the compatibility with IE, I think using jQuery may be an option.

Check with Can I Use

 

I want datepicker()

Since datepicker is a specialty of jQuery, it may be difficult to find a package that does not depend on jQuery.
This time, we will introduce two types of packages.

• flatpickr
• Pikaday

There's no difference between these two, but they have different directions in terms of design, so I think it's worth knowing about both.

flatpickr has a flat design and I think it goes well with Material Design.
As for Pikaday, it has a somewhat Bootstrap-like feel to it, and I think it has a simple design.

Both can be loaded and used as jQuery modules, so if you don't want to use jQuery but want to use jQuery UI, it might be a good idea.

 

I want $('hoge').addClass()

Registering (addClass) and deleting (removeClass) classes using jQuery is very easy.
However, now the number of standard JavaScript methods has increased rapidly, and interfaces that can handle classes other than className have been implemented.

That is classList, which we will introduce this time.

var hoge_obj = document.getElementById('hoge'); hoge_obj.className = 'class_a class_b'; // Get class information console.log(hoge_obj.classList); // Get class information as an array (read-only) console. log(hoge_obj.classList.length); // Since it is parsed by dividing it by spaces, 2 is returned hoge_obj.classList.add('class_c'); // class_c is added hoge_obj.classList.remove ('class_b'); // class_b is deleted hoge_obj.classList.toggle('class_d'); // Register if class_d does not exist, delete if it exists hoge_obj.classList.contains('class_c'); // class_c true if it contains

 

By using classList, processing around classes has become dramatically easier.
This may not be available depending on the browser, so you need to use it according to your requirements.

Check with Can I Use

 

summary

I've listed some that came to mind, but please be sure to check as some may or may not be usable depending on the browser type and version.

Also, if you incorporate various libraries to get rid of jQuery, there is the trap of actually lengthening the loading time, so if you can get away with an all-in-one solution, I think it's better to just use it.

We will add more from time to time.

That's it.