Heim  >  Artikel  >  Web-Frontend  >  Detaillierte Erklärung des Unterschieds zwischen extension() und jQuery.fn.extend() in jQuery

Detaillierte Erklärung des Unterschieds zwischen extension() und jQuery.fn.extend() in jQuery

青灯夜游
青灯夜游nach vorne
2020-11-26 17:59:102945Durchsuche

Detaillierte Erklärung des Unterschieds zwischen extension() und jQuery.fn.extend() in jQuery

Verwandte Empfehlungen: „jQuery Video Tutorial

1. Lernen Sie jQueryextend() und jQuery.fn.extend()

jQuery API-Handbuch kennen , Die extend-Methode ist auf zwei verschiedenen Objekten montiert, jQuery und jQuery.fn, aber der interne Code von jQuery ist derselbe, aber die Funktionen sind unterschiedlich; Erklärung: jQuery.extend(): Füge den Inhalt von zwei oder mehr Objekten zusammen zum ersten Objekt zusammen. (Füge den Inhalt von zwei oder mehr Objekten zusammen zum ersten Objekt zusammen.) ;

jQuery.fn.extend():Führen Sie den Inhalt eines Objekts mit dem jQuery-Prototyp zusammen, um neue jQuery-Instanzmethoden bereitzustellen

2. Verstehen Sie jQuery.extend() Lassen Sie uns zunächst jQuery als Klasse betrachten. Dies ist einfacher zu verstehen. jQuery.extend() ist eine erweiterte jQuery-Klasse.

Angenommen, wir behandeln die jQuery-Klasse als einen Menschen, der essen, trinken, rennen und springen kann. Jetzt verwenden wir die jQuery.extend-Methode, um diese Klasse um die Fähigkeit speak() zu erweitern. In diesem Fall können Sie diese Fähigkeit (Methode) erben, unabhängig davon, ob Sie ein Mann, eine Frau, eine xx-Person usw. sind. kann wie folgt geschrieben werden:

JQuery.extend({
    speak:function(){
         alert("how are you!");
    }
});
Die aufrufende Methode lautet wie folgt:

<!DOCTYPE html>
<html>
<head>
    <title>jQuery.extend()与jQuery.fn.extend()区别</title>
    <meta charset="utf-8">
    <script type="text/javascript" src="jquery-1.7.1.js"></script>
    <script type="text/javascript">
        (function($){
               $.extend({
                   speak:function(){
                       alert("how are you!");
                   }
               });
        })(jQuery);    </script>
    <script type="text/javascript">
        $(document).ready(function(){
            $.speak();
        })    </script>
</head>
<body>
 
</body>
</html>
Dies zeigt, dass $.speak) zu einer Methode (Objekt) der jQuery-Klasse selbst geworden ist, und er kann jetzt „sprechen“ „Ja.“

Aber diese Fähigkeit kann nur von der jQuery-Klasse selbst genutzt werden, die die gesamte Menschheit repräsentiert. Wenn Sie es persönlich nutzen möchten, Sie Zhang San Li Si Wang Wu Ma Liu, können Sie kleine Basis die gesamte Menschheit repräsentieren?

Diese Erweiterung ist also auch eine sogenannte statische Methode, die sich nur auf die Klasse selbst bezieht

. Es hat nichts mit Ihrem spezifischen instanziierten Objekt zu tun.

3. Verstehen Sie

jQuery.fn.extend()

Wörtlich genommen ist diese Erweiterung die Methode von jQuery.fn. Was ist jQuery.fn?

jQuery.fn = jQuery.prototype = {
      init:funtion(selector,context){            //.....  
     }
}
JQuery.fn.extend erweitert also die Methode des jQuery-Objekts (Prototyp)! Was ist das Objekt? Es ist die Instanziierung einer Klasse wie $("#abc"), $(p)Das heißt, die Erweiterungsmethode jQuery.fn.extend muss für das jQuery-Objekt verwendet werden! Er muss ein instanziiertes Objekt wie Zhang, San, Li, Si, Wang, Wu und Liu sein, um es verwenden zu können.

Um es ganz klar auszudrücken: Es muss wie folgt verwendet werden (vorausgesetzt, xyz() ist eine Erweiterungsmethode):

$('selector'). 4. Zusammenfassung der Unterschiede zwischen den beiden:

4.1. Die Aufrufmethoden der beiden sind unterschiedlich:

       jQuery.extend(),一般由传入的全局函数来调用,主要是用来拓展个全局函数,如$.init(),$.ajax();

       jQuery.fn.extend(),一般由具体的实例对象来调用,可以用来拓展个选择器,例如$.fn.each();

4.2、两者的主要功能作用不同:

        jQuery.extend(object); 为扩展jQuery类本身,为自身添加新的方法。

        jQuery.fn.extend(object);给jQuery对象添加方法

 4.3、大部分插件都是用jQuery.fn.extend()

 5、JQuery的extend扩展方法:

     5.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"}

     也就是说后面的参数如果和前面的参数存在相同的名称,那么后面的会覆盖前面的参数值。

      5.2、省略dest参数
           上述的extend方法原型中的dest参数是可以省略的,如果省略了,则该方法就只能有一个src参数,而且是将该src合并到调用extend方法的对象中去,如:
   5.2.1、$.extend(src)
   该方法就是将src合并到jquery的全局对象中去,如:

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

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

   5.2.2、$.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命名空间中去。

   5.2.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,那么合并后的结果就是: 

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

        那么合并后的结果就是:

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

以上就是$.extend()在项目中经常会使用到的一些细节。

更多编程相关知识,请访问:编程视频课程!!

Das obige ist der detaillierte Inhalt vonDetaillierte Erklärung des Unterschieds zwischen extension() und jQuery.fn.extend() in jQuery. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme:
Dieser Artikel ist reproduziert unter:cnblogs.com. Bei Verstößen wenden Sie sich bitte an admin@php.cn löschen