인프런에서 견고한 JS 소프트웨어 만들기를 수강하며 적은 강의노트입니다.
보다 자세한 내용은 강의를 통해 확인하실 수 있습니다.
모듈 이용해서 화면 만들기
화면(index.html)에 붙여보자
xxxxxxxxxx<html> <body> <span id="counter-display"></span> <button id="btn-increase">Increase</button> <script src="ClickCounter.js"></script> <script src="ClickCountView.js"></script> <script> (() => { const clickCounter = App.ClickCounter() const updateEl = document.querySelector('#counter-display') const triggerEl = document.querySelector('#btn-increase') const view = App.ClickCountView(clickCounter, {updateEl, triggerEl}) view.updateView() })() </script> </body></html>
개선된 점
기존 index.html에 비해 <button>마크업 내부에서 복잡한 일을 하지 않음
전역번수 var counter = 0을 제거함
재사용할 수 없던 함수들을 재사용할 수 있도록 수정
'FrontEnd' 카테고리의 다른 글
| 견고한 JS 소프트웨어 만들기 강의노트5 (0) | 2019.09.29 |
|---|---|
| 견고한 JS 소프트웨어 만들기 강의노트4 (0) | 2019.09.29 |
| 견고한 JS 소프트웨어 만들기 강의노트2 (0) | 2019.09.15 |
| 견고한 JS 소프트웨어 만들기 강의노트1 (0) | 2019.09.15 |
| 자바스크립트 Blob 이란? (1) | 2019.08.13 |