WEB2 - JavaScript 18 (리팩토링 중복의 제거)

728x90

리팩토링 중복의 제거

리팩토링(Refactoring)

코딩을 하고 나면 좀 비효율적인 면들이 생기기 마련이다. 그러면 동작하는 것은 그대로 두고 코드 자체를 아주 효율적으로 만들어서 그 코드의 가독성을 높이고 유지보수를 하기 편리하게 만들고, 중복된 코드를 제거하는, 다시 개선하는 작업

리팩토링의 사례
- 3.html 예제에서 비효율적인 것들을 제거해보자.

먼저 야간모드 기능을 스크롤을 내려 웹페이지의 아래쪽에서도 사용하게 만들고 싶다는 가정.
코드 작성한 것을 동일하게 아래에 붙여 넣기 한다면 제대로 작동하지 않는다.
(开启 버튼을 누르면 야간모드는 작동하나 웹페이지 상단 원래의 버튼만 关闭 로 바뀌고 아래 것은 바뀌지 않는다.)
붙여넣기한 코드의 id값을 구분해줘야 한다.

<!DOCTYPE html>
<html>
  <head>
    <title>WEB1 - JavaScript</title>
    <meta charset="utf-8">
    <link rel="stylesheet" href="style.css">
  </head>
  <body>
    <h1><a href="index.html" title="到百科">WEB网络</a></h1>
    <input id="开启——关闭" type="button" value="开启" onclick="
      if(document.querySelector('#开启——关闭').value === '开启'){
        document.querySelector('body').style.backgroundColor='black';
        document.querySelector('body').style.color='white';
        document.querySelector('#开启——关闭').value = '关闭';
      } else {
        document.querySelector('body').style.backgroundColor='white';
        document.querySelector('body').style.color='black';
        document.querySelector('#开启——关闭').value = '开启';
      }
    ">
    <div id="grid">
      <ol>
        <h3>计算机语言-常见语言</h3>
        <li><a href="1.html" title="到HTML意义">HTML超文本标记语言</a></li>
        <li><a href="2.html" title="到CSS意义">CSS层叠样式表</a></li>
        <li><a href="3.html" title="到JavaScript意义">JavaScript</a></li>
      </ol>
      <div id="文章">
        <h3>-JavaScript</h3>
          <p style="margin-top:40px;">
              <strong><u>JavaScript</u></strong>即全球广域网，也称为万维网，它是一种基于超文本和HTTP的、全球性的、动态交互的、跨平台的分布式图形信息系统。是建立在Internet上的一种网络服务，为浏览者在Internet上查找和浏览信息提供了图形化的、易于访问的直观界面，其中的文档及超级链接将Internet上的信息节点组织成一个互为关联的网状结构。
          </p>
          <p>
            <a href="https://baike.baidu.com/item/JavaScript" target="_blank" title="到百科的JavaScript意义">更多>></a>
          </p>
          <img src="coding.jpg" width="50%">
        </div>
      </div>

      <input id="开启——关闭2" type="button" value="开启" onclick="
        if(document.querySelector('#开启——关闭2').value === '开启'){
          document.querySelector('body').style.backgroundColor='black';
          document.querySelector('body').style.color='white';
          document.querySelector('#开启——关闭2').value = '关闭';
        } else {
          document.querySelector('body').style.backgroundColor='white';
          document.querySelector('body').style.color='black';
          document.querySelector('#开启——关闭2').value = '开启';
        }
      ">
  </body>
</html>

그런데 만약 이러한 버튼을 1억 개가 있어 다 바꿔야 한다면?
여기서 onclick 과 같은 event 안에서 실행되는 코드들은 이 코드가 속해있는 태그,

      if(document.querySelector('#开启——关闭2').value === '开启'){
        document.querySelector('body').style.backgroundColor='black';
        document.querySelector('body').style.color='white';
        document.querySelector('#开启——关闭2').value = '关闭';
      } else {
        document.querySelector('body').style.backgroundColor='white';
        document.querySelector('body').style.color='black';
        document.querySelector('#开启——关闭2').value = '开启';
      }

즉 index 태그에서는 그 태그를 가리키도록 하는 특수한 키워드가 있다. 바로 this 이다.
if문에 들어가 있는 코드는 사실상 자기 자신을 가리키고 있다. onclick event 가 속해 있는 태그 자신이다.

document.querySelector('#开启——关闭') 를 this 로 바꾸기.

    <input id="开启——关闭2" type="button" value="开启" onclick="
      if(this.value === '开启'){
        document.querySelector('body').style.backgroundColor='black';
        document.querySelector('body').style.color='white';
        this.value = '关闭';
      } else {
        document.querySelector('body').style.backgroundColor='white';
        document.querySelector('body').style.color='black';
        this.value = '开启';
      }
    ">

그리고 this 로 바꾸면 더 이상 input 에 있는 index 태그를 참조하는 것은 this 로 하면 되기 때문에 더 이상 사용하지 않는다.

    <input type="button" value="开启" onclick="
      if(this.value === '开启'){
        document.querySelector('body').style.backgroundColor='black';
        document.querySelector('body').style.color='white';
        this.value = '关闭';
      } else {
        document.querySelector('body').style.backgroundColor='white';
        document.querySelector('body').style.color='black';
        this.value = '开启';
      }
    ">

이렇게 정리하면 다시 복사해서 여러 개의 버튼을 만들어도 동일하게 기능한다.
(위의 코드도 동일하게 바꿔준다. 키워드 this 사용)

다음으로 document.querySelector('body') 가 중복해서 등장한다.
(코딩을 잘하려면 중복을 끝까지 따라가서 제거해야 한다.)
```
var target = document.querySelector('body');
```
는 target 은 이제 body 태그가 되는 것이다.
target 변수를 쓰고 있는 모든 코드가 한 번에 바뀌는 폭발적인 효과를 갖게 됐다.
이제 아래의 코드에서 document.querySelector('body') 를 target 으로 바꿔주자.
```
	<input type="button" value="开启" onclick=" 
	  var target = document.querySelector('body'); 
	  if(this.value === '开启'){ 
		target.style.backgroundColor='black'; 
		target.style.color='white'; this.value = '关闭'; 
	  } else { 
		target.style.backgroundColor='white'; 
		target.style.color='black'; 
		this.value = '开启'; 
	  } 
	">
```
이렇게 변수를 활용하면 코딩을 하는데 큰 도움을 받을 수 있다.

예제 마무리

<!DOCTYPE html>
<html>
  <head>
    <title>WEB1 - JavaScript</title>
    <meta charset="utf-8">
    <link rel="stylesheet" href="style.css">
  </head>
  <body>
    <h1><a href="index.html" title="到百科">WEB网络</a></h1>
    <input type="button" value="开启" onclick="
      var target = document.querySelector('body');
      if(this.value === '开启'){
        target.style.backgroundColor='black';
        target.style.color='white';
        this.value = '关闭';
      } else {
        target.style.backgroundColor='white';
        target.style.color='black';
        this.value = '开启';
      }
    ">
    <div id="grid">
      <ol>
        <h3>计算机语言-常见语言</h3>
        <li><a href="1.html" title="到HTML意义">HTML超文本标记语言</a></li>
        <li><a href="2.html" title="到CSS意义">CSS层叠样式表</a></li>
        <li><a href="3.html" title="到JavaScript意义">JavaScript</a></li>
      </ol>
      <div id="文章">
        <h3>-JavaScript</h3>
          <p style="margin-top:40px;">
              <strong><u>JavaScript</u></strong>即全球广域网，也称为万维网，它是一种基于超文本和HTTP的、全球性的、动态交互的、跨平台的分布式图形信息系统。是建立在Internet上的一种网络服务，为浏览者在Internet上查找和浏览信息提供了图形化的、易于访问的直观界面，其中的文档及超级链接将Internet上的信息节点组织成一个互为关联的网状结构。
          </p>
          <p>
            <a href="https://baike.baidu.com/item/JavaScript" target="_blank" title="到百科的JavaScript意义">更多>></a>
          </p>
          <img src="coding.jpg" width="50%">
        </div>
      </div>
      <input type="button" value="开启" onclick="
        var target = document.querySelector('body');
        if(this.value === '开启'){
          target.style.backgroundColor='black';
          target.style.color='white';
          this.value = '关闭';
        } else {
          target.style.backgroundColor='white';
          target.style.color='black';
          this.value = '开启';
        }
      ">
  </body>
</html>

저작자표시

'youtube.com|user|egoing2 > WEB2 - JavaScript' 카테고리의 다른 글

WEB2 - JavaScript 23 (배열과 반복문의 활용) (5)	2021.09.19
WEB2 - JavaScript 19 to 22 (반복문, 배열) (8)	2021.09.17
WEB2 - JavaScript 14 to 17 (조건문) (2)	2021.09.15
WEB2 - JavaScript 8 to 13 (4)	2021.09.14
WEB2 - JavaScript 6 to 7 (0)	2021.09.14

'youtube.com|user|egoing2 > WEB2 - JavaScript' 카테고리의 다른 글

티스토리툴바