[VanillaJS] 0.문서 구조

파일 구성은 

Model - HistoryModel.js

            - KeywordModel.js

        - SearchModel.js

View - FormView.js

 - View.js

- app.js

Controller - MainController.js

index.html

style.css

로 구성되어 있다.

<index.html>

style.css와 app.js를 참조하고 있다.

<HistoryModel.js>

데이터가 컬렉션 형식으로 저장되어 있다(Map이라는 자료형식)

list() - 이는 데이터를 리턴한다.

Promise는 서버와 비동기로 통신하기 위해 사용하는 것

resolve는 Promise의 상태를 이행(Fulfilled)상태로 만드는 것

결론적으로만 말하자면 서버와 데이터를 통신하기 위한 방법인거 같다.

add() - 데이터를 추가하는 기능.

trim() - 문자열에 공백을 없애는 메소드

some(function(){}) - 행렬을 반복하며 true값이 하나라도 있을 경우에 true를 리턴한다.

remove(파라미터) - 아래 참조

remove(파라미터)

조건에 맞는 값이 배열에 있을 경우에 그 값을 리턴한다

filter(function(){}) - 아이템이라는 함수에서 아이템의 키워드 값과 키워드 값이 다를 경우가 있으면 값을 리턴한다.

<KeywordModel.js>

데이터가 저장되어 있다.

list()-역시 데이터를 리턴한다.

조금 풀어 쓰면

new Promise(function(res){setTimeout(function({res(),200))

여기서 알아야 할 것은

setTimeout(function() { // Code here }, delay)

그리고

화살표 함수는 화살표 이전의 ()나 객체를 function으로 감싼 값과 같다는 것

<SearchModel.js>

데이터가 저장되어 있다.

다른 점은 export default에서 벗어났다는 점

new Promise(function(res){

setTimeout(function(){

res(data)

},200);

})

}

new Promise라는 새로운 객체에 파라미터로

res를 파라미터로 갖는(resolve,reject가 아닌)함수를 가지고

그 함수는 setTimeout을 0.2초마다 실시하는데, 

실시하는 함수는 res(data)이다.

<View.js>

1.init함수

 어떤 엘리먼트를 파라미터로 받으며

만약 파라미터가 false값을 가르킬 경우 그것은 throw로 제외시킨다.

그리고 이벤트 주체의 el값은 el이 된다.?

2. on

파라미터로 이벤트와 핸들러를 가진다.

addEventListener를 실행한다.

3. emit

evt는 새로운 customEvent라는 객체를 가지고 event와 detail, data를 파라미터로 가진다.

dispatchEvent는 이벤트를 없애는 기능을 한다.

4.hide

엘리먼트의 디스플레이 값을 none으로 만든다.

5.show

엘리먼트의 디스플레이 값을 초기화 시킨다.

<app.js>

MainController.js를 참조한다.

이벤트 리스너를 가지며 DOMcontentLoaded를 이벤트로

핸들러는 function(){MainController의 init()함수를 이용한다

<MainController.js>

문자열을 가지는 tag변수 정의

init함수 생성

init()과 tag를 콘솔에 찍음

///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////

여기까지가 문서이고,

지금 까지 호출 순서는

index.html <- app.js <- MainController