Analysieren Sie Kernfunktionsinstanzen in JQuery

Zu den Kernfunktionen gehören:

Wie jquery definiert ist, wie man es aufruft und wie man es erweitert. Die Beherrschung der Implementierung der Kernmethoden ist der Schlüssel zum Verständnis des jQuery-Quellcodes. Hier wurde plötzlich alles klar.

1, wie man den Eingang definiert

// Definieren Sie eine lokale Kopie von jQuery

var jQuery = function( selector, context ) {

// Das jQuery-Objekt ist eigentlich nur der „erweiterte“ Init-Konstruktor

return new jQuery.fn.init( selector, context, rootjQuery ); // Das jQuery-Objekt ist eigentlich nur die Konstruktorfunktion jQuery.prototype.init erweiterte Version

}

2, der jQuery-Prototyp und seine Beziehung zu jQuery.fn.init

// Definieren Sie die Objektmethode, das heißt, sie kann nur über $("xx") aufgerufen werden.

jQuery.fn = jQuery.prototype = {

init:function( selector, context, rootjQuery ) {

return jQuery.makeArray( selector, this );

}

Es gibt viele andere Attribute und Methoden,

Zu den Attributen gehören: jquery, Konstruktor, Selektor, Länge

Zu den Methoden gehören: toArray,get, pushStack,each, ready,slice, first,last,eq, map,end, push, sort, splice

…

}

// jQuery .prototype wird jQuery.prototype.init.prototype zur späteren Instanziierung zugewiesen

// Geben Sie der Init-Funktion den jQuery-Prototyp zur späteren Instanziierung

jQuery.fn.init.prototype = jQuery.fn ;

Das heißt, $("xx") hat eine Instanzmethode und kann aufgerufen werden. (Rufen Sie die unter jQuery.prototype definierte Methode auf)

Warum gibt jQuery das jQuery.fn.init-Objekt zurück?

jQuery = function( selector, context ) {

/ / Das jQuery-Objekt ist eigentlich nur der „erweiterte“ Init-Konstruktor

return new jQuery.fn.init( selector, context, rootjQuery );

}

jQuery.fn = jQuery.prototype = {

…

}

jQuery.fn.init.prototype = jQuery.fn;

Ähnliche Fragen zum Stackoverflow finden:

http://stackoverflow.com/questions/4754560/help-understanding-jquerys-jquery-fn-init-why-is-init-in-fn

Und das

http://stackoverflow.com/questions/1856890/why-does-jquery-use-new-jquery-fn-init-for-creating-jquery-object-but-i-can/1858537#1858537

Ich glaube, der Code ist auf diese Weise geschrieben, sodass das Schlüsselwort new nicht jedes Mal erforderlich ist, wenn Sie ein neues jQuery-Objekt instanziieren, und um auch die Logik hinter der Objektkonstruktion an den Prototyp zu delegieren der zu verwendende Bibliotheksreiniger und letzterer, um die Initialisierungslogik sauber an einem Ort zu halten und den rekursiven Aufruf von init zu ermöglichen, um ein Objekt zu erstellen und zurückzugeben, das korrekt mit den übergebenen Argumenten übereinstimmt.

3, erweitert erweitern Objektmethode und statisches Methodenprinzip

jQuery.extend = jQuery.fn.extend = function() {

var target = arguments[0] || {};

return target;

}

Es ist praktisch, Extend zu verwenden, was nichts anderes als $.extend({}) und $.fn.extend({}); Wenn Sie fn sehen, wäre es großartig, wenn Sie jQuery.prototype verstehen und daran denken könnten.

Sehen Sie sich diesen Bereich noch einmal an:

$.extend ->this ist $-> this.aa()

$.fn.extend-> ;this ist $.fn-> this.aa()

Details zur Erweiterungsimplementierung beigefügt:

Nur ​​Verwendungsszenarien:

1, einige Funktionen erweitern

Nur ein Parameter. Zum Beispiel: $.extend({f1:function(){},f2:function(){},f3:function(){}})

2, mehrere Objekte zum ersten Objekt zusammenführen

(1) Flache Kopie, der erste Parameter ist das Zielobjekt. Zum Beispiel

var a = {name:“hello“}

var b = {age:30}

$.extend(a,b);//a = {name:“hello“,age:30}

(2) Deep Copy, der erste Parameter ist TRUE und der zweite Parameter ist das Zielobjekt. Zum Beispiel

var a = {name:{job:“it“}};

var b = {name:{age: 30 }};

// $ .extend(a,b);

$.extend(true,a,b);

console.log(a);

jQuery.extend = jQuery.fn.extend = function() {
    var options, name, src, copy, copyIsArray, clone,
        target = arguments[0] || {},
        i = 1,
        length = arguments.length,
        deep = false;

    // 是不是深复制  Handle a deep copy situation
    if ( typeof target === "boolean" ) {
        deep = target;
        target = arguments[1] || {};
        // skip the boolean and the target
        i = 2;
    }

    // 不是对象类型  Handle case when target is a string or something (possible in deep copy)
    if ( typeof target !== "object" && !jQuery.isFunction(target) ) {
        target = {};
    }

    // 扩展插件的情况  extend jQuery itself if only one argument is passed
    if ( length === i ) {//$.extend({f1:function(){},f2:function(){},f3:function(){}})
        target = this;//this是$,或是$.fn
        --i;
    }

    for ( ; i <p> jQuery.extend({…}) Analyse<br><br>Sehen Sie sich an, wie es geschrieben ist</p><p>jQuery.extend({</p><p>prop:““</p><p>Methode : function(){}</p><p>});</p><p>Es ist ersichtlich, dass es sich bei diesen Methoden um statische Eigenschaften und Methoden von jQuery (dh Tool-Methoden) handelt, die Benutzern direkt bereitgestellt werden können Zukünftig auch innerlich einsetzbar. </p><p>Die konkret implementierten Werkzeugattribute und -methoden sind (auch gekennzeichnet, welche intern verwendet werden) </p><p>jQuery.extend({<br><br> expando : Generiere einen eindeutigen JQ<a href="http://www.php.cn/wiki/57.html" target="_blank"> String </a>(intern)<br><br> noConflict() : Konflikte verhindern <br><br> isReady : Ob das DOM wird geladen (intern)<br><br> readyWait: Zähler, auf wie viele Dateien gewartet werden soll (intern)<br><br> holdReady(): Verschiebung der DOM-Triggerung<br><br> ready(): Bereiten Sie sich auf die DOM-Triggerung vor<br><br> isFunction() : Ob es eine Funktion ist <br><br> isArray() : Ob es ein Array ist <br><br> isWindow() : Ob es ein Fenster ist<br><br> isNumeric() : Ist es Number<br><br> type() : Bestimmen Sie den Datentyp von <a href="http://www.php.cn/code/5808.html" target="_blank"></a><br><br> isPlainObject() : Ob es sich um ein Objektargument <br> isEmptyObject() : Ob es sich um ein leeres Objekt handelt <br><br> error() : <br>Wirft eine Ausnahme aus<a href="http://www.php.cn/php/php-tp-throw.html" target="_blank"></a><br> parseHTML() : Knoten analysieren<br><br> parseJSON(): JSON analysieren<br><br> par seXML (): XML analysieren<br><br> noop(): Leere Funktion <br><br> globalEval(): Globales JS analysieren<br><br> camelCase() : Camel Case konvertieren <br><br> nodeName ( ) : Ob es sich um den angegebenen Knotennamen handelt (intern) <br><br> every() : Durchlaufen der Sammlung <br><br> trim() : Entfernen Sie führende und nachgestellte Leerzeichen <br><br> makeArray() : Array-ähnliches Array in echtes Array konvertieren <br><br> inArray() : Array-Version indexOf<br><br> merge() : Arrays zusammenführen <br><br> grep() : Neues Array filtern <br><br> map() : Neues Array zuordnen<br><br> guid : Eindeutiger Bezeichner (intern)<br><br> Proxy() : Dies ändern zeigen auf <br><br> access() : Multifunktionswertoperation (intern)<br><br> now() : Aktuelle Zeit<br><br> swap() : CSS-Swap (intern)<br><br>});<br></p>jQuery.ready.promise = function(){}; Überwachung des asynchronen Betriebs von DOM (intern)<p></p>function isArraylike(){} Array-ähnliche Beurteilung ( intern)<p></p>

Das obige ist der detaillierte Inhalt vonAnalysieren Sie Kernfunktionsinstanzen in JQuery. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!