I used to love jQuery, and to be honest, I learned jQuery before I learned JavaScript. So I’m kind of betraying jQuery by writing this article.

I know there are tons of articles written about why you shouldn’t use jQuery, but I just wanted to share my own experience.

What to use instead of jQuery?

With the development of the Web, new technologies are pushing forward, and the front waves are dying on the beach. Just like some programming languages that were once great are now gone. I think jQuery is no exception, and it’s time to say goodbye to the wonderful programming experience it once provided.

Why give up jQuery? Because of Vue! If you’ve read my previous posts, you can probably guess that I’m a vue.js fan. Vue.js offers a lot of tools, and I dare say it’s much more convenient than jQuery.

The DOM and events

Let’s look at an example of a click event.

Notice that I omitted the initialization part of the framework

A Vue SFC (don’t panic) :

<template>
    <button @click="handleClick"</button> </template> <script>export default {
        methods: {
            handleClick() {
                alert('Iron, you hit the button.');
            }
        }
    }   
</script>

Copy the code

JQuery:

<button id="myButton"</button> <script> $('button#myButton').click({
        alert('jQuery this time');
    });
</script>

Copy the code

You might think that vue.js has more code, and you would be right, but no! Vue.js doesn’t have much more code, actually except handleClick() {… } is just the structure of the framework, shared with other behaviors. I think vue.js looks cleaner and the code is more readable.

You may have a question in your mind, you still use vue.js ah, pot calling the kettle black? Don’t use it if you can! In fact, you can do this with native JavaScript:

<button id="myButton"</button> <script> document.getelementbyid ()'myButton').addEventListener('click'.function() {
       alert('Greetings from native JS'); 
    });
</script>

Copy the code

So you see, jQuery is just translating code into native JavaScript behind our backs, pretending to be special.

As for DOM element selection, it’s easy to do with native JavaScript:

document.getElementById('myButton'); // jQuery => $('#myButton');
document.getElementsByClassName('a'); // jQuery => $('.a');
document.querySelectorAll('.parent .a'); // jQuery => $('.parent .a');

Copy the code

An AJAX request

Probably the most used aspect of jQuery is AJAX. We all know that jQuery provides $.ajax(), or you can use the specific $.post() and $.get(), respectively. These apis can help you send AJAX requests, get results, and so on.

You can use two methods of native JavaScript, XMLHttpRequest and fetch.

XMLHttpRequest is a bit of an old school, not quite the same as FETCH.

Fetch is newer, more common than XMLHttpRequest, and is based on promises.

Fetch does not send cookies by default, and if the HTTP status code returns an error code, such as 404 or 500, it does not reject, so basically.catch() does not run, but response.ok becomes false.

I won’t compare them in detail here.

So let’s look at two pieces of code.

This is the jQuery:

$.ajax({
  method: "POST",
  url: "http://localhost/api",
  data: { name: "Adnan", country: "Iran" }
}).done(response => console.log(response))
  .fail(() => console.log('error'));

Copy the code

The sample code is from the official jQuery documentation

This is the fetch:

fetch(
    'http://localhost/api',
    {
        method: 'POST'
        body: { name: "Adnan", country: "Iran" }
    }
  ).then(response => console.log(response));

Copy the code

Both pieces of code do the same thing, but fetch does not belong to any library.

Note that fetch can also be used with async/await, as follows:

async function getData() {
    let response = await fetch('http://localhost/api' {
        method: 'POST'
        body: { name: "Adnan", country: "Iran"}});return response;
}

Copy the code

Do I use fecth myself? Actually no, because I don’t trust it very much, for a number of reasons. So I’m using a library called Axios, which is also promise based and very reliable.

The code above, written in Axios, looks like this:

axios({
    method: 'POST',
    url: 'http://localhost/api',
    data: { name: "Adnan", country: "Iran" }
}).then(response => console.log(response))
  .catch(err => console.log(err));

Copy the code

Axios can also be used with async/await:

async function getData() {
    let response = await axios.post('http://localhost/api' {
        name: "Adnan",
        country: "Iran"
    });
    return response;
}

Copy the code

conclusion

I don’t use jQuery anymore, although I used to love it so much that the first thing I did after initializing my project was install jQuery.

I believe we no longer need jQuery because other libraries and frameworks can actually do things more easily and succinctly than jQuery.

There are probably a large number of plugins based on jQuery, but almost all have their own Vue. Js or react.js component alternatives.

What do you think? Feel free to leave a comment in the comments section!

communication

Welcome to scan the code to follow the wechat public number “1024 translation station”, to provide you with more technical dry goods.