У чому різниця між цими функціями, готовими до jQuery?

76

в чому різниця між

$(function(){

});

і

$(document).ready(function() { 

});

jquery

— Starx
джерело

1

жоден. або, принаймні, про це йдеться в посібнику.

— falstro

7

Ви можете прочитати перше як "викликати функцію з назвою $ і передати їй визначену функцію для виконання". $ існує посилання на jQuery, який виконуватиме функцію, яку ви йому надали, коли вона буде готова. Другий буде читатись як "створити з документа об'єкт jQuery і приєднати до нього обробник подій, який виконує функцію, яку ви йому надали, коли вона запускається подією готовості".

— kontur

Дивіться мою відповідь нижче: IE9 розглядає їх по-різному.

— Will Lanni

можливий дублікат Що таке jQuery (документ) проти $ (документ)

— JasonMArcher

57

Нічого взагалі.

Ця функція поводиться так само, як $ (document) .ready (), оскільки вона повинна використовуватися для обтікання інших $ ()

Ви можете побачити це у вихідному коді :

rootjQuery = jQuery(document);

...

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

— Шлаки
джерело

39

Існує різниця, $ (function () {}) є менш читабельним (принаймні для мого мозку).

— Росді Касім

3

Погодьтеся з Росді - один трохи виразніше висловлюється про те, що він насправді робить, інший - трохи більш лаконічний. Мені більше подобається виразна версія, я вважаю, що вона дещо менш ефективна: jsperf.com/ready-callback-function-vs-document-ready-function/4

— Jon z

Також узгоджується із зауваженням: саме така відсутність виразності у скороченому варіанті спричиняє це таке популярне питання.

— natchiketa

1

Починаючи з jQuery 3.0, рекомендується лише $(function() {})синтаксис; інші синтаксиси все ще працюють, але застаріли. Дивіться api.jquery.com/ready

— мідна мавпа

Не згоден, різниця є. Я спробував точно ту саму функцію як перед, так і без (document).readyфункції, а також, async правильно завантажив функціональну змінну. Без, завантажуються лише початкові значення змінної, ніколи не даючи нових значень асинхронізації. Схоже, це впливає на час, принаймні наopera

— джим

16

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

З джерела

Виклик $(document).ready(selector)економить декілька операторів if.

Хоча jQuery робить $(document)внутрішній кеш, що може зробити $(f)швидше.

Бенчмарк

— Райнос
джерело

3

Якщо ми говоримо про такий рівень мікро-оптимізації, ви можете розглянути додаткові 11 байтів, необхідних для передачі явної версії ...

— lonesomeday

@lonesomeday Ну це лише 9 байт. $(d).ready(f)проти$(f)

— Райнос 03.03.11

1

Правда, але майте на увазі, що мій вищезазначений коментар мається на меті з гумором!

— одинокий день

@Raynos Але тоді потрібно покласти var d = document;зверху або покласти всередину (function(d) {і })(document);. : P

— nyuszika7h

@ Nyuszika7H будь-який мініфікований код вже єd = document, w = window

— Райнос,

10

Обидва вони рівнозначні, перша - це скорочена форма.

— Розбите скло
джерело

1

Ти впевнений? Перший чекає завантаження DOM?

— Клаус Бисков Педерсен

Класно, просто хотів переконатися. +1

— Клаус Бисков Педерсен

7

$ (function () {}) - це короткий шлях до готового дому

Функція, передана як аргумент конструктору jQuery, прив'язана до події готовності до документа.

— Алі Хабібзаде
джерело

7

Пропоную вам прочитати це . Як ти бачиш

Усі три наступні синтаксиси еквівалентні:

$(document).ready(handler)

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

$(handler)

Тож це залежить від вас і від того, що вам більше подобається.

— фолівейра
джерело

3

$().ready()не працюватиме в jQuery 1.4+. $()повертає порожній вибір, а не документ, за цих обставин.

— одинокий день

3

@lonesomeday Ось чому перед цим є (це не рекомендується) .

— foliveira 03.03.11

7

Ці два рівнозначні: використовуйте будь-яку форму, яка вам подобається.

Тим не менш, я особисто завжди використовую розширену форму $(document).ready(function(){});з тієї простої причини, що цілком очевидно, що робить код. Приблизна ідея полягає в "самодокументування коду". Будь-хто, хто прийде до коду пізніше, відразу побачить, що код буде запущений на події document' ready. За допомогою короткої форми ви повинні покладатися на читача вашого коду, який розуміє значення.

— самотнього дня
джерело

6

Ми стикалися з ситуаціями, коли IE9 не запускає функції в межах $ (function () {}); таким же чином або часом, як $ (document) .ready (function () {});

Випуск підняв нам голову, особливо зчитуючи інформацію із рядка запиту, обробляючи та відображаючи цю інформацію на екрані або використовуючи її для обробки форми. IE9 обробляв би інформацію, як тільки вона була кешована за допомогою $ (function (), і користувач оновив сторінку. Але при першому запуску нічого не працювало правильно. Однак, як тільки ми перейшли з $ (function () {}); на $ ( документ) .ready (), проблема була виправлена. Ми НІЧОГО не змінили.

Я з нетерпінням чекаю дня, коли мені не доведеться тестувати на IE9 і нижче.

— Уілл Ланні
джерело

1

document.ready не підключений до однієї і тієї ж "рідної" події для всіх браузерів ... ви можете отримати одне з таких: [document.DOMContentLoaded] або [window.load] або [document.onreadystatechange]. Я вважаю, що саме в цьому причина, чому ви виконуєте іншу дію в IE, я вважаю (без перевірки), що $ (document) .ready (...) не підключений до тієї самої власної події DOM, ніж $ (function () {} )

— лисиця

Я пережив це на opera . Я підтримав вашу відповідь, тому що у мене була така сама проблема. (використовуючи jquery 3.5)

— jimh

5

Вони фактично однакові. Без різниці.

Це рідний шлях.

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

І це скорочення для попереднього.

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

Вихідний код jQuery

— nyuszika7h
джерело

Існує коментар до цієї теми - stackoverflow.com/questions/7975093/… - що використання скороченого тексту може TypeError: 'undefined' is not a functionіноді призводити до помилок.

— crmpicco

@crmpicco За винятком того, що згадується у цій темі $(document), ви, мабуть, маєте на увазі $скорочення для jQuery.

— nyuszika7h

2

Я використовую, $(function() {});тому що він коротший. Наскільки мені відомо, немає різниці між двома способами це зробити.

— Річард Далтон
джерело