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

Question 1

Was ist der Unterschied zwischen

$(function(){

});

und

$(document).ready(function() { 

});

Question 2

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 );
}

Question 3

} 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

Question 4

Beide sind gleichwertig, die erste ist eine Kurzform.

Question 5

$ (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.

Question 6

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.

Question 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.

Question 8

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

Question 9

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.

Question 10

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

Answer 1

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

Answer 2

1

keiner. oder zumindest steht es im Handbuch.

Falstro

Answer 3

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

Answer 4

Siehe meine Antwort unten: IE9 behandelt sie anders.

Will Lanni

Answer 5

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

JasonMArcher

Answer 6

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

Answer 7

39

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

Rosdi Kasim

Answer 8

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

Answer 9

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

Answer 10

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

Answer 11

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

Answer 12

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

Answer 13

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

Raynos

Answer 14

1

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

einsamer

Answer 15

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

nyuszika7h

Answer 16

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

Raynos

Answer 17

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

Answer 18

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

Klaus Byskov Pedersen

Answer 19

Cool, wollte nur sicher gehen. +1

Klaus Byskov Pedersen

Answer 20

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

Answer 21

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

Answer 22

3

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

einsamer

Answer 23

3

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

Foliveira

Answer 24

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.

Answer 25

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

Answer 26

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

Answer 27

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

Nyuszika7h

Answer 28

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.

Answer 29

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

Answer 30

2

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

Richard Dalton
quelle

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

Antworten: