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 < length; i++ ) {//可能有多个对象扩展到第一个对象上
        // Only deal with non-null/undefined values
        if ( (options = arguments[ i ]) != null ) {//options是一个对象
            // Extend the base object
            for ( name in options ) {
                src = target[ name ];  //src是target里已经存在的value（也可能不存在）
                copy = options[ name ];//copy是待合入的一个value

                // 防止循环引用  Prevent never-ending loop
                if ( target === copy ) {//例如：var a={};$.extend(a,{name:a});//可能导致循环引用
                    continue;
                }

                // if是深复制else是浅复制  Recurse if we're merging plain objects or arrays
                if ( deep && copy && ( jQuery.isPlainObject(copy) || (copyIsArray = jQuery.isArray(copy)) ) ) {
                    if ( copyIsArray ) {
                        copyIsArray = false;
                        clone = src && jQuery.isArray(src) ? src : [];

                    } else {
                        clone = src && jQuery.isPlainObject(src) ? src : {};
                    }

                    // 亮了，直至剥离至最深一层非对象类型，而且是逐个。Never move original objects, clone them
                    target[ name ] = jQuery.extend( deep, clone, copy );

                // Don't bring in undefined values
                } else if ( copy !== undefined ) {
                    target[ name ] = copy;//target[ name ] = options[ name ];
                }
            }
        }
    }

    // Return the modified object
    return target;
};

jQuery.extend({…}) Analyse

Sehen Sie sich an, wie es geschrieben ist

jQuery.extend({

prop:““

Methode : function(){}

});

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.

Die konkret implementierten Werkzeugattribute und -methoden sind (auch gekennzeichnet, welche intern verwendet werden)

jQuery.extend({

expando : Generiere einen eindeutigen JQ String (intern)

noConflict() : Konflikte verhindern

isReady : Ob das DOM wird geladen (intern)

readyWait: Zähler, auf wie viele Dateien gewartet werden soll (intern)

holdReady(): Verschiebung der DOM-Triggerung

ready(): Bereiten Sie sich auf die DOM-Triggerung vor

isFunction() : Ob es eine Funktion ist

isArray() : Ob es ein Array ist

isWindow() : Ob es ein Fenster ist

isNumeric() : Ist es Number

type() : Bestimmen Sie den Datentyp von

isPlainObject() : Ob es sich um ein Objektargument
isEmptyObject() : Ob es sich um ein leeres Objekt handelt

error() :
Wirft eine Ausnahme aus
parseHTML() : Knoten analysieren

parseJSON(): JSON analysieren

par seXML (): XML analysieren

noop(): Leere Funktion

globalEval(): Globales JS analysieren

camelCase() : Camel Case konvertieren

nodeName ( ) : Ob es sich um den angegebenen Knotennamen handelt (intern)

every() : Durchlaufen der Sammlung

trim() : Entfernen Sie führende und nachgestellte Leerzeichen

makeArray() : Array-ähnliches Array in echtes Array konvertieren

inArray() : Array-Version indexOf

merge() : Arrays zusammenführen

grep() : Neues Array filtern

map() : Neues Array zuordnen

guid : Eindeutiger Bezeichner (intern)

Proxy() : Dies ändern zeigen auf

access() : Multifunktionswertoperation (intern)

now() : Aktuelle Zeit

swap() : CSS-Swap (intern)

});

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!