JQuery를 ES6으로 재구성

표지 사진 Markus Spiske - Unsplash

JQuery의 역사를 보세요.

The big bang of web development

2006년부터 2015년까지 JQuery는 혁명적이었다.이것은 개발자가 유지하기 어려운 모든 코드를 완성한 라이브러리입니다. HTML 요소의 표준화된 API 선택, 브라우저 지원.
이제 2020년이면 독자들이 이런 기능들을 비웃을 수도 있다.그러나 ECMascript6(ES6)와 CSS3의 다른 중요한 기능이 등장하기 전에 전방 웹 개발자들은 이를 실현했다.

JQuery를 종속 항목으로 삭제하는 이유

Over-reliance can be an addiction

의존성은 나쁜 것이 아니다. 우리는 개발자로서 처음부터 모든 코드를 작성할 필요도, 매번 바퀴를 재발명할 필요도 없다.그러나 나는 JQuery의 대부분 사용법은 일반적인Javascript에서 실현하기 어려우며 전체 JQuery 라이브러리를 클라이언트 브라우저에 가져올 필요가 없다고 생각한다.다시 말하면, 만약 가능하다면, 우리는 이러한 의존 관계를 삭제하여, 마운트 속도를 높이고, 본 컴퓨터의 브라우저 기능을 더욱 잘 이용하기를 희망할 것이다.

데모 코드

Lead by example

따라서 오늘 나는 HypeTracker 프로젝트의 몇 개의 JQuery 함수를 일반Javascript로 재구성하는 방법을 보여줄 것이다.

// private/js/ajax.js
// run functions after document has loaded
$('document').ready(function() {
    // ajax update shown products after select value changes
    $('#brand').change(function() {
        var brand_id = $(this).val();
        $.ajax({
            url: "./load_data.php",
            method: "POST",
            data: {brand_id : brand_id},
            success: function (data) {
                $('#show_product').html(data);
            }
        });
    });

    // update view if user enters characters into search box
    $('#sneaker_search').unbind().keyup(function(e) {
        var value = $(this).val();
        if (value.length >= 1) {
            search_sneaker(value);
        } else {
            $('#search_result').hide();
            $('#show_product').show();
        }
    });

    // ajax post call to return search results from search box
    function search_sneaker(val) {
        $('#show_product').hide();
        $('#search_result').show();
        $.post('./load_data.php', {
            'search_data' : val
        }, function(data) {
            if (data != "") {
                $('#search_result').html(data);
            } else {
                // default view if no results
                $('#search_result').html("<div class=\"row pl-3\"><div class=\"col-3\">No Result Found...</div></div>");
            }
        });
    }
});

나는 코드가 그다지 좋지 않기 때문에 미리 사과했다. 그러나 그것도 몇 년 전에 쓴 것이다. 나는 이미 더 좋은 코드를 쓰는 것을 배웠다.내가 이 코드를 사용한 것은 정성스럽게 설계된 예시가 아니라 실제 프로젝트에서 나온 제약이 있는 코드이기 때문이다. 그리고 JQuery 대신 확실한 Javascript 함수를 사용해야 한다는 자원이 있기 때문이다. (나는 마지막 링크를 할 것이다.)

암호를 풀다

Making it bite-sized

어떤 프로젝트와 마찬가지로, 설령 내가 쓴 오래된 프로젝트라도, 첫 번째 일은 그것이 무엇을 하는지, 무엇을 완성하려고 하는지 아는 것이다.코드를 읽으면 각 섹션의 주요 내용이 나열됩니다.

id가 brand인 select 요소의 값이 변경되면 이벤트를 호출합니다

이벤트: POST에 AJAX load_data.php 요청을 발송합니다. 이 요청은 id가 show_product인 요소에 표시되는 데이터를 반환합니다.

id가 sneaker_search인 입력 필드에 초점을 맞추고 검출된 키보드에서 키를 눌렀을 때 이벤트를 호출합니다

입력 필드

에서 문자가 검출되었을 때 search_sneaker 함수를 호출합니다

그렇지 않으면 표시 요소 show_product, 숨김 요소 search_result

함수 search_sneaker에서 POST에게 AJAX load_data.php 요청을 보내고 id가 search_result인 요소에서 되돌아오는 값을 나타냅니다

이상의 모든 내용을 helper 함수에 포장하여 문서가

을 완전히 불러오기 전에 모든 코드가 실행되지 않도록 합니다

변화에 하나하나 대응하다

Baby steps, one at a time

우선 AJAX 요청 추출부터 시작하겠습니다.만약 당신이 아직 눈치채지 못하셨다면, 제 위의 분류에 두 가지 예가 있습니다. 저는 'POST에 AJAX load_data.php 요청을 보냅니다.'이것은 내가 DRY 원칙을 위반했기 때문에 다시 사용할 수 있는 함수로 재구성할 수 있다는 것을 의미한다.

비동기식 Javascript 및 XML
JQuery의 강력한 기능은 이 기기의 XMLHttpRequest에서 AJAX 요청과 응답 기능을 최적화시켰다는 것이다.그러나 fetch API의 도입은 이 점을 바꾸었다. 왜냐하면 그것도 사용하기 쉽고 약속에 기초한 문법을 지원하기 때문이다.마지막으로, IE와 the introduction of the async / await keywords in the browser을 지원할 필요가 없을 때, IE는 더욱 좋아질 것이다.
나는 누구도 지원하지 않기 때문에, 나는fetch API와 async / await을 사용하여 나의 AJAX 함수를 만들 것이다.
우선, 나는 JQuery의 $post(url, data)의fetch 등가물, 즉 fetch(url, { method: 'POST'})을 사용할 것이다.
다음에 우리는 두 가지 방식으로 데이터를 인코딩할 수 있다.

자체 수동 코딩(예: field1=data1&field2=data2)

FormData interface을 사용하여

FormData 인터페이스를 사용하면 다음과 같은 새로운 기능이 제공됩니다.

async function searchSneaker(type, value) {

  let searchData = new FormData();
  searchData.append(type, value);

  const response = await fetch('./load_data.php', {
    method: 'POST',
    body: searchData
  });

  if (!response.ok) {
    throw new Error(response.status);
  }

  const text = await response.text();
  return text;
}

참고로 기본적으로fetch promise 대상은 잘못된 HTTP 상태에서 오류를 던지지 않습니다.반면 프로미스 대상의 ok 속성이true(HTTP 상태 코드 200-299에 대한)인지 확인하거나 status 속성의 반환 코드를 수동으로 검사한다.

요소 선택기
두 번째 부분은 비교적 짧지만, 자바스크립트 변수에서 선택기를 통합하는 데 도움을 줄 것입니다.
JQuery에서는 $(element) 함수를 사용하여 요소를 선택할 수 있습니다.한편, vanilla Javascript는 querySelector과 getElementById이다.문법을 전환하고 위에서 내가 필요로 하는 요소를 식별하면 나는 최종적으로 다음과 같은 전역 변수를 얻을 것이다.

const products = document.getElementById('show_product');
const searchResult = document.getElementById('search_result');
const searchBox = document.getElementById('sneaker_search');
const brandSelector = document.getElementById('brand');

사건 탐지기
재구성을 완성하는 마지막 단계는 본기 event listeners을 사용하는 것이다.JQuery에서 요소 선택기와 이벤트 감청기(예를 들어 $(element).on(...) 또는 $(element).change(...))를 연결합니다.이 기기의 이벤트 탐지기 인터페이스는 이벤트 유형을 매개 변수로 지정해야 하는 인터페이스와 크게 다르지 않습니다.

document.onreadystatechange = function () {
  if (document.readyState === 'complete') {
    searchBox.addEventListener('input', filterBySearch);
    brandSelector.addEventListener('change', filterByBrand);
  }
}

filterBySearch과 filterByBrand 변수는 실제적으로 매개 변수로 전달되는 함수이다.이런 상황에서 상응하는 함수는 Event 대상을 매개 변수로 수신한다.이 코드는 추가 이벤트 모니터를 통해 문서가 완전히 불러오기 전에 AJAX 함수를 조정하지 않도록 합니다.

완료된 코드

Glad you made it this far

이 세 가지 범주를 변경하고 JSDoc 스타일의 주석을 사용한 후에 저는 최종적으로 다음과 같은 코드를 얻었습니다.

const products = document.getElementById('show_product');
const searchResult = document.getElementById('search_result');
const searchBox = document.getElementById('sneaker_search');
const brandSelector = document.getElementById('brand');

document.onreadystatechange = function () {
  if (document.readyState === 'complete') {
    searchBox.addEventListener('input', filterBySearch);
    brandSelector.addEventListener('change', filterByBrand);
  }
}

/*
 * Limit Products by Brand Select
 *
 * @param {Event} brand - value from select event
 * @return {void} updates product html
 *
 */
async function filterByBrand(brand) {
  brandId = brand.target.value;
  const sneakers = await searchSneaker('brand_id', brandId);
  if (sneakers === null) return;
  products.innerHTML = sneakers;
}

/*
 * Limit Products by Search Phrase
 *
 * @param {Event} search - value from input event
 * @return {void} updates search result html
 *
 */
async function filterBySearch(search) {

  let searchValue = search.target.value;

  if (searchValue.length <= 0) {
    searchResult.style.display = 'none';
    products.style.display = 'block';
    return;
  }

  const sneakers = await searchSneaker('search_data', searchValue);

  if (sneakers !== "") {
    searchResult.innerHTML = sneakers;
    return;
  }

  searchResult.innerHTML = "<div class=\"row pl-3\"><div class=\"col-3\">No Result Found...</div></div>";
}

/*
 * Send an async request with search term
 *
 * @param {string} type - search type
 * @param {string} value - search value
 * @return {text} the formatted HTML with data
 *
 */
async function searchSneaker(type, value) {

  let searchData = new FormData();
  searchData.append(type, value);

  const response = await fetch('./load_data.php', {
    method: 'POST',
    body: searchData
  });

  if (!response.ok) {
    throw new Error(response.status);
  }

  const text = await response.text();
  return text;
}

나는 filterByBrand과 filterBySearch 함수를 설명하지 않았다. 왜냐하면 그것들은 기본적인 자바스크립트이기 때문이다.마지막으로 주의해야 할 것은 innerHTML 속성은 JQuery의 html 속성과 같다는 것이다.

마무리
나는 당신이 내가 코드를 재구성하는 과정을 읽는 과정에서 더 좋은 코드를 작성할 수 있든지, JQuery에서 본 컴퓨터의 자바스크립트로 전환하는 것이 매우 쉽다는 것을 배울 수 있기를 바랍니다.
나는 너희들이 여전히 곤혹스러워하지 않도록 참고와 진일보한 독서를 위해 링크를 남길 것이다.
언제든지 트위터에 연락주시고 즐겁게 코딩하세요!

리소스
History of JQuery
You Might Not Need JQuery
Essential Cheatsheet: Convert JQuery to Javascript
How to use fetch with async / await