JQuery를 버려야 할지 말아야 할지.

앞말

저는 예전에 jQuery를 좋아했습니다. 그리고 솔직히 저는 jQuery를 먼저 배우고 자바스크립트를 배웠습니다.그래서 내가 이 글을 쓰는 것은 마치 jQuery를 배신하는 것 같다.
나는 왜 jQuery의 문장을 사용하지 말아야 하는지 알고 있지만, 나는 단지 자신의 체험을 말하고 싶을 뿐이다.

jQuery 말고 뭘로 할까요?

웹의 발전에 따라 신기술은 장강의 뒷물결이 앞물결을 밀고 앞물결이 모래사장에서 죽었다.어떤 프로그래밍 언어들이 휘황찬란했던 것처럼 지금도 사라졌다.나는 jQuery도 예외가 아니라고 생각한다. 비록 우리에게 아름다운 프로그래밍 체험을 가져다 주었지만.
왜 jQuery를 포기해요?뷰가 있으니까!만약 네가 나의 이전 문장을 보았다면, 너는 내가 Vue라는 것을 알아맞힐 수 있을 것이다.가루Vue.js는 매우 많은 도구를 제공했다. 나는 감히 그것이 jQuery보다 훨씬 편리하다고 말할 수 있다.

DOM 및 이벤트

클릭 사건의 예를 봅시다.
프레임의 초기화 부분을 생략했습니다.
하나의 Vue SFC(Single File Component, 단일 파일 구성 요소)

<template>
    <button @click="handleClick"> ， </button>
</template>

<script>
    export default {
        methods: {
            handleClick() {
                alert(' ， ');
            }
        }
    }   
</script>

jQuery로 이렇게 썼습니다.

<button id="myButton"> </button>

<script>
    $('button#myButton').click({
        alert('  jQuery');
    });
</script>

너는 아마 Vue라고 생각할 것이다.js의 코드가 더 많군요. 당신의 말은 맞지만, 그렇지 않습니다!Vue.js에 더 많은 코드가 있는 것은 아닙니다. 실제로는 handleClick () 를 제외하고는 {...}이외의 부분은 틀의 구조일 뿐 다른 행위와 공용된다.나는 Vue라고 생각한다.js는 보기에 더욱 깔끔하고 코드의 가독성이 높다.
네 마음속에 또 하나의 의문이 있을지도 모르지만, 너는 그래도 Vue를 썼다.js야, 오십보 백보?능력이 있으면 쓰지 마라!실제로 네이티브 JavaScript를 사용하면

<button id="myButton"> </button>

<script>
    document.getElementById('myButton').addEventListener('click', function() {
       alert(' js '); 
    });
</script>

그러니까 봐라, jQuery는 우리가 코드를 원생 자바스크립트로 번역하는 것을 업고 있을 뿐, 자신이 특별한 척할 뿐이다.
DOM 요소의 선택 작업은 기본 JavaScript를 사용하여 쉽게 수행할 수 있습니다.

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

AJAX 요청

JQuery가 가장 많이 쓰이는 부분은 아마도 AJAX일 것이다.
우리는 모두 jQuery가 $를 제공했다는 것을 안다.ajax (), 구체적인 $를 사용할 수도 있습니다.post () 및 $.get().이 API는 AJAX 요청을 보내고 결과를 얻을 수 있도록 도와줍니다.
원생 JavaScript의 두 가지 방법을 사용할 수 있습니다. 그것이 바로 XMLHttpRequest와fetch입니다.
XMLHttpRequest도 골동품이라고 할 수 있고fetch와 비교하면 그다지 다르다.
fetch는 XMLHttpRequest보다 더 유행하고 프로미스 기반입니다.
fetch는 기본적으로 쿠키를 보내지 않으며, HTTP 상태 코드가 오류 코드를 되돌려줍니다. 예를 들어 404나 500, 이것은 reject를 보내지 않기 때문에 기본적으로.catch () 는 실행되지 않고 response입니다.ok가false가 되다.
여기서는 그것들을 상세하게 비교하지 않는다.
우리는 그래도 두 단락의 코드를 보러 왔다.
이것은 jQuery:

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

예시 코드는 jQuery 공식 문서에서
이것은fetch:

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

두 단락 코드가 하는 일은 같지만fetch는 어떤 라이브러리에도 속하지 않습니다.
fetch도 async/await와 결합하여 사용할 수 있습니다. 아래와 같습니다.

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

그럼 나 혼자 fecth 쓸까?사실은 없어요. 제가 그것을 그다지 믿지 않기 때문에 이유가 많아요.그래서 나는axios라는 라이브러리를 사용하고 있고promise를 바탕으로 하는 동시에 매우 믿을 만하다.
위의 코드는 axios로 이렇게 적혀 있습니다.

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

axios도 async/await와 결합하여 사용할 수 있다.

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

총결산

나는 이제 더 이상 jQuery를 사용하지 않는다. 비록 내가 그것을 매우 좋아했지만, 그때 프로젝트가 초기화된 후의 첫 번째 일은 jQuery를 설치하는 것이다.
나는 우리가 더 이상 jQuery를 필요로 하지 않는다고 믿는다. 왜냐하면 다른 라이브러리와 프레임워크는 실제로 jQuery보다 더 편리하고 간결하게 임무를 완성할 수 있기 때문이다.
jQuery 기반의 플러그인이 많이 있을 수 있지만 기본적으로 해당하는 Vue가 있습니다.js 또는 React.js 구성 요소 대체품.
이상은 JQuery의 상세한 내용을 포기해야 하는지 여부입니다. JQuery에 대한 더 많은 자료는 저희의 다른 관련 글에 주목하세요!