Heim > Artikel > Web-Frontend > Eingehende Analyse der Kernfunktionen 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, damit 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
Schauen 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 vonEingehende Analyse der Kernfunktionen in jquery. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!