Detaillierte Erläuterung der jQuery-Prototypeigenschaften und Prototypmethoden

Detaillierte Erläuterung der jQuery-Prototypeigenschaften und Prototypmethoden_jquery

WBOY

Freigeben： 2016-05-16 15:51:07

Original

1774 Leute haben es durchsucht

Werfen wir zunächst einen Blick auf die Prototypeigenschaften und -methoden, die in jQuery 1.7.1 definiert sind?

Das erste ist das Konstruktorattribut

Ich glaube, dass Entwickler, die mit dem objektorientierten Teil von js vertraut sind, damit vertraut sind, einer Funktion, die zur Rückgabe von Objektattributen verwendet wird. Hier ist ein einfaches Beispiel:

function Person(){};
    var person=new Person();
    alert(person.constructor); //function Person(){}

Nach dem Login kopieren

Wenn wir Vererbung schreiben, fügen wir gerne alle Prototypeigenschaften und -methoden in ein separates Objektliteral ein. Dies führt dazu, dass das Konstruktorattribut nicht mit dem „tatsächlichen“ Zeiger übereinstimmt

  function Person(){

    }

    Person.prototype={
      say:function(msg){
        alert(msg); 
      }
    }

    var person=new Person();
    person.say('hello');
    alert(person.constructor); //function Object(){[native code]}

Nach dem Login kopieren

Der Verweis ändert sich zu diesem Zeitpunkt, da das Literalobjekt eine Instanz von Object ist. Um diesen „Fehler“ zu beheben, muss er normalerweise manuell geändert werden Code. Die Erklärung des Konstruktors:jQuery im Quellcode

Selektorattribut Das

selector-Attribut ist für die Verwendung von jquey als js-Bibliothek nicht nützlich. Es wird hauptsächlich zum Entwickeln von Plug-Ins oder Modifikationen basierend auf jquery verwendet. Dieses Attribut gibt die Selektorzeichenfolge zurück, um das aktuelle jquery-Objekt abzurufen, zum Beispiel:

var obj=$('div a');
console.log(obj.selector);//'div a'

Nach dem Login kopieren

jquery-Attribut

Diese Eigenschaft gibt die aktuell verwendete jQuery-Version zurück

console.log($('body').jquery); //1.7.1

Nach dem Login kopieren

Längenattribut

Dieses Attribut gibt die Anzahl der im JQuery-Objekt enthaltenen Elemente zurück. Beispiel:

console.log ( $('body') .length); //1

Nach dem Login kopieren

Der Quellcode dieser vier Attribute lautet wie folgt:

  constructor: jQuery,


  // Start with an empty selector
  selector: "",

  // The current version of jQuery being used
  jquery: "1.7.1",

  // The default length of a jQuery object is 0
  length: 0,

Nach dem Login kopieren

Größenmethode

// The number of elements contained in the matched element set
  size: function() {
    return this.length;
  },

Nach dem Login kopieren

Diese Methode gibt das Längenattribut des JQuery-Objekts zurück. Es wird empfohlen, das Längenattribut zu verwenden, um unnötigen Funktionsaufrufaufwand zu reduzieren

toArray-Methode

toArray: function() {
    return slice.call( this, 0 );
  },

Nach dem Login kopieren

Alle DOM-Elemente in der jQuery-Sammlung in einem Array wiederherstellen.

alert($('li').toArray());
[<li id="foo">, <li id="bar">]

Nach dem Login kopieren

Zuallererst wurde die Slice-Methode hier im Konstruktor von jQuery beibehalten, bei dem es sich um die Prototyp-Methode von Array handelt

// Save a reference to some core methods
87 toString = Object.prototype.toString,
88 hasOwn = Object.prototype.hasOwnProperty,
89 push = Array.prototype.push,
90 slice = Array.prototype.slice,
91 trim = String.prototype.trim,
92 indexOf = Array.prototype.indexOf,

Nach dem Login kopieren

Implementieren Sie den Objektidentitätswechsel über die Aufrufmethode. Die Übergabe des Parameters 0 bedeutet, dass diese Methode kein sauberes Array zurückgibt, das ein reines Array ist Klassen in der Zukunft Diese Methode kann auch für die Konvertierung in Array-Form verwendet werden, zum Beispiel:

<!doctype html>
<html>
  <head>
    <meta charset='utf-8'/>
    <title>jQuery源码分析-原型属性和方法</title>
  </head>
  <body>
    <div>
    </div>
    <div></div>   
  </body>
  <script src='jquery-1.7.1.js'></script>
  <script>
  var divs=document.getElementsByTagName('div');
  console.log(divs); //[div, div]
  alert(divs instanceof Array); //fasle

  alert(Array.prototype.slice.call(divs,0) instanceof Array); //true
  </script>
</html>

Nach dem Login kopieren

Das Erlernen des jqeury-Quellcodes ist also nicht nur hilfreich für die Verwendung von jquery, sondern Sie können auch viele Fähigkeiten zur Verwendung von js erlernen

Methode abrufen

// Get the Nth element in the matched element set OR
// Get the whole matched element set as a clean array
  get: function( num ) {
    return num == null &#63;

      // Return a 'clean' array
      this.toArray() :

      // Return just the object
      ( num < 0 &#63; this[ this.length + num ] : this[ num ] );
  },

Nach dem Login kopieren

Diese Methode funktioniert, indem sie eines der Elemente im jquery-Objekt findet und das ursprüngliche js-Knotenelementobjekt anstelle des jquery-Objekts zurückgibt. Dies unterscheidet sich von der eq-Methode. Diese Methode akzeptiert einen Parameter, wenn der Parameter nicht vorhanden ist. Rufen Sie dann die toArray-Methode auf, um ein Array zurückzugeben, das alle Elemente enthält. Wenn die Zahl größer als 0 ist, kann sie direkt durch Subskription erhalten werden. Wenn es sich um eine negative Zahl handelt, wird sie durch Addition zur Länge erhalten Methoden müssen wir positive und negative Indizes unterstützen. Wenn das Geschriebene keine Zahl ist oder die Länge der im aktuellen Objekt enthaltenen Elemente überschreitet, wird undefiniert.

zurückgegeben.

Das Obige ist der gesamte Inhalt dieses Artikels. Ich hoffe, er gefällt Ihnen allen.