WEB2 - JavaScript 34 (파일로 쪼개서 정리 정돈하기)

WEB2 - JavaScript 34 (파일로 쪼개서 정리 정돈하기)

파일로 쪼개서 정리 정돈하기

함수와 객체보다 더 큰 정리 정돈의 도구.

서로 연관된 코드들을 파일로 묶어서 그룹핑하는 것.

3.html 에서 만들었던 주간·야간모드 버튼을 1.html 과 2.html , index.html 에도 넣자.

먼저 태그를 각각 넣고 실행해보면 버튼은 생겼지만 작동하지 않는 것을 볼 수 있다.

왜 작동하지 않을까? JS 를 가지고 오지 않았기 때문이다.

var Links = { setColor:function(color){ var alist = document.querySelectorAll('a'); var i = 0; while(i < alist.length){ alist[i].style.color = color; i = i + 1; } } } var Body = { setColor:function(color){ document.querySelector('body').style.color=color; }, setBackgroundColor:function(color){ document.querySelector('body').style.backgroundColor=color; } } function nightDayHandler(self){ var target = document.querySelector('body'); if(self.value === '开启'){ Body.setBackgroundColor('black'); Body.setColor('white'); self.value = '关闭'; Links.setColor('mediumspringgreen'); } else { Body.setBackgroundColor('white'); Body.setColor('black'); self.value = '开启'; Links.setColor('limegreen'); } }

만약 가지고 있는 웹페이지가 1억 개라면?

배포하는 것도 어렵겠지만 지금까지 코딩했던 야간모드에서 링크의 색깔을 'mediumspringgreen' 을 'orange' 로 바꾸고 싶다면?

이러한 상황에서 파일로 쪼개는 방법을 사용하면 된다.

colors.js 파일을 만들고

그리고 기존 태그 내용을 지우고