웹 응용 프로그램에서 jQuery를 벗어나는 이유 및 방법

사진작가Greg Rakozy우Unsplash
나는 5년의 역사를 가진 웹 응용 프로그램을 연구하기 시작했고, 최근에 우리는 응용 프로그램의 성능을 향상시키기 위해 코드 라이브러리를 수정하기 시작했다.우리는 jQuery를 의존항으로 삭제하는 간단한 방법을 시도했다.
jquery를 사용해야 하는지 선택하는 데 도움을 줄 수 있는 글이 많기 때문에 이 점을 이야기하지 않겠습니다.반대로, 나는 우리 개인이 jQuery를 떠나기로 결정한 이유와 코드 라이브러리에서 일부 jQuery 세션을 Vanilla JS 세션으로 업데이트하는 방법을 언급할 것이다.

왜 우리는 jQuery를 떠나기로 결정했습니까?

우선, 우리는 개발자의 편의를 위해 jQuery에 가입했다. 지난 몇 년 동안 JS 생태계에 많은 변화가 생겼다. 솔직히 말하자면, 우리는 현재 우리가 자바스크립트로 거의 모든 일을 편리하게 할 수 있다는 것을 깨달았다.

프로젝트에 약 87kb의 파일/코드를 더 이상 불러올 필요가 없습니다

선택기, 이벤트 처리 프로그램, setter/getter 등 기본 문장은 vanilla JS로 작성할 수 있다.따라서 내 라이브러리는 내부에서 이런 기본적인 방법을 호출할 필요가 없다. 나는 스스로 그것을 호출할 수 있다.

현재 크로스 브라우저 호환성 문제에 부딪히는 범위가 점점 작아지고 있다. 이것은 많은 개발자들이 먼저 jQuery를 사용하는 또 다른 주요 원인이다.그래서 이 좋은 점은 더 이상 적용되지 않는다.

CSS3 애니메이션의 성능은 jQuery 효과보다 훨씬 우수하다. 왜냐하면 CSS3 애니메이션은 웹 응용 프로그램의 자바스크립트와 다른 라인에서 실행되기 때문이다.이것 괜찮아요? —  https://greensock.com/js/speed.html 성능 비교

이러한 이유로 우리는 jQuery를 코드 라이브러리에서 뽑을 수 있다고 굳게 믿었다. 그래서 우리는 해냈다.
다음은 코드 라이브러리에서 자주 사용하는 jQuery 방법입니다.jQuery 팀은 문서에 jQuery 방법의 자바스크립트 대체 방안을 기꺼이 열거하기 때문에 jQuery를 떠나는 것은 큰 도전이 아니다.각 문장에 사용할 수 있는 JavaScript 코드도 제공됩니다.
주의: 이 코드 부분은 우리의 페이지 디자인과 코드 구조에 특정됩니다.그것들은 당신의 코드 라이브러리에 따라 다를 수 있습니다.

선택기

우리는 DOM 요소 참조를 얻기 위해 클래스와 id 선택기를 광범위하게 사용합니다.

// jQuery
let searchBox = $(“.search-box”);
searchBox.on("keydown", () =>{
  // do something
});

// JavaScript
// we wanted the event listener only to the first text box anyway
let searchBox = document.getElementsByClassName("search-box")[0];
searchBox.addEventListener("keydown", () => {
  // do something
}):

이벤트 핸들

이것에서 이벤트를 이동하는 대신 DOM 요소에 첨부합니다.addEventListener.이전 절의 코드 예시는 어떻게 실현되었습니까?

영향

이것숨기기 및비동기적으로 데이터를 가져와서 렌더링하는 방법은 display: none 및 display: block 입니다.응, 우리가 받아들일 수 있는 균형이 하나 있어. 바로 애니메이션이야.우리는 CSS 애니메이션을 사용할 수 있지만, 처음에 우리는 디스플레이 스타일 속성을 사용하여 숨기거나 표시하기로 결정했다. 왜냐하면 우리는 지금 애니메이션을 사용하지 않을 수 있기 때문이다.용기의 기본 표시 속성은 block 이기 때문에 우리에게 매우 효과적이다.

// jQuery
$("#results").hide(500); // to hide
$("#results").show(500); // to show

// JavaScript
document.getElementById("results").style.display = "none" // to hide
document.getElementById("results").style.display = "block" // to show

속성 가져오기 및 설정

// jQuery
$("#result-link").attr("href");
$("#result-link").attr("href", "https://www.google.com");

// JavaScript
document.getElementById("result-link").getAttribute("href");
document.getElementById("result-link").setAttribute("href", "https://www.google.com");

클래스 이름 및 스타일 가져오기 / 설정

// jQuery
$( "#results" ).hasClass( "show" ); 
$( "#results" ).addClass( "show" );
$( "#results" ).removeClass( "show" );
$( "#results" ).css({top: 0})


// JavaScript
document.getElementById("results").classList.includes("show");
document.getElementById("results").classList.add("show");
document.getElementById("results").classList.remove("show");
document.getElementById("results").style.top = 0;

.준비()

.ready 함수의 JavaScript 버전에서 프로세서 DOMContentLoaded를 DOM 요소에 추가하고 있습니다.StackOverflow에 대해 깊은 답이 하나 있지만, 이것은 우리의 최초의 해결 방법이다.

// jQuery
$(document).ready(function() {
  // Handler for .ready() called
});

// JavaScript
document.addEventListener("DOMContentLoaded", function() {
  // Handler for DOMContentLoaded
});

비록 jQuery 문법은 간단하고 간단해 보이지만, 우리는 소형화기가 있는 세계에서 생활한다. 이런 소형화기들은 자바스크립트를 사용하여 클라이언트 기계에 추가 바이트를 납품하지 않을 것을 확보할 것이다.
내 말은 초보 웹 개발자는 아마추어 단계에서 적어도 한 번은 jQuery를 봐야 한다는 것이다.이것은 제가 자바스크립트의 개념적 지식을 많이 얻을 수 있도록 도와줍니다. 예를 들어 이벤트 귀속/귀속 해제, DOM 해석 등입니다. 만약에 Angular, React 또는 Vue 등 현대 프레임워크를 사용한다면 개발자의 편의성과 크로스 브라우저 호환성이 존재하기 때문에 응용 프로그램에 jQuery를 포함하는 범위가 비교적 작습니다.
jQuery를 사용할지 안 사용할지 결정하려면 몇 개의 글을 읽을 수 있습니다

https://hackernoon.com/does-jquery-sacrifice-performance-and-code-efficiency-468aa967ef04

https://medium.com/javascript-in-plain-english/jquery-will-die-soon-heres-why-976a6b8105e1

https://mmikowski.github.io/why-jquery/

https://dev.opera.com/articles/css3-vs-jquery-animations/

도움이 됐으면 좋겠어요.읽어주셔서 감사합니다!