자 바스 크 립 트 에서 가장 흔히 볼 수 있 는 세 가지 면접 문제 해석

머리말
본 고 는 최신 자 바스 크 립 트 라 이브 러 리,일상적인 개발 실천 이나 새로운 ES6 함 수 를 다 루 는 것 이 아니다.반면 자 바스 크 립 트 를 논의 할 때 는 면접 에서 이 세 가지 질문 이 자주 나온다.나 는 스스로 이런 질문 을 받 은 적 이 있다.나의 친 구 는 나 에 게 그들 도 물 어 본 적 이 있다 고 말 했다.
물론 자 바스 크 립 트 면접 전에 이 세 가지 문제 만 공부 해 서 는 안 됩 니 다.
시작 합 시다!우 리 는 아래 의 예시 에서 원생 자 바스 크 립 트 를 사용 할 것 입 니 다.왜냐하면 당신 의 면접 관 은 일반적으로 당신 이 제3자 라 이브 러 리(예 를 들 어 jQuery)의 도움 없 이 자 바스 크 립 트 와 DOM 을 어떻게 이해 하 는 지 보고 싶 기 때 문 입 니 다.
질문\#1:이벤트 의뢰
주:이벤트 위임,시간 대리 등 이 라 고도 합 니 다.
프로그램 을 구축 할 때,사용자 가 요소 와 상호작용 할 때 어떤 동작 을 수행 할 수 있 도록 이벤트 모니터 를 페이지 의 단추,텍스트,이미지 에 연결 해 야 할 때 가 있 습 니 다.
만약 우리 가 간단 한 업무 목록 을 예 로 들 면 면접 관 은 사용자 가 목록 항목 중 하 나 를 클릭 할 때 어떤 조작 을 해 야 한 다 는 것 을 알려 줄 수 있 습 니 다.
그들 은 당신 이 자바 스 크 립 트 로 이 기능 을 실현 하 기 를 희망 합 니 다.HTML 코드 는 다음 과 같 습 니 다.

<ul id="todo-app">
 <li class="item">Walk the dog</li>
 <li class="item">Pay bills</li>
 <li class="item">Make dinner</li>
 <li class="item">Code for one hour</li>
</ul>

다음 과 같이 요소 바 인 딩 이벤트 모니터 를 상상 할 수 있 습 니 다.

document.addEventListener('DOMContentLoaded', function() {
 
 let app = document.getElementById('todo-app');
 let items = app.getElementsByClassName('item');
 
 //               
 for (let item of items) {
 item.addEventListener('click', function() {
 alert('you clicked on item: ' + item.innerHTML);
 });
 }
 
});

이것 은 기능 을 실 현 했 지만,문 제 는 이벤트 탐지 기 를 모든 목록 항목 에 단독으로 연결 하 는 것 입 니 다.이것 은 4 개의 요소 로 큰 문제 가 없 지만,누군가가 그들의 업무 목록 에 10,000 개의 사항 을 추가 하면 어떻게 합 니까?그리고 함수 가 10,000 개의 독립 된 이벤트 모니터 를 만 들 고 모든 이벤트 모니터 를 DOM 에 연결 합 니 다.이런 코드 의 집행 효율 은 매우 낮다.
면접 에 서 는 먼저 면접 관 사용자 가 입력 할 수 있 는 사항 의 최대 수량 이 얼마 인지 물 어 보 는 것 이 좋다.만약 그것 이 영원히 10 개 를 넘 지 않 는 다 면,위의 코드 는 정상적으로 작 동 할 것 이다.그러나 사용자 가 입력 할 수 있 는 사항 의 수량 이 제한 되 지 않 는 다 면 더욱 효율 적 인 해결 방안 을 사용 해 야 한다.
만약 당신 의 응용 프로그램 이 최종 적 으로 수백 개의 사건 감청 기 를 가지 고 있 을 수 있다 면,더욱 효율 적 인 해결 방안 은 하나의 사건 탐지 기 를 실제 용기 에 연결 한 다음 에 실제 클릭 할 때 모든 정확 한 요 소 를 방문 할 수 있 는 것 입 니 다.이것 은 사건 의뢰 라 고 불 리 며 모든 요소 가 사건 처리 절 차 를 단독으로 연결 하 는 것 이 더욱 효율 적 입 니 다.
이벤트 의뢰 코드:

document.addEventListener('DOMContentLoaded', function() {
 
 let app = document.getElementById('todo-app');
 
 //              
 app.addEventListener('click', function(e) {
 if (e.target && e.target.nodeName === 'LI') {
 let item = e.target;
 alert('you clicked on item: ' + item.innerHTML);
 }
 });
 
});

문제\#2:순환 내 패키지 사용(Closures)
폐쇄 는 면접 에서 자주 나타 나 는데 면접 관 이 이 언어 에 대한 익숙 도 를 평가 하고 폐쇄 를 언제 사용 할 지 알 수 있 도록 한다.
패 킷 의 본질은 내부 함수 가 그 역할 영역 이외 의 변 수 를 방문 하 는 것 이다.패 킷 을 닫 으 면 개인 변수 나 공장 함수 만 들 기 같은 것 을 실현 할 수 있 습 니 다.폐쇄 적 인 면접 문 제 는 다음 과 같다.
함수 하 나 를 만 듭 니 다.정수 목록 을 반복 적 으로 옮 겨 다 니 며 3 초 지연 후 모든 요소 의 색인 을 인쇄 합 니 다.
내 가 이 문 제 를 본 가장 흔 한 것 은 다음 과 같은 실현 이다.

const arr = [10, 12, 15, 21];
for (var i = 0; i < arr.length; i++) {
 setTimeout(function() {
 console.log('The index of this number is: ' + i);
 }, 3000);
}

위의 코드 를 실행 하면 3 초 지연 되면 실제로 출력 은 0,1,2,3 이 아 닌 4 입 니 다.
왜 이런 상황 이 발생 했 는 지 정확하게 이해 하기 위해 자 바스 크 립 트 에서 유용 하 다 는 것 이 면접 관 의 진정한 의도 다.
그 이 유 는 setTimeout 함수 가 외부 역할 영역 에 접근 할 수 있 는 함수(즉,우리 가 자주 말 하 는 패키지)를 만 들 었 기 때 문 입 니 다.모든 순환 에는 색인 i 가 포함 되 어 있 습 니 다.
3 초 후에 이 함수 가 실행 되 고 i 의 값 을 출력 합 니 다.순환 이 끝 날 때 4 입 니 다.순환 주기 가 0,1,2,3,4 를 거 쳤 고 순환 은 결국 4 시 에 멈 추 었 기 때 문 입 니 다.
실제 몇 가지 정확 한 표기 법 으로 이 문 제 를 해결 하 는데 다음 에 두 가 지 를 열거 합 니 다.

const arr = [10, 12, 15, 21];
for (var i = 0; i < arr.length; i++) {
 //        i
 //                  
 setTimeout(function(i_local) {
 return function() {
 console.log('The index of this number is: ' + i_local);
 }
 }(i), 3000);
}

const arr = [10, 12, 15, 21];
for (let i = 0; i < arr.length; i++) {
 //   ES6 let  ，          
 //             
 //          : http://exploringjs.com/es6/ch_variables.html#sec_let-const-loop-heads
 setTimeout(function() {
 console.log('The index of this number is: ' + i);
 }, 3000);
}

문제\#3:함수 디 더 링 방지(Debouncing)
창 크기 를 조정 하거나 페이지 를 아래로 스크롤 하 는 등 짧 은 시간 에 여러 번 빠르게 시작 할 수 있 는 브 라 우 저 이벤트 가 있 습 니 다.예 를 들 어 이벤트 탐지 기 를 창 스크롤 이벤트 에 연결 하고 사용자 가 페이지 를 계속 빠르게 아래로 스크롤 하면 3 초 동안 수천 번 의 사건 이 발생 할 수 있 습 니 다.이것 은 심각 한 성능 문 제 를 야기 할 수 있다.
스크롤,창 크기 조정,키보드 가 누 른 이벤트 등 면접 에서 응용 프로그램 과 이 벤트 를 구축 하 는 것 을 토론 할 때 함수 디 더 링(Debouncing)과/또는 함수 절 류(Throttling)를 언급 하여 페이지 속도 와 성능 을 향상 시 킵 니 다.하나의 진실 한 사례 는guest post on css-tricks에서 나온다.
2011 년 트 위 터 에 서 는 트 위 터 피 드 를 굴 릴 때 매우 느 려 지고 응답 하지 않 는 다 는 질문 이 제기 됐다.John Resig이 문제 에 대하 여 박문 한 편 을 발표 하 였 다.은 스크롤 이벤트 에 함수 가 직접 연결 되 는 것 이 얼마나 나 쁜 일 인지 설명 합 니 다.
함수 디 더 링 방지(Debouncing)는 이 문 제 를 해결 하 는 방식 으로 함수 가 다시 호출 될 때 까지 걸 리 는 시간 을 제한 합 니 다.함수 떨 림 방지 방법 은 여러 함 수 를 한 함수 에 넣 고 호출 하여 일정 시간 에 한 번 씩 실행 하 는 것 이다.여기 에는 네 이 티 브 자바 스 크 립 트 를 사용 하여 이 루어 진 예 가 있 습 니 다.역할 영역,폐쇄,this 와 정시 사건 을 사 용 했 습 니 다.

// debounce           
function debounce(fn, delay) {
 //          timer
 let timer = null;
 //          timer
 return function() {
 //    'this'   'arguments'
 //            
 let context = this;
 let args = arguments;
 //        ，   timer        
 clearTimeout(timer);
 timer = setTimeout(function() {
 fn.apply(context, args);
 }, delay);
 }
}

이 함수 가 한 이벤트 에 연결 되 어 있 을 때 지정 한 시간 이 지나 야 호출 됩 니 다.
너 는 이렇게 이 함 수 를 사용 할 수 있다.

//             
function foo() {
 console.log('You are scrolling!');
}
 
//          ，     debounce         
let elem = document.getElementById('container');
elem.addEventListener('scroll', debounce(foo, 2000));

함수 절 류 는 또 다른 유사 한 함수 떨 림 방지 기술 로 한 동안 기 다 렸 다가 함 수 를 호출 하 는 방법 을 제외 하고 함수 절 류 는 고정 시간 내 에 한 번 만 호출 할 수 있 도록 제한 합 니 다.따라서 하나의 사건 이 100 밀리초 안에 10 번 발생 하면 함수 절 류 는 100 밀리초 안에 모두 호출 되 는 것 이 아니 라 2 초 에 한 번 씩 함 수 를 호출 합 니 다.
총결산
이상 은 이 글 의 전체 내용 입 니 다.본 논문 의 내용 이 여러분 의 학습 이나 업무 에 어느 정도 도움 이 되 기 를 바 랍 니 다.궁금 한 점 이 있 으 시 면 댓 글 을 남 겨 주 셔 서 저희 에 대한 지지 에 감 사 드 립 니 다.