{"id":1994,"date":"2021-01-13T14:11:48","date_gmt":"2021-01-13T07:11:48","guid":{"rendered":"https:\/\/wptips.dev\/?p=1994"},"modified":"2021-04-27T19:17:29","modified_gmt":"2021-04-27T12:17:29","slug":"should-you-use-jquery","status":"publish","type":"post","link":"https:\/\/pixelstudio.id\/blog\/should-you-use-jquery\/","title":{"rendered":"Should You Use jQuery in 2021? (Well Yes, but No)"},"content":{"rendered":"\n

WordPress already enqueues jQuery by default. Why not make use of it?<\/p>\n\n\n\n

That, I agree<\/strong>. You can disable it but a lot of themes and plugins depend on it. So it’s not an option for most WordPress sites.<\/p>\n\n\n\n

However, more and more people are moving away from jQuery. That means a lot of community resources like libraries and StackOverflow questions you found are using native JavaScript<\/strong>.<\/p>\n\n\n\n

Being able to understand that and adapt it to your project will be highly beneficial<\/strong> to you. Moreover, it will prepare you to use a modern framework like React or Vue.<\/p>\n\n\n\n

So what’s the best way to learn native JS?<\/p>\n\n\n\n

Learning Native JavaScript<\/h2>\n\n\n\n

Check out the website below. It lists out the native equivalent of most jQuery functions.<\/p>\n\n\n\n

\n
YouMightNotNeedJQuery.com<\/a><\/div>\n<\/div>\n\n\n\n

As you can see, most of them are quite simple. For the complex ones like AJAX and Custom Event, you can create helper functions.<\/p>\n\n\n\n

EXAMPLE<\/strong><\/p>\n\n\n\n

Convert the jQuery snippet below into native JS:<\/p>\n\n\n\n

\/\/ jQuery\n\n\/\/ get one element\nlet $el = $( '.my-div' );\n\n\/\/ change the HTML content\n$el.html( '<span>Hello World<\/span>' );\n\n\/\/ add class\n$el.addClass( 'new-class' );<\/code><\/pre>\n\n\n\n
\/\/ JS\n\nlet $el = document.querySelector( '.my-div' );\n\n\/\/ need to check whether element exists or not\nif( $el ) {\n  $el.innerHTML = '<span>Hello World<\/span>';\n\n  $el.classList.add( 'new-class' );\n} <\/code><\/pre>\n\n\n\n
For the second example, we will take a look at multiple elements. This is the biggest inconvenience<\/strong> of native JS. You need to loop each one like shown below:<\/p>\n\n\n\n
\/\/ jQuery\n\n\/\/ get multiple elements\nlet $cards= $( '.container .card' );\n\n\/\/ add click listener to all cards at once\n$cards.on( 'click', doSomething );<\/code><\/pre>\n\n\n\n
\/\/ JS\n\nlet $cards = document.querySelectorAll( '.container .card' );\n  \n\/\/ Loop and assign the listener to each item\n[].forEach.call( $cards, function( $card ) => {<\/code>\n  $card.addEventListener( 'click', doSomething );\n});<\/code><\/code><\/pre>\n\n\n\n
Using ES6 Syntax<\/h2>\n\n\n\n
Some of the snippets from that website can be shortened using ES6 syntax. It’s not supported by Internet Explorer (IE), but that only covers 1.3% global usage).<\/p>\n\n\n\n
The notable ones are:<\/p>\n\n\n\n
LOOPING QUERY SELECTOR ALL<\/strong><\/p>\n\n\n\n
\/\/ IE9\nvar $elements = document.querySelectorAll( '.selector' );\nArray.prototype.forEach.call( $elements, function( $el ) {\n  \/\/ do something\n} );<\/code><\/pre>\n\n\n\n
\/\/ ES6\nlet $elements = document.querySelectorAll( '.selector' );\nfor( let $el of $elements ) {\n  \/\/ do something\n}<\/code><\/pre>\n\n\n\n
MATCHING SELECTOR<\/strong><\/p>\n\n\n\n
\/\/ IE9\nvar matches = function(el, selector) {\n   return (el.matches || el.matchesSelector || el.msMatchesSelector || el.mozMatchesSelector || el.webkitMatchesSelector || el.oMatchesSelector).call(el, selector);\n };\n\nmatches(el, '.my-class');<\/code><\/pre>\n\n\n\n
\/\/ ES6\nel.matches( '.my-class' );<\/code><\/pre>\n\n\n\n
SIBLINGS SELECTOR<\/strong><\/p>\n\n\n\n
\/\/ IE9\nvar $items = $el.parentNode.children;\nvar $siblings = Array.prototype.filter.call( $items , function( $item ) {\n  return $item !== $el;\n});<\/code><\/pre>\n\n\n\n
\/\/ ES6\nlet $items= $el.parentNode.children;\nlet $siblings = [...$items].filter( $item => $item !== $el );<\/code><\/pre>\n\n\n\n
FIND INDEX<\/strong><\/p>\n\n\n\n
\/\/ IE9\nfunction index( $el ) {\n  if (!$el) return -1;\n  var i = 0;\n  do {\n    i++;\n  } while ( $el = $el.previousElementSibling );\n  return i;\n}\n\nlet $el = document.querySelector( '.my-item' );\nlet elIndex = index( $el );<\/code><\/pre>\n\n\n\n
\/\/ ES6\nlet $el = document.querySelector( '.my-item' );\nlet elIndex = [...$el.parentNode.children].indexOf( $el );<\/code><\/pre>\n\n\n\n
AJAX \/ API CALL<\/strong><\/p>\n\n\n\n
\/\/ IE10\nvar request = new XMLHttpRequest();\n request.open('GET', '\/my\/api\/url', true);\n request.onload = function() {\n   \/\/ Do something with the data\n   if (this.status >= 200 && this.status < 400) {\n     var data = JSON.parse(this.response);\n     console.log( data );\n   }\n   \/\/ Handle error\n   else {\n     throw new Error( this.responseText );\n   }\n };\n request.send();<\/code><\/pre>\n\n\n\n
\/\/ ES6\nfetch(\u00a0'\/my\/api\/url',\u00a0{\u00a0method:\u00a0'GET'\u00a0}\u00a0)\n\u00a0\u00a0.then(\u00a0response<\/em>\u00a0=><\/em>\u00a0{\n\u00a0\u00a0\u00a0\u00a0if(\u00a0response.status\u00a0>=\u00a0200\u00a0&&\u00a0response.status\u00a0<\u00a0400\u00a0)\u00a0{\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0return\u00a0response.json();\n\u00a0\u00a0\u00a0\u00a0}\u00a0else\u00a0{\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0return\u00a0Promise<\/em>.reject(\u00a0response.statusText\u00a0);\n\u00a0\u00a0\u00a0\u00a0}\n\u00a0\u00a0}\u00a0)\n\u00a0\u00a0\/\/\u00a0Do\u00a0something\u00a0with\u00a0the\u00a0data\n\u00a0\u00a0then(\u00a0data<\/em>\u00a0=><\/em>\u00a0{\n\u00a0\u00a0\u00a0\u00a0console.log(\u00a0data\u00a0);\n\u00a0\u00a0}\u00a0)\n\u00a0\u00a0\/\/\u00a0Handle\u00a0error\n\u00a0\u00a0.catch(\u00a0err<\/em>\u00a0=><\/em>\u00a0{\n\u00a0\u00a0\u00a0\u00a0throw\u00a0new\u00a0Error(\u00a0err\u00a0);\n\u00a0\u00a0}\u00a0);<\/code><\/pre>\n\n\n\n
ES5 version uses a slick Promise object but it’s as long as the old one. So I recommend creating a helper function as shown in this Gist<\/a>.<\/p>\n\n\n\n
Now you only need the snippet below to do an API call:<\/p>\n\n\n\n
myAPI.get( '\/my\/api\/url' ).then( data => {\n  \/\/ Do something with the data\n} );<\/code><\/pre>\n\n\n\n
What’s Next?<\/h2>\n\n\n\n