js 콜백 function_javascript 스킬에 대한 자세한 설명

네이티브 앱과 웹 앱을 만드는 것이 이제 주류가 되었습니다. 이는 다양한 브라우저 기반의 웹 앱 프레임워크가 점점 더 대중화되고 있고, js를 하는 사람들이 점점 더 유망해지고 있다는 것을 의미합니다. 또한 백엔드 개발에서 프런트엔드 개발, 모바일 개발로 점차 이동하기로 결정했습니다. 더 이상 고민하지 않고 "js 콜백 기능"과 관련된 사항을 살펴보겠습니다.

콜백 함수에 대해 말하자면, 많은 사람들이 그 의미를 알고 있음에도 불구하고 여전히 이해가 부족합니다. 어떻게 사용하는지는 아직 좀 헷갈리네요. 인터넷의 일부 관련 정보에서는 무슨 일이 일어나고 있는지 자세히 설명하지 않으며 설명도 상대적으로 일방적입니다. 아래에서는 내 개인적인 이해에 대해서만 이야기하고 있으며 큰 사람들을 비판하지 마십시오. 대략적인 정의를 살펴보겠습니다. "함수 a에는 함수 b라는 매개변수가 있습니다. 함수 a가 실행되면 함수 b가 실행됩니다. 그러면 이 프로세스를 콜백이라고 합니다. 이 문장은 함수 b가 Function으로 시작한다는 의미입니다." a가 매개변수로 전달되어 실행되는 순서는 a를 먼저 실행한 다음 매개변수 b를 실행하는 것입니다. 먼저 다음 예를 살펴보겠습니다.

코드 복사 코드는 다음과 같습니다.

함수 a(콜백){
경고('a');
​​ callback.call(this);//또는 callback(), callback.apply(this), 개인 취향에 따라
}
함수 b(){
경고('b');
}
//전화
a(b);

이 결과는 'a'가 먼저 나타난 다음 'b'가 나타난 것입니다. 누군가는 "이런 코드를 작성하는 이유가 뭐죠? 별로 효과가 없을 것 같아요!"라고 물을 것 같아요.

네, 사실 저도 "함수를 호출하면 함수에서 직접 호출하면 됩니다." 이렇게 쓰는 것도 의미가 없다고 생각합니다. 나는 모든 사람이 사전 이해를 얻을 수 있도록 작은 예를 썼습니다. 실제 코드 작성 과정에서는 대부분의 시나리오에서 매개변수를 전달해야 하기 때문에 이러한 매개변수는 거의 사용되지 않습니다. 다음은 매개변수가 있는 것입니다:

코드 복사 코드는 다음과 같습니다.

함수 c(콜백){
        경고('c');
​​ callback.call(this,'d');
}
//전화
c(함수(e){
경고(e);
});

이 호출이 익숙하지 않나요? 여기서 e 매개변수에는 'd' 값이 할당되어 있습니다. 실제로는 객체로 할당할 수도 있습니다. Jquery에 e 매개변수가 있나요? 아래에서 이에 대해 이야기해 보겠습니다.
Jquery의 e 매개변수가 콜백에 의해 할당되는 방식입니다.

Jquery 프레임워크는 다들 잘 알고 계시리라 생각합니다. 오랫동안 사용되어 개발 중에 사용되는 프레임워크로, 온라인에서 API를 검색하는 것이 매우 편리하고 빠르게 시작할 수 있습니다. Jquery 프레임워크에서는 이벤트에서 일부 매개변수를 가져와야 하는 경우가 있습니다. 예를 들어 현재 클릭과 클릭된 요소 개체의 좌표를 가져오고 싶습니다. 이 요구 사항은 Jquery에서 쉽게 처리할 수 있습니다.

코드 복사 코드는 다음과 같습니다.

           $("#id").bind('클릭',function(e){
                  //e.pageX, e.pageY, e.target... 다양한 데이터
        });

실제로 e 매개변수의 할당도 콜백 함수를 통해 구현됩니다. 이 매개변수는 JJquery 소스 코드를 주의 깊게 연구한 친구들이 사용하여 객체 값을 부여받습니다. 이것을 발견했습니다.

Ajax $.get('',{},function(data){})의 데이터 매개변수에도 동일한 원칙이 적용됩니다.

Jquery 이벤트 객체에 콜백 함수가 어떻게 적용되는지 살펴보겠습니다.

편의상 $와 관련된 몇 가지 구현을 간단히 작성했습니다. 이전에 프레임워크 구현에 더 가까운 메소드가 있는 "Small Talk about Jquery"에 대해 작성한 적이 있습니다. 아래에서는 간단한 선택기만 작성하겠습니다. .

코드 복사 코드는 다음과 같습니다.

     var   _$=함수(id)
               {
                     this.element=  document.getElementById(id);
                }
       _$.prototype={
            바인딩:함수(evt,콜백)
            {
                var   that=this;
                if(document.addEventListener)
                {
                    this.element.addEventListener(evt, function(e){
                        callback.call(this,that.standadize(e));
                    }  ,거짓);
                }
                else if(document.attachEvent)
                {
                    this.element.attachEvent('on' evt,function(e){
                        callback.call(this,that.standadize(e));
                    });
                }
                그 외
                    this.element['on' evt]=function(e){
                        callback.call(this,that.standadize(e));
                    };
            },
            표준화:함수(e){
                 var  evt=e||window.event;
                 var  pageX,pageY,layerX,layerY;
                 //pageX  横坐标  pageY纵坐标   layerX点击处位于元素的横坐标   layerY点击处位于元素的纵坐标
                 if(evt.pageX)
                 {
                     pageX=evt.pageX;
                     pageY=evt.pageY;
                 }
                 그 외
                 {
                    pageX=document.body.scrollLeft evt.clientX-document.body.clientLeft;
                    pageY=document.body.scrollTop evt.clientY-document.body.clientLTop;
                 }
                 if(evt.layerX)
                 {
                     layerX=evt.layerX;
                     layerY=evt.layerY;
                 }
                 그 외
                 {
                     layerX=evt.offsetX;
                     layerXY=evt.offsetY;
                 }
                 반환  {
                    페이지X:페이지X,
                    페이지Y:페이지Y,
                    레이어X:레이어X,
                    레이어Y:레이어Y
                 }
            }
       }
       window.$=함수(id)
       {
          새로운 _$(id) 반환;
       }
        $('컨테이너').bind('클릭',function(e){
            경고(e.pageX);
        });
        $('container1').bind('클릭',function(e){
             경고(e.pageX);
        });

저희 회사는 표준화를 위해 노력하고 있습니다.

复主代码 代码如下:

     반환  {
                    페이지X:페이지X,
                    페이지Y:페이지Y,
                    레이어X:레이어X,
                    레이어Y:레이어Y
                 }

콜백 函数被调에 사용되는 时候传入的是匿name函数

复主代码 代码如下:          함수(e){

        }

而callback.call(this,that.standadize(e))相当于是执行了这么一段代码 

复主代码 代码如下:

(함수(e){
          })(표준화(e))

이는 Jquery가 콜백 함수를 사용하는 전형적인 장소이기도 합니다. 이것이 e 매개변수가 할당되는 방식입니다. 이렇게 말하면 이 기능과 사용 방법을 이해할 수 있을 것입니다.

콜백은 다양한 프레임워크에서 널리 사용됩니다. 때로는 직접 작성할 때 실제 상황에 맞게 사용할 수도 있습니다.