jQuery 에서 Pure Javascript 로 전환하기.

출처.

 

uxicode.tistory.com/entry/jQuery-%EC%97%90%EC%84%9C-Pure-Javascript-%EB%A1%9C-%EC%A0%84%ED%99%98%ED%95%98%EA%B8%B0-1

jQuery 에서 Pure Javascript 로 전환하기.

 

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

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

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

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

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

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

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

 

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

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

 

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

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

 

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

 

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

 

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

 

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

선택자

$("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") - docs

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

출처: https://uxicode.tistory.com/entry/jQuery-에서-Pure-Javascript-로-전환하기-1 [세줄코딩]