Javascript, JQuery 코드 비교.

17951 단어 자바스크립트jQuery
평상시는 JQuery를 사용하고 있습니다만, 프로젝트에 따라서는 원소의 Javascript로 써 주도록 지정이 있거나 합니다. 저도 과거 이런 경험이 있어 JQuery라면 더 간단하게・・・

그래서 이번에는 어떤 기능을 소재로 코드 비교를 해갑니다. 부디 참고로 해 주세요.

덧붙여서 JQuery는 현대적인 프레임 워크에 점점 더 많은 점유율을 빼앗기고 있기 때문에 이제 react와 vu 당 손을 붙이고 싶습니다.

자바스크립트란?



웹 응용 프로그램에 동적 콘텐츠를 포함하는 프로그래밍 언어입니다.
웹 사이트를 예로 들면, 슬라이더나 스크롤시의 페이드 인 등 움직임이 있는 컨텐츠를 작성할 수 있습니다.

JQuery란?



javascript 라이브러리입니다.
간단하게 말해 버리면, JQuery측이 준비하고 있는 독자적인 코드를 사용하는 것으로 javascript를 용이하게 사용할 수가 있습니다.

잘 착각하는 사람이 있지만 프레임 워크가 아닙니다. 프레임워크는 앱의 반 완성품이므로 이 시점에서 JQuery의 개념과는 차이가 있습니다.

코드 비교



그런데 이번 본제입니다. 실제로 자바 스크립트와 JQuery로 얼마나 많은 코드가 변경됩니까? 이번에는 모달 윈도우라는 기능을 만들어 보았으므로 비교해 보겠습니다.

JQuery의 모달은 여기 을 참고로 했습니다.



운동적으로는 이런 느낌이 듭니다. 페이지 전환 없이 팝업과 같은 다른 화면을 표시할 수 있습니다.
그럼 코드 기재해 갑니다.

html
<body>
    <div class="content">
      <a class="js-modal-open" href="" data-target="modal01">クリックでモーダル1を表示</a><br>
      <a class="js-modal-open" href="" data-target="modal02">クリックでモーダル2を表示</a>
  </div>
  <div id="modal01" class="modal js-modal">
      <div class="modal__bg js-modal-close"></div>
      <div class="modal__content">
          <p>1つ目モーダルウィンドウです。ここにモーダルウィンドウで表示したいコンテンツを入れます。モーダルウィンドウを閉じる場合は下の「閉じる」をクリックするか、背景の黒い部分をクリックしても閉じることができます。</p>
          <a class="js-modal-close" href="#">閉じる</a>
      </div><!--modal__inner-->
  </div><!--modal-->
  <div id="modal02" class="modal js-modal">
      <div class="modal__bg js-modal-close"></div>
      <div class="modal__content">
          <p>2つ目モーダルウィンドウです。ここにモーダルウィンドウで表示したいコンテンツを入れます。モーダルウィンドウを閉じる場合は下の「閉じる」をクリックするか、背景の黒い部分をクリックしても閉じることができます。</p>
          <a class="js-modal-close" href="#">閉じる</a>
      </div><!--modal__inner-->
  </div><!--modal-->
</body>
</html>

css
/* modal window */
.content{
  margin: 0 auto;
  padding: 40px;
}
.modal{
  display: none;
  height: 100vh;
  position: fixed;
  top: 0;
  width: 100%;
}
.modal.open{
  display: block;
}
.modal__bg{
  background: rgba(0,0,0,0.8);
  height: 100vh;
  position: absolute;
  width: 100%;
}
.modal__content{
  background: #fff;
  left: 50%;
  padding: 40px;
  position: absolute;
  top: 50%;
  transform: translate(-50%,-50%);
  width: 60%;
}

JQuery
$(function(){
  $('.js-modal-open').each(function(){
    $(this).click(function(){
      var target = $(this).data('target');
        $("#" + target).addClass("open");
        return false;
    });
  });
  $('.js-modal-close').click(function(){
    $('.js-modal').removeClass("open");
      return false;
  });
});

JQuery라고 10행 조금으로 실장 할 수 있었습니다.
자바 스크립트라면 어떨까요?

Javascript의 경우.



javascript
window.onload = function () {
  var $openModal = document.getElementsByClassName("js-modal-open");
  let $closeModal = document.getElementsByClassName("js-modal-close");
  for( var $i = 0; $i < $openModal.length; $i++ ) {
    $openModal[$i].onclick = function (event) {
      event.preventDefault();
      var $target = this.dataset.target;
      var $modal = document.getElementById($target);
      $modal.classList.add('open');
    }
  }
  for( var $i = 0; $i < $closeModal.length; $i++ ) {
    $closeModal[$i].onclick = function (event) {
      event.preventDefault();
      this.closest(".js-modal").classList.remove('open');
    }
  }
}

기능과 움직임은 동일합니다.
어때? 당신이라면 어느 것을 사용하여 개발을 진행하고 싶습니까? 대부분의 사람들은 JQuery를 선택할 것입니다. 스피드나 장래성을 전망해 javascript를 선택하는 사람도 있을지도 모릅니다만, 코드량이 역시 결정수가 될까라고 생각합니다.

개인적인 의견이지만 JQuery의 매력은 선택기 지정 방법입니까?
Javascript라면 getElementByXXX 라고 쓰는 곳을 JQuery에서는 $("xxx")로 끝낼 수 있습니다. 이번의 경우라고 하면 each文 를 사용할 수 있는 것도 매력이겠지요.

마지막으로



이번은 비교만으로 내용이 매우 얇아져 버렸습니다만, 향후는 무엇인가 알기의 기능의 실장등 소개할 수 있으면 좋겠습니다.

보충



ㅎㅎ씨로부터 지적을 받고, 이하에서도 실장할 수 있는 것을 알았습니다. 정말 고마워요.



javascript 코드 지적 수정 후 (querySelector, forEach 사용)
window.onload = function () {
  var $openModal = document.querySelectorAll(".js-modal-open");
  var $closeModal = document.querySelectorAll(".js-modal-close");
  $openModal.forEach(function(openItem){
    openItem.onclick = function (event) {
      event.preventDefault();
      var $target = this.dataset.target;
      var $modal = document.getElementById($target);
      $modal.classList.add('open');
    }
  });
  $closeModal.forEach(function(closeItem){
    closeItem.onclick = function (event) {
      event.preventDefault();
      this.closest(".js-modal").classList.remove('open');
    }
  });
}

확실히 이쪽이 깨끗하네요. 상당히 옛날에 JS를 조금 배워 JQuery로 전환했기 때문에 아직 모르는 것 많이 있을 것 같네요😅 지적 받은 분에게는 정말로 감사합니다.
Microsoft Graph PowerShell을 사용하여 Azure AD Enterprise Applications 권한 관리
서버 측 다트

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
best100-homepage