Warum verwenden wir "({})" in jQuery?

77

Warum verwenden wir ({ })?

Ist es delegiert?

Was bedeutet es, diese Syntax zu verwenden?

Was wickeln wir damit ein?

Zum Beispiel:

$.ajaxSetup ({ // <-- THIS
    error: fError,
    compelete: fComp,
    success: fSucc
}); // <-- AND THIS
uzay95
quelle
1
stackoverflow.com/questions/1509535/javascript-false-and-false/… ist eine scheinbar irrelevante Frage, aber mit einer relevanten Antwort auf eine Sache, über die Sie möglicherweise stolpern.
Crescent Fresh

Antworten:

158

{}ist die Objektnotation in JavaScript. Zum Beispiel:

$('selector').plugin({ option1: 'value' });

In diesem Fall übergeben Sie ein Objekt mit Ihren Einstellungen an das Plugin. Das Plugin kann dies als Objekt behandeln, unabhängig davon, worauf es verweist, zum Beispiel:

settings.option1 //the option you passed in.

Natürlich hat es viel mehr Verwendungsmöglichkeiten, aber dies ist das häufigste Beispiel in jQuery. Das gleiche gilt für die .animate(), $.ajax(), .css()Funktionen usw. Alles , was Eigenschaften allgemein verwendet dieses Format erfolgt.


Auf Wunsch einige andere Beispiele:
Jedes Objekt innerhalb des übergebenen Objekts kann auch eine Funktion sein, nicht nur Eigenschaften, zum Beispiel:

$("<input>", {
  type: "text",
  focusin: function() { alert("Hi, you focused me!"); }
});    

Dies würde das Fokusereignis dieser Eingabe so einstellen, dass eine Warnung angezeigt wird. Eine andere Möglichkeit besteht darin, ein Objekt zu erweitern und ihm Eigenschaften hinzuzufügen:

var person = { first_name: "John" };
$.extend(person, { last_name: "Smith" });
//equivalent to: 
person.last_name = "Smith";
//or:
person["last_name"] = "Smith";

Jetzt personhat die last_nameEigenschaft. Dies wird häufig auch von Plugins verwendet, um die Standardeinstellungen zu übernehmen und dann alle übergebenen Einstellungen zusammenzuführen, mit den von Ihnen angegebenen Einstellungen zu überschreiben und für den Rest die Standardeinstellungen zu verwenden.

Warum benutzen wir es? Nun ... so funktioniert JavaScript und im jQuery-Sinne: Es ist eine äußerst knappe und flexible Möglichkeit, Informationen weiterzugeben.

Nick Craver
quelle
4
Ich würde sagen, das "Warum" ermöglicht es Ihnen, eine variable Anzahl von Argumenten einfach an eine Funktion zu übergeben. (Das ist die Formulierung, die für mich am sinnvollsten ist.)
Annika Backstrom
5
Sehr gute Antwort, aber wenn Sie ein Beispiel für andere Verwendungen hinzufügen, wird es sehr, sehr gut.
uzay95
@ uzay95 - Ich habe ein paar weitere Beispiele hinzugefügt, es gibt viele Fälle, die ich verwenden kann.
Nick Craver
1
Sehr sehr sehr gute Antwort ... Ich habe viel gelernt. Ich danke dir sehr.
uzay95
Das Beispiel mit Focusin funktioniert nicht oder ich kann es nicht zum Laufen bringen?
Sotiris
10

Ich meine, was verpacken wir?

Nein, das ist die JavaScript-Objektnotation (JSON). In Ihrem Beispiel rufen Sie die Funktion ajaxSetupmit einem Objekt auf, dessen Eigenschaften sind:

error: fError,
compelete: fComp,
success: fSucc

Um beispielsweise ein "Benutzer" -Objekt zu erstellen, können Sie Folgendes schreiben:

user = { 
    "name":"Oscar", 
    "lastName":"Reyes"
};

Und dann verwenden Sie eines seiner Attribute:

alert( a.name );

Shows: Oscar

Was Sie dort (in Ihrem Code) sehen, ist die Erstellung eines Objekts und dessen Übergabe als Argument.

Es wäre gleichbedeutend mit:

var setUpInfo = {
    "error": fError,
    "compelete": fComp,
    "success": fSucc
};  

$.ajaxSetup( setUpInfo );
OscarRyz
quelle
18
Es ist eigentlich nicht JSON, bei dem Mitgliedsnamen in Anführungszeichen gesetzt werden müssen. Es ist natürlich vollkommen gültiges Javascript. Außerdem sollte Ihr Benutzerobjekt :anstelle von=
friedo
2
Es ist die JavaScript-Objektliteralnotation, aber nicht JSON. Wie json.org sagt: "JSON basiert auf einer Teilmenge der JavaScript-Programmiersprache. JSON ist ein Textformat, das vollständig sprachunabhängig ist, jedoch Konventionen verwendet, die Programmierern der C-Sprachfamilie vertraut sind, einschließlich C, C ++, C #, Java, JavaScript, Perl, Python und viele andere "
Russ Cam
7

Es ist entweder ein JavaScript-Objektliteral oder genauer JSON, wenn es darum geht, Parameter über Ajax zu senden. JSON ist eine Teilmenge von JavaScript-Objektliteralen.

Zum Beispiel:

// This is JSON data sent via the Ajax request (JSON is subset of JavaScript object literals)
var json = {id: 1, first_name: "John", last_name: "Smith"};

// This is a JavaScript object literal, it is not used for transfer of data so doesn't need to be JSON
var jsol = {type: 'POST', url: url, data: json};

$.ajax(jsol);

Bitte lesen Sie hier mehr darüber:

Ivo Sabev
quelle
6
Es wäre genauer zu sagen, dass es sich um ein Objekt handelt, das mit Objektliteral-Syntax geschrieben wurde, als "ein JSON".
Jimmy Cuadra
9
Es ist ein JavaScript-Objektliteral. Es ist kein JSON, da es nicht der JSON-Syntax entspricht (eine Teilmenge der JavaScript-Objektliteral-Syntax).
Quentin
6

Die Frage betraf die Notation "({})".

In diesem Zusammenhang wird durch die Klammern "(...)" nach einem Ausdruck wie $ .ajaxSetup die vom Ausdruck angegebene Funktion aufgerufen.

Der Ausdruck in den Klammern (dies kann eine durch Kommas getrennte Liste von Ausdrücken sein) führt zu einem Wert (oder einer Liste von Werten), bei dem es sich um die an die Funktion übergebenen Argumente handelt.

Wenn "{...}" in einem Ausdruckskontext verwendet wird, wird schließlich ein Objekt mit den angegebenen Name-Wert-Eigenschaften erstellt. Dies ist wie JSON, aber im Allgemeinen ist es jedes legale JS-Objektliteral.

dlaliberte
quelle
4

Wenn Sie in diesem Zusammenhang meinen:

$("#theId").click( function() { /* body here */ } );

Dann ( function() {})ist das eine anonyme Funktion. Aber ohne ein Beispiel kann ich nicht sicher sein, ob Sie das meinen.

Armstrongest
quelle
Das ist wie eine Delegatenfunktion, nicht wahr?
uzay95
2
ähnlich. Eine anonyme Funktion ist im Wesentlichen eine "Inline-Funktion", die Sie nicht wiederverwenden möchten. Sie können eine anonyme Funktion überall dort verwenden, wo ein Delegat erwartet wird. Deshalb funktioniert es hier. Die Klickfunktion erwartet einen Delegaten (Sie würden wahrscheinlich eine Delegatenfunktion verwenden, wenn Sie die Funktion an anderer Stelle wiederverwenden möchten oder die Funktion nicht wirklich einfach ist)
Armstrongest