Was ist der Unterschied zwischen diesen jQuery-fähigen Funktionen?

76

Was ist der Unterschied zwischen

$(function(){

});

und

$(document).ready(function() { 

});

jquery

— Starx
quelle

1

keiner. oder zumindest steht es im Handbuch.

— Falstro

6

Sie können die erste als "eine Funktion namens $ aufrufen und ihr die definierte auszuführende Funktion übergeben" lesen. $ dort bezieht sich auf jQuery, das die Funktion ausführt, die Sie ihm gegeben haben, wenn es bereit ist. Die zweite lautet: "Erstellen Sie ein jQuery-Objekt aus einem Dokument und fügen Sie einen Ereignislistener hinzu, der die Funktion ausführt, die Sie ihm gegeben haben, als es durch das Ereignis ready ausgelöst wurde."

— Kontur

Siehe meine Antwort unten: IE9 behandelt sie anders.

— Will Lanni

Mögliches Duplikat von Was ist jQuery (Dokument) vs. $ (Dokument)

— JasonMArcher

58

Nichts wie auch immer.

Diese Funktion verhält sich wie $ (document) .ready (), da sie zum Umschließen anderer $ () verwendet werden sollte.

Sie können dies im Quellcode sehen :

rootjQuery = jQuery(document);

...

} else if ( jQuery.isFunction( selector ) ) {
    return rootjQuery.ready( selector );
}

— SLaks
quelle

39

Es gibt einen Unterschied, $ (function () {}) ist weniger lesbar (zumindest für mein Gehirn).

— Rosdi Kasim

3

Stimmen Sie mit Rosdi überein - man ist etwas ausdrucksvoller darüber, was es tatsächlich tut, man ist etwas knapper. Ich bevorzuge die ausdrucksstarke Version, dachte, sie ist etwas weniger performant: jsperf.com/ready-callback-function-vs-document-ready-function/4

— Jon z

Auch in Übereinstimmung mit einer Beobachtung: Es ist dieser Mangel an Ausdruckskraft in der Kurzfassung, der dazu führt, dass dies eine so beliebte Frage ist.

— Natchiketa

1

Ab jQuery 3.0 wird nur die $(function() {})Syntax empfohlen. Die anderen Syntaxen funktionieren weiterhin, sind jedoch veraltet. Siehe api.jquery.com/ready

— Messingaffe

16

} else if (jQuery.isFunction(selector)) {
    return rootjQuery.ready(selector);
}

Aus der Quelle

Beim Aufrufen werden $(document).ready(selector)einige if-Anweisungen gespeichert.

Obwohl jQuery $(document)intern zwischenspeichert, kann dies zu einer $(f)Beschleunigung führen.

Benchmarked

— Raynos
quelle

3

Wenn wir über diese Stufe der Mikrooptimierung sprechen , sollten Sie die zusätzlichen 11 Bytes berücksichtigen, die zum Übertragen der expliziten Version erforderlich sind ...

— einsamer

@lonesomeday Nun, es sind nur 9 Bytes. $(d).ready(f)vs$(f)

— Raynos

1

Stimmt, aber bitte beachten Sie, dass mein obiger Kommentar etwas humorvoll gemeint ist!

— einsamer

@ Raynos Aber dann musst du var d = document;oben setzen oder es hineinlegen (function(d) {und })(document);. : P

— nyuszika7h

@ Nyuszika7H jeder minimierte Code hat bereitsd = document, w = window

— Raynos

10

Beide sind gleichwertig, die erste ist eine Kurzform.

— Glassplitter
quelle

Bist du sicher? Wartet der erste auf das Laden des DOM?

— Klaus Byskov Pedersen

Cool, wollte nur sicher gehen. +1

— Klaus Byskov Pedersen

7

$ (function () {}) ist eine Abkürzung für den Dom Ready

Eine Funktion, die als Argument an den jQuery-Konstruktor übergeben wird, ist an das Dokument Ready-Ereignis gebunden.

— Ali Habibzadeh
quelle

7

Ich schlage vor, Sie lesen dies . Wie du siehst

Alle drei folgenden Syntaxen sind gleichwertig:

$(document).ready(handler)

$().ready(handler) (this is not recommended)

$(handler)

Es liegt also an Ihnen und an dem, was Sie bevorzugen.

— foliveira
quelle

3

$().ready()funktioniert nicht in jQuery 1.4+. $()Gibt unter diesen Umständen eine leere Auswahl anstelle des Dokuments zurück.

— einsamer

3

@lonesomeday Deshalb steht ein (dies wird nicht empfohlen) davor.

— Foliveira

7

Die beiden sind genau gleichwertig: Verwenden Sie eine beliebige Form.

Das heißt, ich persönlich immer das erweiterte Formular $(document).ready(function(){});aus dem einfachen Grund , dass es ganz offensichtlich ist , was der Code tut. Die ungefähre Idee ist die des "selbstdokumentierenden Codes". Wer an den Code kommt später wird sofort sehen , dass der Code auf dem ausgeführt werden soll document‚s readyEreignis. Bei der Kurzform müssen Sie sich darauf verlassen, dass der Leser Ihres Codes die Bedeutung versteht.

— einsamer Tag
quelle

5

Sie sind praktisch gleich. Kein Unterschied.

Dies ist der native Weg.

$(document).ready(function() {
    // code
});

Und dies ist eine Abkürzung für die vorherige.

$(function() {
    // code
});

jQuery-Quellcode

— nyuszika7h
quelle

Es gibt einen Kommentar zu diesem Thread - stackoverflow.com/questions/7975093/… -, dass die Verwendung der Kurzschrift TypeError: 'undefined' is not a functiongelegentlich zu Fehlern führen kann.

— Crmpicco

@crmpicco Außer dass Thread erwähnt $(document), also meinst du wahrscheinlich die $Abkürzung für jQuery.

— Nyuszika7h

5

Wir sind auf Situationen gestoßen, in denen IE9 keine Funktionen innerhalb von $ (function () {}) ausführt. auf die gleiche Weise oder zum gleichen Zeitpunkt wie $ (document) .ready (function () {});

Das Problem hat sich speziell für uns durch das Lesen von Informationen aus einer Abfragezeichenfolge und das Verarbeiten und Anzeigen dieser Informationen auf dem Bildschirm oder für die Verarbeitung eines Formulars entwickelt. IE9 würde die Informationen verarbeiten, sobald sie mit $ (function () zwischengespeichert wurden und ein Benutzer die Seite aktualisiert hat. Beim ersten Start funktionierte jedoch nichts richtig. Sobald wir jedoch von $ (function () {}) zu $ ( document) .ready (), das Problem wurde behoben. Wir haben NICHTS anderes geändert.

Ich freue mich sehr auf den Tag, an dem ich nicht auf IE9 und niedriger testen muss.

— Will Lanni
quelle

1

document.ready ist nicht für alle Browser mit demselben "nativen" Ereignis verbunden. Sie können eines der folgenden Ereignisse abrufen: [document.DOMContentLoaded] oder [window.load] oder [document.onreadystatechange]. Ich nehme an, das ist der Grund, warum Sie im IE eine andere Aktion erhalten. Ich nehme an (ohne Überprüfung), dass das $ (Dokument) .ready (...) nicht mit demselben nativen DOM-Ereignis verbunden ist wie $ (function () {} )

— Foxontherock

2

Ich benutze, $(function() {});weil es kürzer ist. Soweit ich weiß, gibt es keinen Unterschied zwischen den beiden Methoden.

— Richard Dalton
quelle