jQuery에서 지연된 객체와 확장의 차이점에 대한 자세한 설명-JS 튜토리얼-php.cn

본 글에서는 참고할만한 가치가 있는 jQuery의 deferred 객체와 확장 메소드를 주로 소개합니다. 아래 편집기를 살펴보겠습니다. 모든 사람에게 도움이 되기를 바랍니다.

1 deferred object

deferred object는 jQuery의 콜백 함수 솔루션으로 jQuery 버전 1.5.0부터 도입된 기능이다.

deferred object 방법

(1) $.Deferred()는 deferred 객체를 생성한다.

(2) deferred.done()은 작업이 성공할 때 콜백 함수를 지정합니다

(3) deferred.fail()은 작업이 실패할 때 콜백 함수를 지정합니다

(4) deferred.promise()는 다음과 같은 경우를 반환합니다. 매개변수가 없습니다. 실행 상태를 변경할 수 없는 새로운 지연된 개체는 매개변수를 수락할 때 매개변수 개체에 지연된 인터페이스를 배포하는 데 사용됩니다.

(5) deferred.resolve() 지연된 객체의 실행 상태를 "완료"로 수동으로 변경하여 done() 메서드를 즉시 트리거합니다.

(6) deferred.reject() 이 메서드는 deferred.resolve()와 정반대입니다. 호출된 후에는 지연된 개체의 실행 상태가 "실패"로 변경되므로 즉시 실패() 메서드가 실행됩니다.

(7) $.when()은 여러 작업에 대한 콜백 함수를 지정합니다.

이러한 메서드 외에도 지연된 개체에는 위 튜토리얼에서 다루지 않은 두 가지 중요한 메서드가 있습니다.

(8) deferred.then()

때로는 문제를 해결하기 위해 done()과 failure()를 함께 작성할 수 있습니다. 이것이 then() 메서드입니다.

　　$.when($.ajax( "/main.php" ))
　　.then(successFunc, failureFunc );

로그인 후 복사

then()에 두 개의 매개변수가 있는 경우 첫 번째 매개변수는 done() 메서드의 콜백 함수이고 두 번째 매개변수는 실패() 메서드의 콜백 메서드입니다. then()에 매개변수가 하나만 있으면 done()과 동일합니다.

(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()는 객체 매개변수를 받아들입니다. 두 가지 메서드가 포함되어 있습니다. 성공 메서드는 작업이 성공한 후 콜백 함수를 지정하고, 오류 메서드는 작업이 실패한 후 콜백 함수를 지정합니다.

$.ajax() 작업이 완료된 후 jQuery 1.5.0 미만 버전을 사용하는 경우 XHR 객체가 반환되며 1.5.0보다 높은 버전인 경우 체인 작업을 수행할 수 없습니다. 지연된 항목이 반환됩니다. 개체를 연결할 수 있습니다.

Deffered 객체를 얻은 후 이렇게 작성하면 됩니다.

$.ajax("test.html")

　　.done(function(){ alert("哈哈，成功了！"); })
　　.fail(function(){ alert("出错啦！"); });

로그인 후 복사

위 코드에서done()은 성공 메소드에 해당하고, 실패()는 오류 메소드에 해당합니다. 체인 라이팅 방식을 채택한 후 코드의 가독성이 크게 향상되었습니다.

2) 동일한 작업에 여러 콜백 함수를 지정하세요

연기된 개체의 가장 큰 장점 중 하나는 여러 콜백 함수를 자유롭게 추가할 수 있다는 것입니다.

위 코드를 예로 들면, ajax 작업이 성공한 후 원래 콜백 함수 외에 다른 콜백 함수도 실행하고 싶은 경우 어떻게 해야 하나요?

매우 간단합니다. 마지막에 추가하면 됩니다.

$.ajax("test.html")

　　.done(function(){ alert("哈哈，成功了！");} )

　　.fail(function(){ alert("出错啦！"); } )
　　.done(function(){ alert("第二个回调函数！");} );

로그인 후 복사

콜백 함수는 원하는 만큼 추가할 수 있으며, 추가된 순서대로 실행됩니다.

3) 여러 작업에 대한 콜백 함수 지정

지연 객체의 또 다른 큰 이점은 여러 이벤트에 대한 콜백 함수를 지정할 수 있다는 것인데, 이는 기존 작성에서는 불가능합니다.

새로운 메소드 $.when()을 사용하는 아래 코드를 살펴보세요.

$.when($.ajax("test1.html"), $.ajax("test2.html"))

　　.done(function(){ alert("哈哈，成功了！"); })
　　.fail(function(){ alert("出错啦！"); });

로그인 후 복사

이 코드의 의미는 먼저 $.ajax("test1.html") 및 $.ajax(" 두 가지 작업을 수행한다는 것입니다. test2.html"), 모두 성공하면 done()에 지정된 콜백 함수를 실행하고, 하나라도 실패하거나 둘 다 실패하면 실패()에 지정된 콜백 함수를 실행합니다.

4) 일반 작업을 위한 콜백 함수 인터페이스(1부)

지연 객체의 가장 큰 장점은 이 콜백 함수 인터페이스 세트를 ajax 작업에서 모든 작업으로 확장한다는 것입니다. 즉, 모든 작업(Ajax 작업이든 로컬 작업이든, 비동기 작업이든 동기 작업이든)은 지연된 개체의 다양한 메서드를 사용하여 콜백 함수를 지정할 수 있습니다.

구체적인 예를 살펴보겠습니다. 시간이 많이 걸리는 작업이 있다고 가정해 보겠습니다.

var wait = function(){

　　　　var tasks = function(){

　　　　　　alert("执行完毕！");

　　　　};

　　　　setTimeout(tasks,5000);
　　};

로그인 후 복사

콜백 함수를 지정합니다. 어떻게 해야 할까요?

당연히 $.when():

$.when(wait())

　　.done(function(){ alert("哈哈，成功了！"); })
　　.fail(function(){ alert("出错啦！"); });

로그인 후 복사

을 사용하면 된다고 생각하시겠지만, 이렇게 작성하면 done() 메소드가 바로 실행되어 콜백 함수로 동작하지 않게 됩니다. 그 이유는 $.when()의 매개변수는 지연된 객체만 가능하므로 wait()를 다시 작성해야 하기 때문입니다.

var dtd = $.Deferred(); // 新建一个deferred对象

　　var wait = function(dtd){

　　　　var tasks = function(){

　　　　　　alert("执行完毕！");

　　　　　　dtd.resolve(); // 改变deferred对象的执行状态

　　　　};

　　　　setTimeout(tasks,5000);

　　　　return dtd;
　　};

로그인 후 복사

이제 wait() 함수는 지연된 객체를 반환하므로 체인 작업을 추가할 수 있습니다.

$.when(wait(dtd))

　　.done(function(){ alert("哈哈，成功了！"); })
　　.fail(function(){ alert("出错啦！"); });

로그인 후 복사

wait() 함수 실행이 끝나면 done() 메서드에 지정된 콜백 함수가 자동으로 실행됩니다.

5) deferred.resolve() 메서드 및 deferred.reject() 메서드

jQuery에서는 지연된 개체에 미완료, 완료, 실패의 세 가지 실행 상태가 있다고 규정합니다. 실행 상태가 "완료"(해결됨)인 경우 지연된 객체는 done() 메서드에서 지정한 콜백 함수를 즉시 호출합니다. 실행 상태가 "실패"인 경우에는 실패() 메서드에서 지정한 콜백 함수가 호출됩니다. 실행 상태가 "실패" 완료"인 경우 계속 기다리거나 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("出错啦！"); });

로그인 후 복사

6）deferred.promise()方法

上面这种写法，还是有问题。那就是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();

로그인 후 복사

我在代码的尾部加了一行dtd.resolve()，这就改变了dtd对象的执行状态，因此导致done()方法立刻执行，跳出"哈哈，成功了！"的提示框，等5秒之后再跳出"执行完毕！"的提示框。

为了避免这种情况，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(); // 此时，这个语句是无效的

로그인 후 복사

在上面的这段代码中，wait()函数返回的是promise对象。然后，我们把回调函数绑定在这个对象上面，而不是原来的deferred对象上面。这样的好处是，无法改变这个对象的执行状态，要想改变执行状态，只能操作原来的deferred对象。

不过，更好的写法是将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("出错啦！"); });

로그인 후 복사

7）普通操作的回调函数接口（中）

另一种防止执行状态被外部改变的方法，是使用deferred对象的建构函数$.Deferred()。

这时，wait函数还是保持不变，我们直接把它传入$.Deferred()：

$.Deferred(wait)
.done(function(){ alert("哈哈，成功了！"); })
.fail(function(){ alert("出错啦！"); });

로그인 후 복사

jQuery规定，$.Deferred()可以接受一个函数名（注意，是函数名）作为参数，$.Deferred()所生成的deferred对象将作为这个函数的默认参数。

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);

로그인 후 복사

这里的关键是dtd.promise(wait)这一行，它的作用就是在wait对象上部署Deferred接口。正是因为有了这一行，后面才能直接在wait上面调用done()和fail()。

2 extend方法

JQuery的extend扩展方法：

Jquery的扩展方法extend是我们在写插件的过程中常用的方法，该方法有一些重载原型，在此，我们一起去了解了解。

1）Jquery的扩展方法原型是:　　　

extend(dest,src1,src2,src3...);

它的含义是将src1,src2,src3...合并到dest中,返回值为合并后的dest,由此可以看出该方法合并后，是修改了dest的结构的。如果想要得到合并的结果却又不想修改dest的结构，可以如下使用：

var newSrc=$.extend({},src1,src2,src3...)//也就是将"{}"作为dest参数。

这样就可以将src1,src2,src3...进行合并，然后将合并结果返回给newSrc了。如下例：

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');}
});

로그인 후 복사

就是将hello方法合并到jquery的全局对象中。

$.fn.extend(src)

该方法将src合并到jquery的实例对象中去，如:

$.fn.extend({
hello:function(){alert('hello');}
});

로그인 후 복사

就是将hello方法合并到jquery的实例对象中。

下面例举几个常用的扩展实例：

$.extend({net:{}});

这是在jquery全局对象中扩展一个net命名空间。

$.extend($.net,{
hello:function(){alert('hello');}
})

로그인 후 복사

这是将hello方法扩展到之前扩展的Jquery的net命名空间中去。

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"} } );

로그인 후 복사

我们可以看出src1中嵌套子对象location:{city:"Boston"},src2中也嵌套子对象location:{state:"MA"},第一个深度拷贝参数为true，那么合并后的结果就是：

result={name:"John",last:"Resig",
location:{city:"Boston",state:"MA",county:"China"}}

로그인 후 복사

也就是说它会将src中的嵌套子对象也进行合并，而如果第一个参数boolean为false，我们看看合并的结果是什么，如下：

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方法的介绍，感觉比较详细而且容易理解，所以把它们整理到一起与大家分享！