2021. 3. 21. 15:55ㆍFront-end/Javascript
안녕하세요, 이번 시간에는 여태 작성했던 코드를 함수화 해보겠습니다.
<body>
<h1><a href="index.html">WEB</a></h1>
<input id="night_day" type="button" value="night" onclick="
nightDayHandler(this);
">
<ol>
<li><a onclick="
fetch('html').then(function(response){
response.text().then(function(text){
document.querySelector('article').innerHTML = text;
})
})
">HTML</a></li>
<li><a onclick="
fetch('css').then(function(response){
response.text().then(function(text){
document.querySelector('article').innerHTML = text;
})
})
">CSS</a></li>
<li><a onclick="
fetch('javascript').then(function(response){
response.text().then(function(text){
document.querySelector('article').innerHTML = text;
})
})
">JavaScript</a></li>
</ol>
<article></article>
</body>
지난시간 까지 작성했던 코드를 보면 중복이 발생하고 있습니다.
소프트웨어를 만드는 과정에서 언제나 고심해야할 부분은 '어떻게 하면 중복을 제거할 수 있을까?' 입니다.
여기 있는 이 코드 중에서 중복인 부분이 있고 중복이 아닌 부분이 있습니다.
fetch('html').then(function(response){
response.text().then(function(text){
document.querySelector('article').innerHTML = text;
})
})
저 'html' 이부분은 중복이 아닌 부분이고, 나머지는 중복인 부분 입니다.
그러면 어떻게 하면 중복을 제거할 수 있을까요? 함수를 이용하면 되겠죠.
index.html에서 body가 끝나기 직전에 script 부분을 추가하고, 여기에 함수를 작성하겠습니다.
함수의 목표는 코드를 재활용하는 것입니다.
<script>
function fetchPage(name){
fetch(name).then(function(response){
response.text().then(function(text){
document.querySelector('article').innerHTML = text;
})
})
};
</script>다음과 같이 작성하면 됩니다. 우리는 fetch('html') 에서 괄호안에 들어가는 부분만 바뀌면 되기 때문에 그 부분을 name이라는 인자로 받도록 위와 같이 함수를 작성하면 됩니다. 이렇게 함수를 작성했다면 우리는 아까 onclick 부분을 아름답게 만들 수 있습니다.
<ol>
<li><a onclick="fetchPage('html')">HTML</a></li>
<li><a onclick="fetchPage('css')">CSS</a></li>
<li><a onclick="fetchPage('javascript')">JavaScript</a></li>
</ol>이렇게 수정하고 실행해보면 이전과 똑같이 작동합니다.
이전보다 훨씬 더 코드가 가독성이 높아졌고, 유지보수하기가 쉬워졌고 코드의 양이 줄어들었습니다.
'Front-end > Javascript' 카테고리의 다른 글
| 클래스(Class) (0) | 2021.03.23 |
|---|---|
| 프로토타입(Prototype) (0) | 2021.03.23 |
| [Ajax] Ajax의 적용 (0) | 2021.03.21 |
| [Ajax] fetch API - response 객체 (0) | 2021.03.21 |
| [Ajax] fetch API - 요청과 응답 (0) | 2021.03.21 |