>웹 프론트엔드 >JS 튜토리얼 >js 게으른 함수 아이디어 소개

js 게으른 함수 아이디어 소개

不言
不言앞으로
2018-07-03 17:41:392599검색

Lazy 함수는 js 함수형 프로그래밍의 또 다른 응용 프로그램입니다. Lazy 함수는 함수가 처음으로 호출될 때만 함수 실행 분기가 실행된다는 것을 의미합니다. 이 기사에서는 모든 사람에게 js 게으른 함수에 대한 아이디어를 소개합니다. . 모든 사람에게 도움이 되기를 바랍니다.

js 게으른 함수 아이디어 소개

Vue, React 등 다른 프레임워크가 널리 사용되기 전에는 jQuery나 Native J를 사용하여 DOM을 운영하고 코드를 작성해야 했습니다. 이벤트 바인딩을 위해 Native J를 사용할 때 DOM2 레벨 바인딩 이벤트 방법을 적용할 수 있습니다. 호환성을 위해 Element.addEventListener()도

Element.attachEvent()입니다. 따라서 이를 메소드로 캡슐화해야 합니다:

function emit(element, type, func) {
    if (element.addEventListener) {
        element.addEventListener(type, func, false);
    } else if (element.attachEvent) {
        element.attachEvent('on' + type, func);
    } else { //如果不支持DOM2级事件
        element['on' + type] = func;
    }
}

이때 요소가 하나의 동작을 통해 여러 클릭 이벤트를 추가해야 하는 경우:

emit(div, 'click', fn1);
emit(div, 'click', fn2);

처음으로 fn1 이벤트를 div에 바인딩할 때, 브라우저가 어떤 바인딩 방법을 실행할 수 있는지 이미 알고 있습니까? 바인딩 fn2를 실행할 때 다시 판단할 필요가 없으며 코드를 수정할 수 있습니다.

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

즉, 첫 번째 판단을 내린 후 기능을 재정의합니다. 따라서 나중에 바인딩할 때 판단할 필요가 없습니다. 성능 측면에서는 클로저가 생성되더라도 나중에 동일한 판단을 여러 번 하는 것보다 낫습니다.

이것은 함수에 대한 게으른 아이디어입니다. 동일한 판단을 위해서는 한 번만 하면 됩니다.

이 기사는 js tutorial 칼럼에서 가져온 것입니다. 배우신 것을 환영합니다!

위 내용은 js 게으른 함수 아이디어 소개의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명:
이 기사는 cnblogs.com에서 복제됩니다. 침해가 있는 경우 admin@php.cn으로 문의하시기 바랍니다. 삭제