JavaScript 코드에서 브라우저 간의 동작 차이로 인해 브라우저 특성을 확인하고 다른 브라우저의 호환성 문제를 해결하기 위해 기능에 많은 IF 문을 포함시킵니다. 예를 들어, DOM 노드에 이벤트를 추가하는 가장 일반적인 기능 :
코드 사본은 다음과 같습니다.
함수 addEvent (유형, 요소, 재미) {
if (element.addeventListener) {
element.addeventListener (type, fun, false);
}
else if (element.attachevent) {
요소 .attachevent ( 'on' + type, fun);
}
또 다른{
요소 [ 'on' + type] = 재미;
}
}
AddEvent 함수가 호출 될 때마다 브라우저에서 지원하는 기능을 확인해야합니다. 먼저 addeventListener 메소드가 지원되는지 확인하십시오. 지원되지 않으면 첨부 배치 메소드가 지원되는지 확인하십시오. 지원되지 않으면 DOM Level 0 메소드를 사용하여 이벤트를 추가하십시오. 이 프로세스는 AddEvent 함수가 호출 될 때마다 수행해야합니다. 실제로 브라우저가 방법 중 하나를 지원하는 경우 항상 지원하며 다른 지점을 감지 할 필요가 없습니다. 다시 말해, 진술을 매번 실행할 필요가없고 코드가 더 빨리 실행될 수 있습니다.
이 솔루션은 게으른 하중이라는 기술입니다.
소위 게으른 하중은 함수의 IF 분기가 한 번만 실행 된 다음 함수가 호출되면 지원되는 분기 코드를 직접 입력한다는 것을 의미합니다. 게으른 하중을 구현하는 두 가지 방법이 있습니다. 첫 번째는 기능을 처음으로 호출 할 때 함수 자체가 2 차적으로 처리된다는 것입니다. 이 기능은 분기 조건을 충족하는 함수로 덮어 씁니다. 따라서 원래 함수에 대한 호출은 더 이상 실행 된 분기를 통과 할 필요가 없습니다. Lazy Loading을 사용하여 다음과 같은 방식으로 addevent ()를 덮어 쓸 수 있습니다.
코드 사본은 다음과 같습니다.
함수 addEvent (유형, 요소, 재미) {
if (element.addeventListener) {
addEvent = 함수 (유형, 요소, 재미) {
element.addeventListener (type, fun, false);
}
}
else if (element.attachevent) {
addEvent = 함수 (유형, 요소, 재미) {
요소 .attachevent ( 'on' + type, fun);
}
}
또 다른{
addEvent = 함수 (유형, 요소, 재미) {
요소 [ 'on' + type] = 재미;
}
}
let
}
이 게으른로드 된 addevent ()에서 if 문의 각 분기는 addevent 변수에 값을 할당하여 원래 함수를 효과적으로 덮어 씁니다. 마지막 단계는 새로운 할당 함수를 호출하는 것입니다. 다음에 addevent ()를 호출 할 때 새로 할당 된 함수는 직접 호출되므로 더 이상 IF 문을 실행할 필요가 없습니다.
게으른 하중을 구현하는 두 번째 방법은 함수를 선언 할 때 적절한 기능을 지정하는 것입니다. 이런 식으로 기능을 처음이라고 불렀을 때 성능이 손실되지 않으며 코드가로드되면 약간의 성능 만 손실됩니다. 이 아이디어에 따라 다시 작성한 addevent ()는 다음과 같습니다.
코드 사본은 다음과 같습니다.
var addevent = (function () {
if (document.addeventListener) {
반환 함수 (유형, 요소, 재미) {
element.addeventListener (type, fun, false);
}
}
else if (document.attachevent) {
반환 함수 (유형, 요소, 재미) {
요소 .attachevent ( 'on' + type, fun);
}
}
또 다른 {
반환 함수 (유형, 요소, 재미) {
요소 [ 'on' + type] = 재미;
}
}
}) ();
이 예제에 사용 된 트릭은 익명의 자체 이행 함수를 만들고 다른 분기를 사용하여 어떤 기능을 구현 해야하는지 결정하는 것입니다. 실제 논리는 동일합니다. 차이점은 함수 표현식이 사용된다는 것입니다 (함수는 VAR로 정의 됨) 및 익명 함수가 추가된다는 것입니다. 또한 각 분기는 올바른 함수를 반환하고 즉시 변수 addevent에 할당합니다.
게으른 로딩 함수의 장점은 분기가 한 번만 실행되면 실행될 때마다 분기 및 불필요한 코드가 실행되는 기능을 피하여 코드 성능이 향상된다는 것입니다. 어떤 방법이 더 적절한 지에 대해서는 귀하의 요구에 따라 다릅니다.