[simpleExample] JS Tab Menu Prototype

 

 

 

2018/12/31 - [JavaScript] - [saimpleExample] JS Tab Menu

 

 

 

 

이전의 탭메뉴는 정상적으로 동작은 하는데 추가적으로 다른 탭메뉴를 만들려고하면 중복되는 코드가 발생하고 코드라인도 길어지게된다.

 

기존의 탭메뉴를 그대로 복사해 내부의 class 명을 모두 변경해줘야하기때문에 유지보수도 어렵고 가독성도 떨어지는 스크립트가 되어버린다.

 

그래서 기존의 탭메뉴를 활용하여 재활용성이 높은 클래스형태로 만들려고한다, 그중에서도 메서드를 공유하게되는 Prototype 방식을 활용한다.

 

JavaScript 에서는 별도의 클래스 타입이 없기때문에(아직은..) 함수형태로 클래스를 만든다.

이때 함수명은 첫글자부터 대문자를 사용하여 클래스로 사용되는 함수임을 명시해준다.

 

클래스로지정한 함수 내분에는 변수들의 초깃값을 설정해주고 나머지 기존에 함수로 작성했던 기능 부분들을 모두 클래스함수.prototype.메소드함수명 = function(){} 을 사용하여 상속을 구현해준다.

 

init 은 두개의 인자를 받아(탭메뉴인자, 컨텐츠 인자) 전달해주게된다.

 

JS

 

function TabMenu() {

this.tabMenu = null;

this.menuItems = null;

this.selectContents = null;

this.content = null;

}

TabMenu.prototype.init = function(selectorTab, selectorCont) {

this.tabMenu = document.querySelector(selectorTab);

this.menuItems = this.tabMenu.querySelectorAll('li');

this.selectContents = document.querySelector(selectorCont);

this.content = this.selectContents.querySelectorAll("p");

this.initEvent();

}

TabMenu.prototype.initEvent = function() {

var objThis = this;

 

[...this.menuItems].map(item =>

item.addEventListener("click", function(e) {

e.stopPropagation();

objThis.setSelectItem(e);

}));

}

TabMenu.prototype.setSelectItem = function(e) {

[...this.menuItems].forEach(item =>

item.classList.value === "select" ?

item.classList.remove("select") :

e.target.classList.add("select"));

 

if(e.target.classList.value !== "select"){

e.target.classList.add("select");

};

this.tabContent(e);

}

TabMenu.prototype.tabContent = function(e) {

let menuIndex = [...this.menuItems].indexOf(e.target);

[...this.content].map(cont =>

[...this.content].indexOf(cont) === menuIndex ?

cont.classList.add("visible") :

cont.classList.remove("visible"))

}

var tab1 = new TabMenu();

var tab2 = new TabMenu();

tab1.init(".js-tab", ".js-contents");

tab2.init(".js-tab2", ".js-contents2");

 

위와같이 작성하게되면 나중에는 var 변수명 = new TabMenu(); 를 통해 얼마든지 여러개의 탭 메뉴에 적용이 가능하다.

 

code-reading 블로그에 방문해 주셔서 환영합니다.
댓글은 모두 환영하니 많이 달아주세요.