clean JS

JS를 깔끔하기 적는 법 + 수업 들으면서 내가 몰랐던 부분 공부 정리.

1. html에 id를 적으면 적혀있는 id의 이름으로 js에서 바로 호출 가능 ex) html에서 id="hi"로 이름을 지었다면 js에서 console.log(hi)를 호출하면 id부분이 나옴. const hi = window.document.getElementById('hi')를 적어주는 이유는 자동완성을 쓸 수 있기 때문.

2. 여러 기능을 할 때 사용할 때 data-set을 이용하면 되게 편리함. 

data-set 사용 시 이렇게는 무조건 적어주고 시작하자.

const functions = { 
	//이 부분에는 기능을 구현하는 부분을 적어주면 됨. 메소드처럼 사용하면 되는 듯? 
	//handleEditStart: (element) => {
    	profileAddDialog.classList.add('edit-mode');
    }
    handleEditStart: (params) => {
    	profileAddDialog.classList.add('edit-mode');
        if(profileAddDialog.classList.contains('edit-mode')) {
        params.event.preventDefalut(); //이렇게 해서 preventDefalut를 쓸 수 있게 하기 위해서 밑에 element와 event를 나눈 거임.
    }
};

//여기서 data-func은 data-set의 이름을 html에서 지어준걸로 data-func으로 해도 되고 아니면 data-set 으로 그냥 지어줘도 됨.
//data 뒤에 들어가는 이름은 자유롭게 지정하면 되는 듯.
window.document.body.querySelectorAll('[data-func]').forEach(x => {
	x.addEventListner('click', e => {
    	const dataFuncValue = x.dataset.func; //앞에는 이름을 지어주는 거고 뒤에 func부분은 data뒤에 나오는 이름임. ex)func => data-(func)괄호로 되어 있는 부분
        if(typeof (dataFuncValue) === 'string' && typeof(functions[dataFuncValue]) === 'function') {
        	//여기에다가 이제 각각의 기능을 적어주면 됨. 
        	//functions[dataFuncValue](e); //이렇게 하면 functions에 지정해놓은 함수를 호출 가능하다.
           	//하지만 element 즉, 받는 인자의 기능과 event의 기능을 같이 사용하고 싶으면 밑에 처럼 바꿔 주고 위에 element이름 즉, 매개변수를 params로 바꿔주면 됨. 
            functions[dataFuncValue]({
            	element: x,
                event: e
            });
        }
   });
});