jQuery의 초기화, 재활용

기존 웹사이트에 회사 선임들이 jQuery를 많이 사용하셨다.

나는 jQuery를 이번에 처음 접해보았고 vanilla javascript에서 jQuery라이브러리 함수를 필요한 시점에 호출할 필요가 있었다.

사실 직접 만들어도 상관없지만 jQuery의 flexslider를 사용했는데 이것을 직접 만드는 것 보다 어차피 웹에서 jQuery를 아에 안쓰는 것도 아니고 나도 사용할 줄 알아야 된다고 생각했다.

서론이 길었지만

jQuery를 재활용 하려면 연결된 메모리 주소를 재활용 시점에 새로 연결해주어야 한다.

무슨말이냐면 이미 HTML에 있는 DOM을 가져와서 사용하는 것이 아니라
javascript로 필요한 시점에 DOM을 만들어서 동적으로 만든 DOM과 jQuery를 연결해줘야 초기화가 가능하다.

function setFlexSlider(Element) {
  $(Element).flexslider({
    animation: 'slide',
    slideshowSpeed: 3000,
    animationSpeed: 1000,
    touch: true,
    slideshow: true,
    start: () => {},
  });
}
const awardSlider = document.createElement('div');
setFlexSlider(awardSlider);