jQuery 에서 Pure Javascript 로 전환하기.

jQuery -->Vanilla JS (  pure javascript ) 전환하기 

여태까지 jQuery 를 잘 써오고 있다.

음~제목과 다른 전개이지만~ 왠지 앞으로도 계속 쓸 것 같다.

구차한 이야기는 생략하겠지만 그 만큼 이 바닥 시장이 더럽다. 

빠르게 요구함은 물론이거니와 레거시 코드의 운영도 만만치 않기 때문이다. 

머 변명일 수도 있겠지만 빠른 퇴근과 스트레스를 받지 않으려면.... 어쩔 수 없는 현실이기도 하다.

지금도 가슴으로는 '아 이거 이렇게 하면 무겁게 돌아갈 텐데.....' 라고 고민하곤 하지만

시계를 보곤 음... 아니지 걍 있던데로 하자 라고 마음을 다 잡곤 한다.

 

여튼 서두가 길었는데.. 타이틀 대로 간혹 순수 자바스크립트으로만 코딩할 때가 있는데..

그 때를 위해 나름 정리해 둘려 한다.

 

타이틀에서 vanillajs 라고 기재해 두었는데.....다들 그렇게 이야기 하길래 기재해 봤다.

vanillajs 에 대해 구글에서 검색해 보면 아래와 같다.

 

'Vanilla JS는 자바스크립트 프레임워크로 다른 프레임워크나 jQuery 보다도 압도적으로 빠르고 크로스 브라우징이 잘 되는 특성이 있다. 페이스북, 구글, 유투브 등등 유명한 해외 사이트에서 사용되었으며, 다른 플랫폼보다도 오래되었음에도 불구하고 꾸준히 업데이트 되어 온 프레임워크이다. 용량도 매우 가벼워서 압축을 하는 경우 압축을 하지 않은 경우보다 용량이 더 나가는 역설적인 무게를 자랑한다.'

 

라고 되어 있다.  이렇게 장황하게 설명할 필요없이 그냥 단 1줄로 명확히 말할 수 있다.

 

'Vanilla JS는 순수하게 javascript 만을 사용한 것을 말한다.'

 

자 그럼 아래에 대략적인 내용들은 정리해 본다.

 

 

선택자( Selector )

$("body")

--> document.body

$("html")

--> document.documentElement

$(selector), $ele.find(selector)

--> document.querySelector(selector)

$ele.parent()

--> ele.parentNode

$ele.closest('.country')

--> ele.closest('.country')

$input.closest('form')

--> input.form

$ele.prev()

--> ele.previousElementSibling

 

 $ele.next()

--> ele.nextElementSibling

 

Input 값

$input.val()

--> input.value

$input.val("hello")

--> input.value = "hello"

 

이벤트 리스너

$ele.on(eventName, handler)

--> ele.addEventListener(eventName, handler)

$elem.off(eventName)

--> elem.removeEventListener(eventName, handler)

Key event listeners:

use e.key === "+"

---> e.which === 43

 

//일부 이벤트 지연시키기

$ancestorElem.on(eventName, elemSelector, handler)

=> ancestorElem.addEventListener(eventName, function(e) {

          var elem = e.target.closest(elemSelector);

           if (elem) { // do stuff }

      } , false)

 

Key 이벤트 

 key events: (e.which === 45)   

  -->  (e.key === "Tab")

상세 내용 : https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/key/Key_Values

Key values for keyboard events - Web APIs | MDN

 

CSS  class  조작

• $elem.addClass(c) --> elem.classList.add(c)
• $elem.removeClass(c) -->  elem.classList.remove(c)
• $elem.toggleClass(c) -->  elem.classList.toggle(c)
• $elem.hasClass(c) --> elem.classList.contains(c)
• $elem.attr('class') = 'some classes'  -->   elem.className = 'some classes'

인라인 스타일

• $el.css({ top: "10px" }) -->  el.style.top = "10px"

스크롤 position

• $el.scrollTop() -->  el.scrollTop
• $el.scrollTop(10) -->  el.scrollTop = 10

Utils

• $.inArray(item, arr) > -1 -->  arr.indexOf(item) > -1
• $.extend({}, defaults, options) -->  Object.assign(defaults, options)
• $.trim(s) -->  s.trim()
• $input.val() -->  input.value

엘리먼트 생성 및 추가

$("<div>", {"class": c}).appendTo(parent);

--> 

var elem = document.createElement("div");

elem.className = c;

container.appendChild(elem);

------------------------------------------

 

$elem.text(s)

--> 

var elemText = document.createTextNode(text);

elem.appendChild(elemText);

 

$elem.append(htmlString) 

-->  elem.insertAdjacentHTML('beforeend', htmlString);

------------------------------------------

엘리먼트 속성

• $elem.attr("placeholder") --> elem.getAttribute("placeholder")
• $elem.attr("placeholder", p) --> elem.setAttribute("placeholder", p)

엘리먼트 요소 

• $el.props("disabled") --> el.disabled
• $el.props("readonly") --> el.readOnly