-
js 스크립트 코드의 지역화javascript ES5 정리 2020. 9. 23. 12:36
개발자는 항상 가독성이 좋은 코드를 작성해야한다.
아래의 코드를 보자
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <script> function add(){ var a=3; var b=4; btnprint.value=a+b; update = document.getElementById("update"); update.innerText = a+b; } function init(){ btnprint = document.getElementById("btn-print"); btnprint.onclick = add; } window.onload = init; </script> </head> <body> <input type="button" value="클릭" id="btn-print"/></br> <span id="update">하이요</span> </body> </html>init함수를 보면 btnprint.onclick = add; 부분이 있다.
이는 add함수를 만들고 또 대입함으로써 불필요한 작업이다.
이를 수정해보겠다.
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <script> function init(){ btnprint = document.getElementById("btn-print"); btnprint.onclick = function add(){ var a=3; var b=4; btnprint.value=a+b; update = document.getElementById("update"); update.innerText = a+b; } } window.onload = init; </script> </head> <body> <input type="button" value="클릭" id="btn-print"/></br> <span id="update">하이요</span> </body> </html>add함수를 그냥 바로 대입시켜줌으로써 두번해야하는 작업을 한번으로 줄였다.
이때 함수이름명 add를 생략해도된다 그러면 아래와 같이 이름이 없는 함수 즉 익명함수가 된다.
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <script> function init(){ btnprint = document.getElementById("btn-print"); btnprint.onclick = function (){ var a=3; var b=4; btnprint.value=a+b; update = document.getElementById("update"); update.innerText = a+b; } } window.onload = init; </script> </head> <body> <input type="button" value="클릭" id="btn-print"/></br> <span id="update">하이요</span> </body> </html>다음으로
window객체의 하위객체 onload를 사용하여 init함수를 window를 모두 읽어들인 후 실행한다.
이 또한 init함수 앞에 바로 기입할 수 있다.
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <script> window.onload = function init(){ btnprint = document.getElementById("btn-print"); btnprint.onclick = function (){ var a=3; var b=4; btnprint.value=a+b; update = document.getElementById("update"); update.innerText = a+b; } } </script> </head> <body> <input type="button" value="클릭" id="btn-print"/></br> <span id="update">하이요</span> </body> </html>처음 코드와 수정한 코드의 차이를 보면 가독성이 정말 좋아졌다는것을 볼 수 있다.
'javascript ES5 정리' 카테고리의 다른 글
js 간단한 계산기 만들기 (0) 2020.09.23 js 코드분리와 이벤트 바인딩 방법 (0) 2020.09.23 js 문서의 element 객체 이용 (0) 2020.09.23 js dom 프로그래밍 window (0) 2020.09.23 js closer (0) 2020.09.22