유지 관리 가능한 JavaScript — JavaScript/HTML 결합

https://www.amazon.com/John-Au-Yeung/e/B08FT5NT62에서 Amazon에서 내 책을 확인하십시오.

지금 http://jauyeung.net/subscribe/에서 내 이메일 목록을 구독하십시오.

코드를 계속 사용하려면 유지 관리 가능한 JavaScript 코드를 만드는 것이 중요합니다.

이 기사에서는 JavaScript와 HTML 간의 느슨한 결합을 살펴보고 유지 관리 가능한 JavaScript 코드를 만드는 기본 사항을 살펴보겠습니다.

HTML에서 자바스크립트 유지

JavaScript를 HTML 코드에서 제외해야 합니다.

HTML 파일에 있는 JavaScript 코드를 디버그하는 것은 어렵습니다.

예를 들어 다음이 있는 경우:

<button onclick="doSomething()">click me</button>

그런 다음 버튼을 클릭할 때 doSomething 함수를 호출합니다.
doSomething 외부 파일이나 스크립트 태그에 있을 수 있습니다.

기능을 사용할 수 있기 전에 버튼을 클릭하면 JavaScript 오류가 발생하는 문제가 발생할 수 있습니다.

결과 오류가 나타나 버튼이 아무 작업도 수행하지 않는 것처럼 보일 수 있습니다.

이름을 변경하면 HTML 파일에서도 이름을 찾아야 하므로 유지 관리가 더 어렵습니다.
onclick 속성에서 코드를 변경할 수도 있습니다.

HTML에 JavaScript 코드를 포함하면 코드를 더 쉽게 변경할 수 있습니다.

대부분의 JavaScript 코드는 외부 파일에 있어야 하며 스크립트 태그가 있는 페이지에 포함되어야 합니다.
on 속성은 이벤트 핸들러를 HTML에 연결하는 데 사용하면 안 됩니다.

대신 JavaScript로 요소를 가져오고 리스너를 연결하여 이벤트 리스너를 요소에 연결해야 합니다.

function onClick() {
  // ...
}

const btn = document.querySelector("button");
btn.addEventListener("click", onClick, false);

onClick 함수를 버튼의 클릭 핸들러로 설정했습니다.

그 이점은 onClick가 이벤트 핸들러를 연결하는 코드와 동일한 파일에 정의된다는 것입니다.

함수를 변경해야 하는 경우 JavaScript 파일을 변경해야 합니다.

버튼을 클릭했을 때 다른 작업을 수행해야 하는 경우 파일의 코드를 변경하기만 하면 됩니다.

IE8 및 이전 버전에는 addEventListener 메서드가 없습니다.

대신 attachEvent 메서드를 사용해야 합니다.

jQuery를 사용하여 다음과 같이 작성할 수 있습니다.

$("button").on("click", onClick);

인라인 코드가 있는 스크립트 요소를 사용하여 HTML에 JavaScript를 포함할 수도 있습니다.

그러나 이것은 HTML에 JavaScript 코드를 유지하고 코드를 더 길게 만들기 때문에 좋지 않습니다.

예를 들어 다음과 같은 코드를 작성해서는 안 됩니다.

<script>
  doSomething();

</script>

모든 JavaScript를 외부 파일에 유지하고 인라인 JavaScript를 HTML에서 유지하는 것이 가장 좋습니다.

이렇게 하면 코드를 더 쉽게 디버그할 수 있습니다.

스크립트 오류가 발생하면 JavaScript 파일에 오류가 있음을 알 수 있습니다.

JavaScript 코드가 HTML 파일에 있으면 두 종류의 파일을 모두 검색해야 합니다.

결론

더 쉽게 디버깅할 수 있도록 JavaScript 코드를 HTML 코드에서 제외해야 합니다.