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 );
>
$('#id tag.thing') - ------ mit sizzle
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 ); }
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;
Gleichzeitig können wir auch sehen, dass der Prototyp von init jQuery.fn zugewiesen ist. Interessierte Freunde können mehr über jQuery-Objekte erfahren.
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!