[Vanilla JS] Vanilla JS 란?

새로운 프레임워크 또는 라이브러리가 아닌 순수한 Javascript 이다

 

바닐라js 공식사이트이다.

vanilla-js.com/

Vanilla JS

HTML 에 추가하면 된다.

<script src="path/to/vanilla.js"></script>

 

ID, 태그로 DOM 검색 했을 때 시간이다.

 

바닐라와 제이쿼리 차이 2가지 예시이다.

 

1. fadeOut

 

- Vanilla JS

var s = document.getElementById('thing').style;
s.opacity = 1;
(function fade(){(s.opacity-=.1)<0?s.display="none":setTimeout(fade,40)})();

- jQuery

<script src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script>
	$('#thing').fadeOut();
</script>

 

2. AJAX 호출

 

- Vanilla JS

var r = new XMLHttpRequest();
r.open("POST", "path/to/api", true);
r.onreadystatechange = function () {
  if (r.readyState != 4 || r.status != 200) return;
  alert("Success: " + r.responseText);
};
r.send("banana=yellow");

 

- jQuery

<script src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script>
  $.ajax({
    type: 'POST',
    url: "path/to/api",
    data: "banana=yellow",
    success: function (data) {
      alert("Success: " + data);
    },
  });
</script>