Detaillierte Erläuterung des Unterschieds zwischen verzögerten Objekten und Extend in jQuery-js-Tutorial-php.cn

In diesem Artikel werden hauptsächlich das verzögerte Objekt und die Erweiterungsmethode in jQuery vorgestellt, die einen guten Referenzwert haben. Werfen wir einen Blick mit dem folgenden Editor. Ich hoffe, er kann allen helfen.

1 verzögertes Objekt

Das verzögerte Objekt ist die Callback-Funktionslösung von jQuery. Es handelt sich um eine Funktion, die ab jQuery Version 1.5.0 eingeführt wurde

Methoden des verzögerten Objekts

(1) $.Deferred() generiert ein verzögertes Objekt.

(2) deferred.done() gibt die Rückruffunktion an, wenn die Operation erfolgreich ist

(3) deferred.fail() gibt die Rückruffunktion an, wenn die Operation fehlschlägt

(4) Wenn deferred.promise() keine Parameter hat, gibt es ein neues verzögertes Objekt zurück und der Betriebsstatus des Objekts kann nicht geändert werden. Wenn es Parameter akzeptiert, dient es dazu, die verzögerte Schnittstelle auf dem Parameterobjekt bereitzustellen.

(5) deferred.resolve() Ändert den Ausführungsstatus des verzögerten Objekts manuell in „Abgeschlossen“ und löst so sofort die Methode done() aus.

(6) deferred.reject() Diese Methode ist genau das Gegenteil von deferred.resolve(). Nach dem Aufruf wird der Ausführungsstatus des verzögerten Objekts in „fehlgeschlagen“ geändert und somit sofort ausgelöst fail()-Methode

(7) $.when() gibt Rückruffunktionen für mehrere Vorgänge an.

Zusätzlich zu diesen Methoden verfügt das verzögerte Objekt auch über zwei wichtige Methoden, die im obigen Tutorial nicht behandelt werden.

(8) deferred.then()

Manchmal können done() und fail() zusammen geschrieben werden. Dies ist die then()-Methode.

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

Nach dem Login kopieren

Wenn then() zwei Parameter hat, ist der erste Parameter die Rückruffunktion der Methode done() und der zweite Parameter die Rückrufmethode der Methode fail(). Wenn then() nur einen Parameter hat, entspricht dies done().

(9) deferred.always()

Diese Methode wird auch zur Angabe der Rückruffunktion verwendet, unabhängig davon, ob es sich um deferred.resolve() oder deferred.reject() handelt aufgerufen wird, wird am Ende immer ausgeführt.

$.ajax( "test.html" )
.always( function() { alert("已执行！");} );

Nach dem Login kopieren

Lass uns etwas tun

1) Kettenschreiben der Ajax-Operation

Lassen Sie uns zunächst das traditionelle Schreiben der Ajax-Operation von jQuery überprüfen:

$.ajax({

　　　　url: "test.html",

　　　　success: function(){
　　　　　　alert("哈哈，成功了！");
　　　　},

　　　　error:function(){
　　　　　　alert("出错啦！");
　　　　}
　　});

Nach dem Login kopieren

Im obigen Code akzeptiert $.ajax() einen Objektparameter. Dieses Objekt enthält zwei Methoden: Die Erfolgsmethode gibt die Rückruffunktion an, nachdem die Operation erfolgreich war, und die Fehlermethode gibt die Rückruffunktion an, nachdem die Operation fehlgeschlagen ist.

Nach Abschluss der $.ajax()-Operation wird das XHR-Objekt zurückgegeben, wenn Sie eine Version von jQuery unter 1.5.0 verwenden, und Sie können keine Kettenoperationen ausführen, wenn es höher als die Version ist 1.5.0, Was zurückgegeben wird, ist ein verzögertes Objekt, das verkettet werden kann.

Nachdem Sie das verzögerte Objekt haben, können Sie es wie folgt schreiben

$.ajax("test.html")

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

Nach dem Login kopieren

Done() im obigen Code entspricht der Erfolgsmethode und fail() ist äquivalent zur Fehlermethode. Nach der Einführung der Kettenschreibmethode wird die Lesbarkeit des Codes erheblich verbessert.

2) Geben Sie mehrere Rückruffunktionen für denselben Vorgang an

Einer der großen Vorteile des verzögerten Objekts besteht darin, dass Sie mehrere Rückruffunktionen frei hinzufügen können.

Was soll ich am Beispiel des obigen Codes tun, wenn ich nach erfolgreicher Ajax-Operation zusätzlich zur ursprünglichen Rückruffunktion eine weitere Rückruffunktion ausführen möchte?

Es ist ganz einfach, fügen Sie es einfach am Ende hinzu.

$.ajax("test.html")

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

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

Nach dem Login kopieren

Sie können so viele Rückruffunktionen hinzufügen, wie Sie möchten, und sie werden in der Reihenfolge ausgeführt, in der sie hinzugefügt werden.

3) Rückruffunktionen für mehrere Vorgänge angeben

Ein weiterer großer Vorteil des verzögerten Objekts besteht darin, dass Sie eine Rückruffunktion für mehrere Ereignisse angeben können, was mit herkömmlichem Schreiben nicht möglich ist.

Bitte schauen Sie sich den folgenden Code an, der eine neue Methode $.when() verwendet:

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

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

Nach dem Login kopieren

Die Bedeutung dieses Codes besteht darin, zuerst zwei Operationen auszuführen $.ajax( "test1 .html") und $.ajax("test2.html"), wenn beide erfolgreich sind, führen Sie die durch done() angegebene Rückruffunktion aus; wenn eine oder beide fehlschlagen, führen Sie die durch fail() angegebene Rückruffunktion aus. Funktion.

4) Callback-Funktionsschnittstelle für allgemeine Operationen (Teil 1)

Der größte Vorteil des verzögerten Objekts besteht darin, dass es diesen Satz von Callback-Funktionsschnittstellen von Ajax-Operationen auf alle Operationen erweitert. Mit anderen Worten: Jede Operation – ob es sich um eine Ajax-Operation oder eine lokale Operation handelt, ob es sich um eine asynchrone Operation oder eine synchrone Operation handelt – kann verschiedene Methoden des verzögerten Objekts verwenden, um eine Rückruffunktion anzugeben.

Schauen wir uns ein konkretes Beispiel an. Angenommen, es gibt eine zeitaufwändige Wartezeit:

var wait = function(){

　　　　var tasks = function(){

　　　　　　alert("执行完毕！");

　　　　};

　　　　setTimeout(tasks,5000);
　　};

Nach dem Login kopieren

Wir geben eine Rückruffunktion dafür an. Was sollen wir tun?

Natürlich werden Sie denken, dass Sie $.when() verwenden können:

$.when(wait())

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

Nach dem Login kopieren

Wenn Sie es jedoch so schreiben, wird die Methode done() sofort und dort ausgeführt wird keine Rückruffunktion haben. Der Grund dafür ist, dass die Parameter von $.when() nur verzögerte Objekte sein können, daher muss wait() neu geschrieben werden:

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

　　var wait = function(dtd){

　　　　var tasks = function(){

　　　　　　alert("执行完毕！");

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

　　　　};

　　　　setTimeout(tasks,5000);

　　　　return dtd;
　　};

Nach dem Login kopieren

Jetzt gibt die Funktion wait() ein verzögertes Objekt zurück, sodass Sie dies können Kettenoperation hinzufügen.

$.when(wait(dtd))

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

Nach dem Login kopieren

Nachdem die Funktion wait() ausgeführt wurde, wird die durch die Methode done() angegebene Rückruffunktion automatisch ausgeführt.

5) deferred.resolve()-Methode und deferred.reject()-Methode

jQuery legt fest, dass verzögerte Objekte drei Ausführungszustände haben – unvollendet, abgeschlossen und fehlgeschlagen. Wenn der Ausführungsstatus „abgeschlossen“ (aufgelöst) ist, ruft das zurückgestellte Objekt sofort die durch die Methode done() angegebene Rückruffunktion auf. Wenn der Ausführungsstatus „fehlgeschlagen“ ist, wird die durch die Methode fail() angegebene Rückruffunktion aufgerufen. Wenn der Ausführungsstatus „nicht erfolgreich“ lautet, „Abgeschlossen“, warten Sie weiter

oder rufen Sie die Rückruffunktion auf, die durch die progress()-Methode angegeben wird (hinzugefügt in jQuery 1.7-Version).

前面部分的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("出错啦！"); });

Nach dem Login kopieren

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

Nach dem Login kopieren

我在代码的尾部加了一行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(); // 此时，这个语句是无效的

Nach dem Login kopieren

在上面的这段代码中，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("出错啦！"); });

Nach dem Login kopieren

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

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

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

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

Nach dem Login kopieren

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

Nach dem Login kopieren

这里的关键是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');}
});

Nach dem Login kopieren

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

$.fn.extend(src)

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

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

Nach dem Login kopieren

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

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

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

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

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

Nach dem Login kopieren

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

Nach dem Login kopieren

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

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

Nach dem Login kopieren

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

var result=$.extend( false, {}, 
{ name: "John", location:{city: "Boston",county:"USA"} }, 
{ last: "Resig", location: {state: "MA",county:"China"} } 
);

Nach dem Login kopieren

那么合并后的结果就是:

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

以上是网上看到的两篇分别对jQuery中的deferred对象和extend方法的介绍，感觉比较详细而且容易理解，所以把它们整理到一起与大家分享！