jQuery 의 deferred 대상 과 extend 방법 에 대한 상세 한 설명
deferred 대상 은 jQuery 의 리 셋 함수 솔 루 션 입 니 다.jQuery 1.5.0 버 전부터 도 입 된 기능 입 니 다.
deferred 대상 방법
(1)$.Deferred()는 deferred 대상 을 생 성 합 니 다.
(2)deferred.done()작업 이 성공 할 때의 반전 함 수 를 지정 합 니 다.
(3)deferred.fail()작업 이 실 패 했 을 때의 반전 함 수 를 지정 합 니 다.
(4)deferred.promise()에 인자 가 없 을 때 새로운 deferred 대상 을 되 돌려 줍 니 다.이 대상 의 운행 상 태 는 변경 할 수 없습니다.파 라 메 터 를 받 아들 일 때 매개 변수 대상 에 deferred 인 터 페 이 스 를 배치 하 는 역할 을 합 니 다.
(5)deferred.resolve()는 deferred 대상 의 운행 상 태 를'완료'로 수 동 으로 변경 하여 done()방법 을 즉시 촉발 합 니 다.
(6)deferred.reject()이 방법 은 deferred.resolve()와 정반 대 입 니 다.호출 후 deferred 대상 의 운행 상 태 를'실패'로 바 꾸 어 즉시 fail()방법 을 촉발 합 니 다.
(7)$.when()은 여러 작업 에 리 셋 함 수 를 지정 합 니 다.
이러한 방법 을 제외 하고 deferred 대상 은 두 가지 중요 한 방법 이 있 는데 위의 튜 토리 얼 에는 언급 되 지 않 았 다.
（8）deferred.then()
때로는 일 을 절약 하기 위해 done()과 fail()을 합 쳐 쓸 수 있 는데 이것 이 바로 then()방법 이다.
$.when($.ajax( "/main.php" ))
.then(successFunc, failureFunc );（9）deferred.always()
이 방법 도 반전 함 수 를 지정 하 는 데 사 용 됩 니 다.deferred.resolve()든 deferred.reject()든 마지막 에 항상 실행 하 는 역할 을 합 니 다.
$.ajax( "test.html" )
.always( function() { alert(" ！");} );
1)ajax 작업 의 체인 쓰기
jQuery 의 ajax 작업 의 전통 적 인 문법 을 살 펴 보 겠 습 니 다.
$.ajax({
url: "test.html",
success: function(){
alert(" ， ！");
},
error:function(){
alert(" ！");
}
});
$.ajax()작업 이 끝 난 후 1.5.0 버 전보 다 낮은 jQuery 를 사용 하면 XHR 대상 으로 돌아 가 체인 작업 을 할 수 없습니다.1.5.0 버 전 이상 이면 deferred 대상 으로 돌아 가 체인 작업 을 할 수 있 습 니 다.
deferred 대상 이 생기 면 이렇게 써 도 됩 니 다.
$.ajax("test.html")
.done(function(){ alert(" ， ！"); })
.fail(function(){ alert(" ！"); });
2)같은 동작 을 하 는 여러 개의 반전 함 수 를 지정 합 니 다.
deferred 대상 의 큰 장점 은 여러 개의 반전 함 수 를 자 유 롭 게 추가 할 수 있다 는 것 이다.
아니면 위의 코드 를 예 로 들 면 ajax 작업 이 성공 한 후에 원래 의 리 셋 함 수 를 제외 하고 저 는 리 셋 함 수 를 다시 실행 하고 싶 습 니 다.어떻게 하 시 겠 습 니까?
간단 해,그냥 뒤에 넣 으 면 돼.
$.ajax("test.html")
.done(function(){ alert(" ， ！");} )
.fail(function(){ alert(" ！"); } )
.done(function(){ alert(" ！");} );
3)여러 조작 을 위 한 리 셋 함수 지정
deferred 대상 의 또 다른 장점 은 여러 이벤트 에 반전 함 수 를 지정 할 수 있 도록 하 는 것 입 니 다.이것 은 전통 적 인 쓰기 로 할 수 없 는 것 입 니 다.
다음 코드 를 보십시오.새로운 방법 을 사 용 했 습 니 다$.when():
$.when($.ajax("test1.html"), $.ajax("test2.html"))
.done(function(){ alert(" ， ！"); })
.fail(function(){ alert(" ！"); });
4)일반 작업 의 리 턴 함수 인터페이스(상)
deferred 대상 의 가장 큰 장점 은 이 반전 함수 인 터 페 이 스 를 ajax 작업 에서 모든 작업 으로 확장 하 는 것 입 니 다.즉,모든 조작-ajax 조작 이 든 로 컬 조작 이 든 비동기 조작 이 든 동기 조작 이 든-deferred 대상 의 여러 가지 방법 을 사용 하여 리 셋 함 수 를 지정 할 수 있 습 니 다.
우 리 는 구체 적 인 예 를 보 자.시간 이 많이 걸 리 는 조작 wait 가 있다 고 가정 합 니 다.
var wait = function(){
var tasks = function(){
alert(" ！");
};
setTimeout(tasks,5000);
};
자 연 스 럽 게$.when()을 사용 할 수 있다 고 생각 할 수 있 습 니 다.
$.when(wait())
.done(function(){ alert(" ， ！"); })
.fail(function(){ alert(" ！"); });
var dtd = $.Deferred(); // deferred
var wait = function(dtd){
var tasks = function(){
alert(" ！");
dtd.resolve(); // deferred
};
setTimeout(tasks,5000);
return dtd;
};
$.when(wait(dtd))
.done(function(){ alert(" ， ！"); })
.fail(function(){ alert(" ！"); });
5)deferred.resolve()방법 과 deferred.reject()방법
jQuery 규정 에 따 르 면 deferred 대상 은 세 가지 집행 상태-미 완성,완료 및 실패.실행 상태 가"완료 되 었 습 니 다"(resolved)라면 deferred 대상 은 즉시 done()방법 으로 지정 한 리 셋 함 수 를 호출 합 니 다.실행 상태 가"실 패 했 습 니 다"라면 fail()방법 으로 지정 한 리 셋 함 수 를 호출 합 니 다.실행 상태 가'완료 되 지 않 음'이면 계 속 됩 니 다.
계속 기다 리 거나 progress()방법 으로 지정 한 리 셋 함수(jQuery 1.7 버 전 추가)를 호출 합 니 다.
앞의 ajax 작업 시 deferred 대상 은 결과 에 따라 자신의 실행 상 태 를 자동 으로 변경 합 니 다.단,wait()함수 에서 이 실행 상 태 는 프로그래머 가 수 동 으로 지정 해 야 합 니 다.dtd.resolve()는 dtd 대상 의 실행 상 태 를'미 완성'에서'완료'로 바 꾸 어 done()방법 을 촉발 한 다 는 뜻 이다.
이와 유사 하 게 deferred.reject()방법 도 존재 합 니 다.dtd 대상 의 실행 상 태 를'미 완성'에서'실패'로 바 꾸 어 fail()방법 을 촉발 하 는 역할 을 합 니 다.
var dtd = $.Deferred(); // Deferred
var wait = function(dtd){
var tasks = function(){
alert(" ！");
dtd.reject(); // Deferred
};
setTimeout(tasks,5000);
return dtd;
};
$.when(wait(dtd))
.done(function(){ alert(" ， ！"); })
.fail(function(){ alert(" ！"); });
위의 이런 표기 법 은 여전히 문제 가 있다.그것 은 dtd 가 전체 대상 이기 때문에 실행 상 태 는 외부 에서 바 꿀 수 있 습 니 다.
아래 코드 를 보십시오.
var dtd = $.Deferred(); // Deferred
var wait = function(dtd){
var tasks = function(){
alert(" ！");
dtd.resolve(); // Deferred
};
setTimeout(tasks,5000);
return dtd;
};
$.when(wait(dtd))
.done(function(){ alert(" ， ！"); })
.fail(function(){ alert(" ！"); });
dtd.resolve();
이러한 상황 을 피하 기 위해 jQuery 는 deferred.promise()방법 을 제공 했다.그것 의 역할 은 원래 의 deferred 대상 에서 다른 deferred 대상 을 되 돌려 주 는 것 이다.후 자 는 실행 상 태 를 바 꾸 는 것 과 무관 한 방법(예 를 들 어 done()방법 과 fail()방법 만 개방 하고 실행 상 태 를 바 꾸 는 것 과 관련 된 방법(예 를 들 어 resolve()방법 과
reject()방법 으로 실행 상 태 를 바 꿀 수 없습니다.
아래 코드 를 보십시오.
var dtd = $.Deferred(); // Deferred
var wait = function(dtd){
var tasks = function(){
alert(" ！");
dtd.resolve(); // Deferred
};
setTimeout(tasks,5000);
return dtd.promise(); // promise
};
var d = wait(dtd); // d ，
$.when(d)
.done(function(){ alert(" ， ！"); })
.fail(function(){ alert(" ！"); });
d.resolve(); // ，
그러나 더 좋 은 문법 은 dtd 대상 을 wait()함수 의 내부 대상 으로 바 꾸 는 것 이다.
var wait = function(dtd){
var dtd = $.Deferred(); // ， Deferred
var tasks = function(){
alert(" ！");
dtd.resolve(); // Deferred
};
setTimeout(tasks,5000);
return dtd.promise(); // promise
};
$.when(wait())
.done(function(){ alert(" ， ！"); })
.fail(function(){ alert(" ！"); });실행 상태 가 외부 로 바 뀌 는 것 을 방지 하 는 또 다른 방법 은 deferred 대상 의 구성 함수$.Deferred()를 사용 하 는 것 입 니 다.
이때 wait 함 수 는 변 하지 않 습 니 다.$.Deferred()에 직접 전달 합 니 다.
$.Deferred(wait)
.done(function(){ alert(" ， ！"); })
.fail(function(){ alert(" ！"); });8)일반 작업 의 반전 함수 인터페이스(하)
위의 두 가지 방법 을 제외 하고 우 리 는 wait 대상 에 deferred 인 터 페 이 스 를 직접 배치 할 수 있다.
var dtd = $.Deferred(); // Deferred
var wait = function(dtd){
var tasks = function(){
alert(" ！");
dtd.resolve(); // Deferred
};
setTimeout(tasks,5000);
};
dtd.promise(wait);
wait.done(function(){ alert(" ， ！"); })
.fail(function(){ alert(" ！"); });
wait(dtd);
2 extend 방법
JQuery 의 extend 확장 방법:
Jquery 의 확장 방법 extend 는 플러그 인 을 쓰 는 과정 에서 자주 사용 하 는 방법 입 니 다.이 방법 은 원형 을 다시 불 러 오 는 방법 이 있 습 니 다.여기 서 같이 알 아 보 겠 습 니 다.
1)Jquery 의 확장 방법 원형 은:
extend(dest,src1,src2,src3...);그것 의 의 미 는 src 1,src 2,src 3...을 dest 에 합 쳐 반환 값 을 합 친 dest 라 는 것 이다.이 방법 을 합 친 후에 dest 의 구 조 를 수정 한 것 을 알 수 있다.합병 결 과 를 얻 으 려 면 dest 의 구 조 를 수정 하고 싶 지 않 으 면 다음 과 같이 사용 할 수 있 습 니 다.var newSrc=$.extend({},src1,src2,src3...)// "{}" dest 。이렇게 하면 src 1,src 2,src 3 를 합병 한 후에 합병 결 과 를 new Src 에 되 돌려 줄 수 있 습 니 다.다음 예:var result=$.extend({},{name:"Tom",age:21},{name:"Jerry",sex:"Boy"})그러면 합병 후의 결과.result={name:"Jerry",age:21,sex:"Boy"}즉,뒤의 매개 변 수 는 앞의 매개 변수 와 같은 이름 이 존재 하면 뒤의 매개 변 수 는 앞의 매개 변수 값 을 덮어 씁 니 다.2)dest 인자 생략
상기 extend 방법 원형 중의 dest 매개 변 수 는 생략 할 수 있 습 니 다.생략 하면 이 방법 은 src 매개 변수 만 있 을 수 있 고 이 src 를 extend 방법 을 호출 하 는 대상 에 합병 할 수 있 습 니 다.예 를 들 어:
$.extend(src)이 방법 은 src 를 jquery 의 전체 대상 에 통합 하 는 것 입 니 다.예 를 들 어:
$.extend({
hello:function(){alert('hello');}
});$.fn.extend(src)이 방법 은 src 를 jquery 의 인 스 턴 스 대상 에 통합 합 니 다.예 를 들 어:
$.fn.extend({
hello:function(){alert('hello');}
});다음 에 자주 사용 하 는 확장 인 스 턴 스 를 예 로 들 겠 습 니 다.
$.extend({net:{}});이것 은 jquery 전역 대상 에서 net 네 임 스페이스 를 확장 합 니 다.
$.extend($.net,{
hello:function(){alert('hello');}
})3)Jquery 의 extend 방법 은 원형 을 다시 불 러 옵 니 다.
extend(boolean,dest,src1,src2,src3...)첫 번 째 매개 변수 boolean 은 깊이 있 는 복사 여 부 를 대표 합 니 다.나머지 매개 변 수 는 앞에서 소개 한 것 과 일치 합 니 다.심층 복사 가 무엇 인지 예 를 들 어 보 겠 습 니 다.
var result=$.extend( true, {},
{ name: "John", location: {city: "Boston",county:"USA"} },
{ last: "Resig", location: {state: "MA",county:"China"} } );
result={name:"John",last:"Resig",
location:{city:"Boston",state:"MA",county:"China"}}
var result=$.extend( false, {},
{ name: "John", location:{city: "Boston",county:"USA"} },
{ last: "Resig", location: {state: "MA",county:"China"} }
);result={name:"John",last:"Resig",location:{state:"MA",county:"China"}}이상 은 인터넷 에서 본 두 편 으로 jQuery 의 deferred 대상 과 extend 방법 에 대한 소 개 였 습 니 다.상세 하고 이해 하기 쉬 운 것 같 아서 정리 해서 여러분 과 공유 하 겠 습 니 다!이상 은 본 고의 모든 내용 입 니 다.본 고의 내용 이 여러분 의 학습 이나 업무 에 어느 정도 도움 이 되 기 를 바 랍 니 다.또한 저 희 를 많이 지지 해 주시 기 바 랍 니 다!
이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:
jQuery 전후 예이 기사에서는 jquery after() 및 before() 메소드의 예를 볼 것입니다. before() 메서드는 선택한 요소 앞에 지정된 콘텐츠를 삽입합니다. after() 메서드는 선택한 요소 뒤에 지정된 콘텐츠...
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.
좋은 웹페이지 즐겨찾기
