Was sollten Sie über jQuery wissen?

Ich wollte kürzlich einen Blick auf den jQuery-Quellcode werfen und habe diesen Blog „10 Dinge, die ich aus dem jQuery-Quellcode gelernt habe“ gefunden.

Dieser Artikel basiert auf diesem Videoblog und hat einige Inhalte verfeinert mit Ihnen zu teilen.

Hinweis:
Dieser Artikel wurde im Jahr 2010 geschrieben. Der Autor hat im Video die jQuery-Version 1.4 verwendet. Basierend auf den im Video erwähnten Inhalten entspreche ich der aktuellen Version 1.11 wurden erstellt, einige verlassene oder entfernte Inhaltsseiten wurden gelöscht, und ich möchte dem ursprünglichen Autor danken

Black Box/Black Box

Black Box System Das Konzept ist ein System, das bei gegebener Eingabe eine Ausgabe zurückgibt, und die Blackbox kapselt den Implementierungsprozess. Die hier erwähnte jQuery-Blackbox dient dazu, jQuery und $ für das globale Variablenfenster von js auszugeben. Der Prozess ist in der Blackbox gekapselt und stört die Außenwelt nicht.

Die Blackbox von jQuery 1.4 verwendet eine selbstausführende Funktion ähnlich der folgenden

(function( window, undefined){})(window)

Der Autor gab eine allgemeinere Methode zur Implementierung der Blackbox

undefined = true;
(function(window, document, undefined){    
    if(foo == undefined) {
        }
})(this, document)

Die jQuery-Blackbox übergibt einen dritten formalen Parameter namens undefiniert, aber beim Übergeben der tatsächlichen Parameter wird kein Wert übergeben. Formale Parameter ohne übergebene Werte in js werden auf undefiniert gesetzt, um die Richtigkeit von undefiniert im Inneren sicherzustellen Blackbox. In js kann undefiniert als globales Attribut ein Wert zugewiesen werden, zum Beispiel undefiniert = wahr im obigen Code;

Ein weiterer Vorteil der Implementierung der Blackbox im Selbst-. Der Ausführungsfunktionsmodus besteht darin, dass wir für die Komprimierung, wie im folgenden Fall, nur einfache Variablen innerhalb der Blackbox verwenden müssen.

(function(A, B, C)){
    B.getElementById('')
})(this, document)

Der Autor gab viele Beispiele für die Selbstausführung einer anonymen Funktion, wie zum Beispiel das folgende, das einen bestimmten Teil der Seite kontinuierlich aktualisiert (und kontinuierlich ausführt)

(function loop(){
    doStuff();
    $('#update').load('awesomething.php',function(){
        loop();
    })
    //setTimeout(loop, 100)
})()

Die Black Box von jQuery Version 1.11 verwendet eine neue Factory-Methode. In diesem Artikel wird die Implementierung von

noConflict

nicht groß untersucht Der Code der Version 1.11 lautet wie folgt

var
    // Map over jQuery in case of overwrite
    _jQuery = window.jQuery,
    // Map over the $ in case of overwrite
    _$ = window.$;
jQuery.noConflict = function( deep ) {
    if ( window.$ === jQuery ) {
        window.$ = _$;
    }
    if ( deep && window.jQuery === jQuery ) {
        window.jQuery = _jQuery;
    }
    return jQuery;
};

Wir können sehen, dass die Anti-Konflikt-Implementierung darin besteht, zuerst die vorherige JQuery und $ zu speichern und sie dann zurückzugeben, wenn noConflict aufgerufen wird

Konvertierung mit nativer js-Attributbenennung

Die Version 1.4 verwendet Props-Objekte, um die Korrespondenz zwischen den Attributoperationen von jquery und den nativen js-Attributoperationen zu speichern
Die reduzierte Version von Version 1.11 sieht so aus

jQuery.extend({
    propFix: {
        "for": "htmlFor",
        "class": "className"
    },
    prop: function( elem, name, value ) {
        //...
        name = jQuery.propFix[ name ] || name;
    },
    propHooks: {
        //...
    }
});
jQuery.each([
    "tabIndex",
    "readOnly",
    "maxLength",
    "cellSpacing",
    "cellPadding",
    "rowSpan",
    "colSpan",
    "useMap",
    "frameBorder",
    "contentEditable"
], function() {
    jQuery.propFix[ this.toLowerCase() ] = this;
});

propFix this Das Objekt speichert die entsprechende Beziehungstabelle, z. B. die Konvertierung der Klasse in den Klassennamen, und die Prop-Funktion ist für die Verarbeitung dieser Beziehungstabelle verantwortlich.
Das Folgende ist jeweils sehr interessant: durchläuft diese Attribute im Array , korrespondiert dann ihr Kleinbuchstabenformat mit sich selbst und fügt es in propFix ein

Spezialeffektgeschwindigkeit

Wir wissen, dass wir für einige Animationen in jQuery die Implementierungsgeschwindigkeit direkt durch normal, schnell und langsam definieren können. Dies ist im Quellcode so definiert

jQuery.fx.speeds = {
    slow: 600,
    fast: 200,
    // Default speed
    _default: 400
};

Der freche Originalautor hat so etwas getan dies:

var isIE 
//...
jQuery.fx.speeds._default = isIE ? 800 : 400
jQuery.fx.speeds.veryfast = 200;
$('...').fadeIn('veryfast')

Eine besteht darin, eine bedingte Beurteilung über das Standardattribut vorzunehmen, und es gibt auch eine benutzerdefinierte Geschwindigkeit, z. B. „sehr schnell“

.bereit

Ready-Funktion 1.11 Es gibt eine große Lücke zwischen der Version und der 1.4-Version. Ich verstehe viele Dinge in der neuen Version nicht. Schauen wir uns einfach die vier Prüfmethoden an Überlegungen

jQuery.ready.promise = function( obj ) {    //...省略若干        } else if ( document.addEventListener ) {            // 使用addEventListener "DOMContentLoaded" 监听ready事件            document.addEventListener( "DOMContentLoaded", completed, false );            // 备选方案 "load"            window.addEventListener( "load", completed, false );        //如果IE        } else {            // Ensure firing before onload, maybe late but safe also for iframes                        //IE下 attachEvent 的"onreadystatechange"            document.attachEvent( "onreadystatechange", completed );            // A fallback to window.onload, that will always work                        //备选方案onload            window.attachEvent( "onload", completed );            // If IE and not a frame            // continually check to see if the document is ready            var top = false;            try {                top = window.frameElement == null && document.documentElement;            } catch(e) {}            if ( top && top.doScroll ) {                (function doScrollCheck() {                    if ( !jQuery.isReady ) {                        try {                            // Use the trick by Diego Perini                            // http://javascript.nwbox.com/IEContentLoaded/                            top.doScroll("left");                        } catch(e) {                            return setTimeout( doScrollCheck, 50 );                        }                        // detach all dom ready events                        detach();                        // and execute any waiting functions                        jQuery.ready();                    }                })();            }        }    }    return readyList.promise( obj );};
.ready 利用了下面的.promise去做确保载入完成的工作，重点是document.addEventListener( "DOMContentLoaded", completed, false );window.addEventListener( "load", completed, false );document.attachEvent( "onreadystatechange", completed );window.attachEvent( "onload", completed );

>

Von oben beginnend, ist eine Sache, die wir tun, dass unter IE der Dom-Knoten bestimmt, ob es einen Bildlauf gibt, die Elemente Ich verstehe es nicht gut genug. Kurz gesagt, in jQuery wird eine Technik namens Diego Perini verwendet. Weitere Inhalte finden Sie in den Kommentaren.

Selektor

$('#id').find('tag.thing') --- schneller

$('#id tag.thing') - ------ mit sizzle

Der ursprüngliche Autor erwähnte hier ein Problem mit der JQuery-Effizienz. Die obige Methode ist schneller, während die folgende Methode etwas langsamer ist. Einfach ausgedrückt, liegt das an Folgendem Die Methode ruft Sizzle auf, die tatsächlich über Sizzle in den oben genannten Modus konvertiert wird, und der Aufruf von id erfolgt direkt über jQuery.init.

Dies muss erweitert werden. Schauen wir uns an, wie das jQuery-Objekt aussieht wie in 1.11

jQuery = function( selector, context ) {
        // The jQuery object is actually just the init constructor 'enhanced'
        // Need init if jQuery is called (just allow error to be thrown if not included)
        return new jQuery.fn.init( selector, context );
}

Das jQuery-Objekt gibt tatsächlich seinen eigenen

Konstruktor namens init zurück.

// Initialize a jQuery object
    init = jQuery.fn.init = function( selector, context ) {
        var match, elem;
        // HANDLE: $(""), $(null), $(undefined), $(false)
            //超级省略...下略
        // Handle HTML strings
        // HANDLE: $(html) -> $(array)
        // HANDLE: $(html, props)
        // HANDLE: $(#id)
        // HANDLE: $(expr, $(...))
        // HANDLE: $(expr, context)
        // HANDLE: $(DOMElement)
        // HANDLE: $(function)
        return jQuery.makeArray( selector, this );
    };
// Give the init function the jQuery prototype for later instantiation
init.prototype = jQuery.fn;

Von oben Anhand der extrahierten Codekommentare können wir sehen, welche Situationen im eigenen Konstruktor von jq verarbeitet werden, einschließlich der Erfassung von HTML-Tag-Namen und -IDs. Dies bedeutet, dass diese beiden Erfassungen die unterste Ebene darstellen und zusätzlich zu anderen Verarbeitungen von $() alle erforderlich sind andere Funktionen durchlaufen, die nicht so effizient sind wie die obige Verarbeitung.

Gleichzeitig können wir auch sehen, dass der Prototyp von init jQuery.fn zugewiesen ist. Interessierte Freunde können mehr über jQuery-Objekte erfahren.

Die Statusselektoren von jQ, wie zum Beispiel:not,:has,:eq, werden in

Sizzle.selectors.pseudos
gespeichert

Das obige ist der detaillierte Inhalt vonWas sollten Sie über jQuery wissen?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!