javascript 함수의 지연 로딩 함수 예제 코드에 대한 자세한 설명

지연 로딩 기능

브라우저 간의 동작 차이로 인해 브라우저 특성을 확인하고 다양한 브라우저의 호환성 문제를 해결하기 위해 함수에 많은 if 문을 포함하는 경우가 많습니다. 예를 들어 DOM 노드에 이벤트를 추가하는 가장 일반적인 함수

function addEvent(type, element, fun) {
  if (element.addEventListener) {
    element.addEventListener(type, fun, false);
  }
  else if(element.attachEvent){
    element.attachEvent('on' + type, fun);
  }
  else{
    element['on' + type] = fun;
  }
}

addEvent 함수가 호출될 때마다 브라우저에서 지원하는 기능을 확인해야 합니다. 먼저 addEventListener 메서드가 지원되는지 확인하세요. 지원되지 않는 경우, AttachEvent 메소드가 지원되는지 확인하십시오. 아직 지원되지 않는 경우 dom0 레벨 메소드를 사용하여 이벤트를 추가하십시오. addEvent 함수가 호출될 때마다 이 프로세스를 반복해야 합니다. 실제로 브라우저가 메서드 중 하나를 지원하면 항상 이를 지원하므로 다른 분기를 감지할 필요가 없습니다. 즉, if 문을 매번 실행할 필요가 없고, 코드 실행 속도가 더 빨라진다.

해결책은 지연 로딩입니다. 소위 지연 로딩은 함수 실행 분기가 한 번만 발생한다는 것을 의미합니다. 지연 로딩을 구현하는 방법에는 두 가지가 있습니다. 첫 번째는 함수가 호출될 때 함수를 처리하는 것입니다. 함수가 처음 호출되면 적절한 방식으로 실행되는 다른 함수가 해당 함수를 덮어쓰므로 원래 함수에 대한 모든 호출은 실행 분기를 거칠 필요가 없습니다.

lazy를 사용할 수 있습니다. 다음과 같은 방법으로 로드 addEvent()를 다시 작성하세요.

function addEvent(type, element, fun) {
  if (element.addEventListener) {
    addEvent = function (type, element, fun) {
      element.addEventListener(type, fun, false);
    }
  }
  else if(element.attachEvent){
    addEvent = function (type, element, fun) {
      element.attachEvent('on' + type, fun);
    }
  }
  else{
    addEvent = function (type, element, fun) {
      element['on' + type] = fun;
    }
  }
  return addEvent(type, element, fun);
}

이 지연 로드된 addEvent()에서는 if 문의 각 분기가 addEvent 변수에 값을 할당하여 원래 함수를 효과적으로 처리합니다. 마지막 단계는 새로운 할당 함수를 호출하는 것입니다. 다음에 addEvent()를 호출하면 새로 할당된 함수가 직접 호출되므로 if 문을 실행할 필요가 없습니다. 그러나 이 메서드는 함수 이름이 변경되면 수정이 더 번거롭다는 단점이 있습니다.

【2】두 번째 방법은 함수를 선언할 때 적절한 함수를 지정하는 것입니다. 이렇게 하면 함수가 처음 호출될 때 성능이 떨어지지 않지만, 코드가 로드될 때 약간의 성능이 떨어지게 됩니다. 다음은 이 아이디어에 따라 addEvent()를 다시 작성하는 것입니다. 다음 코드는 어떤 함수 구현을 사용해야 하는지 결정하기 위해 다양한 함수를 통해 분기하는 익명의 자체 실행 함수를 만듭니다.

var addEvent = (function () {
  if (document.addEventListener) {
    return function (type, element, fun) {
      element.addEventListener(type, fun, false);
    }
  }
  else if (document.attachEvent) {
    return function (type, element, fun) {
      element.attachEvent('on' + type, fun);
    }
  }
  else {
    return function (type, element, fun) {
      element['on' + type] = fun;
    }
  }
})();

위 내용은 javascript 함수의 지연 로딩 함수 예제 코드에 대한 자세한 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!