반응형
개발자들은 귀찮은 걸 싫어한다.
코드가 복잡해지고, 똑같은 코딩을 또 하는걸 싫어한다.
함수로 중복 코드를 제거해보자!
1. 중복 제거하기 전
if와 else 안에 컬러를 변경해주는 코드가 중복으로 작성되어 있다.
<head>
<script>
function mode_change(){
var mode = document.querySelector('#mode').value;
var bodyTag = document.querySelector('body');
var as = document.querySelectorAll('li');
if(mode === 'day'){
console.log('day click');
bodyTag.style.backgroundColor='black';
bodyTag.style.color='white';
document.querySelector('#mode').value = 'night';
var i =0 ;
while(i < as.length){
as[i].style.color='red';
i += 1;
}
} else {
console.log('night click')
bodyTag.style.backgroundColor='white';
bodyTag.style.color='black';
document.querySelector('#mode').value = 'day';
var i =0 ;
while(i < as.length){
as[i].style.color='blue';
i += 1;
}
}
}
</script>
</head>
<body>
<input type='button' id='mode' onclick='mode_change()' value='day'>
<li>hana </li>
<li>duri </li>
</body>
2. 중복 제거 후
screen_mode 함수를 추가해서 반복적으로 작성됐던 컬러를 변경해주는 코드 담아서, 중복을 제거해주었다.
mode_change 함수에서는 screen_mode 함수의 인자로 원하는 컬러를 전달해주어서 결과를 얻고 있다.
<head>
<script>
function screen_mode(cfont,cback,mode,cli){
var bodyTag = document.querySelector('body');
var as = document.querySelectorAll('li');
bodyTag.style.backgroundColor=cback;
bodyTag.style.color=cfont;
document.querySelector('#mode').value = mode;
var i =0 ;
while(i < as.length){
as[i].style.color=cli;
i += 1;
}
}
function mode_change(){
var mode = document.querySelector('#mode').value;
if(mode === 'day'){
screen_mode('white','black','night','red');
} else {
screen_mode('black','white','day','blue');
}
}
</script>
</head>
<body>
<input type='button' id='mode' onclick='mode_change()' value='day'>
<li>hana </li>
<li>duri </li>
</body>
이렇게 코드의 중복을 없애고 간결하게 하는 과정을 리팩토링이라고하고, 리팩토링을 하는 규칙이 있다.
참고 👇🏻
리팩터링 - 위키백과, 우리 모두의 백과사전
위키백과, 우리 모두의 백과사전. 리팩터링(refactoring)은 소프트웨어 공학에서 '결과의 변경 없이 코드의 구조를 재조정함'을 뜻한다. 주로 가독성을 높이고 유지보수를 편하게 한다. 버그를 없애
ko.wikipedia.org
반응형
'Today I Learned > 웹' 카테고리의 다른 글
| 부트스트랩 활용해서 todoList 만들기 (0) | 2023.06.01 |
|---|---|
| pycharm 가상서버 구동하기 (0) | 2023.05.31 |
| [Javascript] Dark Mode 만들어보기 (0) | 2020.10.13 |
| VScode로 Git & Github 로 코드 버전 관리 시작하기 (0) | 2020.09.07 |
| 웹 클라이언트, 서버, 호스트 차이 쉽게 이해하기 (0) | 2020.09.05 |