[소스코드 분석] 2주차 예제

1. 구조 분석

 

[recentSearch.js]

1. 변수 선언

• 문서객체 상수 : 사용할 문서 객체들 읽어들이기. 제이쿼리 객체라 $~로 시작하는 상수명 사용
• isRecentSearch 변수 : 자동완성 기능 상태 변수. 불값으로 저장할거라 is~로 시작하는 변수명 사용
• recentSearchData 변수 : 최근 검색어와 날짜 저장할 배열을 변수에 저장

 

2. 함수 : 상수 저장

• createRecentItem 함수 : 최근검색어 초기화 후 리스트 추가함
• cleanInput 함수 : 검색 입력창 초기화
• deleteSelectedItem 함수 : recentSearchData.splice(매개변수, 1);
• showOlnyRecentItem 함수 : 조건에 따른 분기-recentSearchData길이가 0이면 자동저장 텍스트 변경하고 조기리턴,최근검색어만 보이게 화면 조작
• showOnlnykwdOff 함수 : 자동저장 껐을 때의 화면 조작
• showOnlnykwdNone함수 : 매개변수 있으면 callback함수 실행, 전체삭제 후의 화면 조작

 

[script.js]

3. 이벤트 걸기

• 로드 완료 시 :
  input검색창에 focus 이동
  recentSearchData값이 없으면 showOnlnykwdNone 함수 실행
• 검색창input에 click 이벤트 :
  상태에 따른 분기 : isRecentSearch가 false면 조기리턴 ㄱ
  최근검색어창 조작
• body에 click이벤트 :
  조건 : e.currentTarget == e.target (body 영역에서 search 영역 을 제외한 순수한 부분)
  최근검색어창 닫고 접펼기능 조작
• 접기펼치기 click 이벤트 : 
  검색기록창 toggle
  접펼 기능 조작
  
  
• form에 submit 이벤트 : 
  기본 이벤트 막음(다른 페이지로 리다이렉션 되는 것을 방지)
  최근 검색어 저장
  조건에 따른 분기 : 검색창에 아무것도 입력하지 않으면 alert 후 조기리턴 ㄱ
  조건에 따른 분기 : isRecentSearch가 false면 cleanInput함수 실행 후 조기리턴 ㄱ
  현재날짜 가져와서 상수에 저장
  recentSearchItem 상수 : .search, .date 프로퍼티로 recentSearchData 배열에 넣을 객체 생성
  recentSearch 상수 : recentSearchItem 참조
  recentSearchData 배열에 앞에서 부터 recentSearch 삽입
  createRecentItem 함수 호출 : 최근검색어 li 만듦
  cleanInput 함수 호출 : 검색창 초기화함
  showOlnyRecentItem 함수 호출 : 최근 검색 기록 화면만 보여줌
  최근검색창 보여주게 화면조작
  
  
• option에 click 이벤트 : 
  상수 isDelete 생성하고, confirm으로 사용자한테서 불값 받아서 저장
  사용자가 true값을 줬을 때 최근검색어 데이터 초기화, createRecentItem 함수 호출, showOnlnykwdNone 함수 호출
  
  
• search에 click 했을 때 '.bt_item._del'삭제버튼에 이벤트 : 
  상수 index 생성하고, 값은 부모list data-rank에서 받아서 저장
  deleteSelectedItem(매개변수index넘김) 함수 호출 : 개별 삭제
  createRecentItem 함수 호출: 최근 검색어(li) 다시 만들기
  recentSearchData 의 length가 0 이면 showOnlnykwdNone 함수 호출 : 전체 삭제 후의 화면 보여줌
  
  
• 자동저장 끄기 옵션에 click 이벤트 :
  상수 생성
  조건에 따른 분기 : 확인창에서 취소누르면 조기리턴
  조건에 따른 분기 : isRecentSearch 상태가 false이면 반대로 true할당, showOlnyRecentItem 함수 호출하고 조기리턴
  isRecentSearch 상태가 false이면 반대로 true할당, showOnlnykwdOff 함수 호출

 

 

---

2. 배운 점

컴포넌트 바깥 영역을 클릭했는지

// search 바깥쪽 클릭시( body 영역에서 search 영역 을 제외한 부분 )

// 최근검색어 영역 닫기

$body.on('click', function(e){

    // e.currentTarget == e.target 이 같다면

    // 현재 영역은 serach를 제외한 순수한 body 부분

    if(e.currentTarget == e.target){

      // 최근 검색창 닫기

      $autoFrame.hide();

      // 펼치기, 접기 fold 태그 삭제

      $nautocomplete.removeClass('fold');

    }

  })

 

 

검색창에 아무것도 입력하지 않았을 때

  const query = $input.val();

  // 검색창에 아무것도 입력하지 않고 검색할 경우 조기리턴

  if(!query){ ...}