Чому ми використовуємо “({})” у jQuery?


77

Чому ми використовуємо ({ }) ?

Це делегат?

Що означає використовувати цей синтаксис?

Що ми цим обгортаємо?

Наприклад:

$.ajaxSetup ({ // <-- THIS
    error: fError,
    compelete: fComp,
    success: fSucc
}); // <-- AND THIS

1
stackoverflow.com/questions/1509535/javascript-false-and-false/... - це, здавалося б, нерелевантне питання, але, маючи відповідну відповідь на одне, про що ви можете спотикатися.
Crescent Fresh

Відповіді:


158

{}є позначенням об'єкта в JavaScript. Наприклад:

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

У цьому випадку ви передаєте плагіну об’єкт, що містить ваші налаштування. Плагін може мати справу з цим як з об’єктом, незалежно від того, на що він посилається, наприклад:

settings.option1 //the option you passed in.

Звичайно, у нього набагато більше застосувань, але це найпоширеніший приклад у jQuery. Те ж саме вірно і для .animate(), $.ajax(), .css()функції і т.д. Все , що має властивість , як правило , використовує цей формат.


За запитом, деякі інші приклади:
Будь-який об’єкт всередині переданого об’єкта може бути також функцією, а не лише властивостями, наприклад:

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

Це встановить фокусну подію цього входу на сповіщення. Іншим є розширення об’єкта, додавання до нього властивостей, наприклад:

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

Зараз personмаєlast_name власність. Це часто використовується плагінами також для того, щоб взяти налаштування за замовчуванням, а потім об’єднати всі передані вами параметри, перезаписавши будь-які вказані вами параметри, використовуючи за замовчуванням для решти.

Чому ми його використовуємо? Ну ... так працює JavaScript, і в дусі jQuery: це надзвичайно стислий та гнучкий спосіб передачі інформації.


4
Я б сказав, що "чому" це дозволяє вам легко передавати змінну кількість аргументів функції. (Це фраза, яка для мене є найбільш сенсовою.)
Аніка Бекстрем

5
Дуже хороша відповідь, але якщо ви додасте якийсь приклад про інші звичаї, це буде дуже добре.
uzay95

@ uzay95 - Додано ще кілька прикладів з маківки, там є багато справ для використання.
Нік Кравер

1
Дуже дуже дуже хороша відповідь ... Я багато чого навчився. Дуже дякую.
uzay95

приклад з focusin не працює, або я не можу змусити його працювати?
Sotiris

10

Я маю на увазі, чим ми його обгортаємо?

Ні. Це нотація об’єкта JavaScript (JSON). У вашому прикладі ви ajaxSetupвикликаєте функцію з об'єктом, властивості якого:

error: fError,
compelete: fComp,
success: fSucc

Наприклад, для створення об'єкта "користувач" ви можете написати:

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

А потім використовуйте один з його атрибутів:

alert( a.name );

Шоу: Оскар

Те, що ви бачите там (у своєму коді), - це створення об’єкта та передача його як аргументу.

Це було б еквівалентно:

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

$.ajaxSetup( setUpInfo );

18
Насправді це не JSON, який вимагає цитування імен членів. Звичайно, це цілком дійсний Javascript. Крім того, ваш об'єкт користувача повинен використовувати :замість=
friedo

2
Це буквальна нотація об’єкта JavaScript, але не JSON. Як каже json.org - "JSON базується на підмножині мови програмування JavaScript. JSON - це текстовий формат, який повністю не залежить від мови, але використовує правила, знайомі програмістам сімейства мов C, включаючи C, C ++, C #, Java, JavaScript, Perl, Python та багато інших "
Russ Cam

7

Це або літерал об’єкта JavaScript, або більш конкретно JSON, коли справа доходить до надсилання параметрів через Ajax. JSON - це підмножина літералів об’єктів JavaScript.

Наприклад:

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

Детальніше про це читайте тут:


6
Точніше було б сказати, що це об’єкт, записаний із синтаксисом буквального об’єкта, ніж „JSON“.
Джиммі Куадра

9
Це літерал об’єкта JavaScript. Це не JSON, оскільки він не відповідає синтаксису JSON (який є підмножиною синтаксису літерального об’єкта JavaScript).
Квентін

6

Питання стосувалося позначення "({})".

У цьому контексті дужки "(...)" після виразу, наприклад $ .ajaxSetup, викликають виклик функції, визначеної виразом.

Вираз усередині дужок (який може бути списком виразів, відокремлених комами) призводить до значення (або списку значень), що є аргументом (аргументами), переданим функції.

Нарешті, коли "{...}" використовується в контексті виразу, він створює об'єкт із заданими властивостями імені-значення. Це схоже на JSON, але в цілому це будь-який юридичний літерал JS-об’єкта.


4

Якщо ви маєте на увазі в цьому контексті:

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

Тоді ( function() {})це анонімна функція. Але без прикладу не можу бути впевненим, що саме це ви маєте на увазі.


Це як функція делегатів, чи не так?
uzay95

2
схожий. анонімна функція - це, по суті, «вбудована функція», яку ви не плануєте повторно використовувати. Ви можете використовувати анонімну функцію скрізь, де очікується делегат. Тому тут це працює. функція click очікує делегата (ви, швидше за все, скористаєтесь функцією делегата, якщо плануєте повторне використання функції в іншому місці або функція насправді не проста)
Armstrongest
Використовуючи наш веб-сайт, ви визнаєте, що прочитали та зрозуміли наші Політику щодо файлів cookie та Політику конфіденційності.
Licensed under cc by-sa 3.0 with attribution required.