Requirejs domReady плагін проти Jquery $ (документ) .ready ()?

Я використовую RequireJS і мені потрібно ініціалізувати щось готове до DOM. Тепер RequireJS надає domReadyплагін , але у нас вже є jQuery $(document).ready(), який мені доступний, оскільки мені потрібна jQuery.

Тож у мене є два варіанти:

1. Використовуйте domReadyплагін:

   require(['domReady'], function (domReady) {
       domReady(function () {
           // Do my stuff here...
       });
   });
   

2. Використання $(document).ready():

   $(document).ready(function() {
       // Do my stuff here...
   });
   

Яку вибрати, і чому?

Обидва варіанти, здається, працюють як очікувалося. Я не впевнений у такому jQuery, тому що RequireJS робить свою магію; тобто, оскільки RequireJS динамічно додаватиме сценарії, я переживаю, що DOM може виникнути перед завантаженням усіх динамічно запитуваних сценаріїв. Тоді як RequireJS додасть тягар на додатковий JS саме domReadyтоді, коли у мене вже є jQuery.

Запитання

• Чому RequireJS надає domReadyплагін, коли ми можемо мати jQuery $(document).ready();? Я не бачу жодної переваги, включаючи іншу залежність.
• Якщо його просто для годування потреби, то чому б не надати його для крос-браузера AJAX?

Наскільки мені відомо, модуль, який вимагає domReady, не буде витягнутий або виконаний після того, як документ буде готовий, і ви можете зробити те саме, що вимагає і jQuery:

require(['jQuery'], function ($) {
    $(document).ready(function () {
        // Do my stuff here...
    });
});

Щоб бути більш зрозумілим у моєму питанні: в чому різниця між необхідністю domReadyабо jQuery?

Здається, всі ключові моменти вже потрапили, але декілька деталей провалилося через щілини. В основному:

domReady

Це і плагін, і модуль. Якщо ви включите його до масиву вимог з / за трейлінгу, !ваш модуль не буде виконуватись, поки не буде "безпечно" взаємодіяти з DOM:

define(['domReady!'], function () {
    console.info('The DOM is ready before I happen');
});

Зауважте, що завантаження та виконання різні; ви хочете, щоб усі ваші файли завантажилися якнайшвидше, це виконання вмісту залежно від часу.

Якщо ви опустите це !, то це просто звичайний модуль, який буває функцією, який може приймати зворотний виклик, який не буде виконуватися до того, як DOM буде безпечно взаємодіяти з:

define(['domReady'], function (domReady) {
    domReady(function () {
        console.info('The DOM is ready before I happen');
    });
    console.info('The DOM might not be ready before I happen');        
});

Перевага при використанні domReady в якості плагіна

Код, який залежить від модуля, від якого залежить, domReady!має дуже істотну перевагу: не потрібно чекати, коли DOM буде готовий!

Скажіть, що у нас є код коду, A, що залежить від модуля, B, від якого залежить domReady!. Модуль B не закінчить завантаження до того, як DOM буде готовий. У свою чергу, A не буде працювати до того, як B завантажиться.

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

Крім того, це означає, що domReady!користується тією ж перевагою перед $(document).ready().

Повторіть відмінності між domReady і $ (документ) .ready ()

Обидва нюхають, чи / коли DOM готовий фактично однаково.

Повторно побоюйтеся стріляти jQuery в неправильний час

jQuery запустить будь-який готовий зворотний дзвінок, навіть якщо DOM завантажується до того, як зробить jQuery (ваш код не має значення, що відбувається спочатку.)

Спроба відповісти на ваше головне питання:

Чому requirejsнадається domReadyплагін, коли ми можемо мати jquery's $(document).ready();?

Вони роблять дві різні речі, насправді. Залежність RequireJS domReadyозначає, що цей модуль вимагає, щоб DOM був повністю завантажений перед його запуском (і тому його можна знайти в будь-якій кількості модулів у вашій програмі, якщо ви цього хочете), а $(document).ready()замість цього вимикає свої функції зворотного виклику, коли DOM є зроблено завантаження.

Різниця може здатися тонкою, але подумайте про це: у мене є модуль, який потрібно якимось чином з'єднати з DOM, тому я можу або залежати, domReadyі з'єднати його під час визначення модуля, або відкласти його в $(document).ready()кінці із зворотним викликом до функції init для модуля. Я б назвав перший підхід чистішим.

Тим часом, якщо у мене є подія, яка повинна відбутися правильно, коли DOM буде готовий, $(document).ready()подія стане передумовою, оскільки це не залежить особливо від того, що RequireJS виконує завантаження модулів за умови залежності коду, який ви закликаючи його з зустрічаються.

Також варто врахувати, що не обов'язково використовувати RequireJS з jQuery. Будь-який модуль бібліотеки, який потребує доступу до DOM (але не покладається на jQuery), все-таки буде корисний при використанні domReady.

Відповідаючи на кулі за порядком зовнішності:

• Вони обидва роблять те саме
• Якщо у вас є застереження щодо jquery з будь-якої причини, тоді використовуйте domReady
• Правильно, тому просто використовуйте jQuery
• Тому що не всі використовують jQuery
• Я згоден, просто використовуйте jQuery
• Плагіни за визначенням "годувати потребу".
• Перехресний аякс - це не річ. Перехресний домен? Мабуть, є, а якщо немає, то годувати не потрібно.
• , -, -, - Гаразд

Коли справа доходить до цього, ви це передумуєте. Це механізм виконання javascript на domReady. Якщо у вас не було jQuery, я б виступав за плагін domReady. Оскільки у вас є jQuery, тоді не завантажуйте більше сценаріїв, щоб зробити те, що вже є.

Оновлення ясності

Плагін domReady збирає функції для виклику, коли документ "готовий". Якщо він уже завантажений, вони виконують негайно.

JQuery збирає функції та прив'язує відкладений об'єкт до того, що домівка готова. Коли dom буде готовий, відкладений об'єкт буде вирішений і функції будуть активовано. Якщо dom вже "готовий", відкладене вже буде вирішено, тому функція буде виконуватися негайно.

Це означає, що ефективно вони роблять точно те саме.

Після деяких експериментів з Requjs з декількома модулями, я пропоную використовувати domReady .

Я помітив, що функція, пов'язана з $ (document) .ready (...) , не викликається, коли кілька модулів завантажуються Requjs. Я підозрюю, що dom готується до того, як буде виконаний весь код Requjs, і буде викликано обробник зворотного виклику jquery, перш ніж він зв'язаний з визначеною користувачем функцією, тобто в коді основного модуля.

require(['jquery',
    'underscore',
    'text!some_template.html',
    './my_module_1',
    './my_module_2',
    'domReady',
    'other_dependency_1',
    'other_dependency_2'
    ], function($, _, someTemplate, myModule1, myModule2, domReady) {

    $(document).ready(function() {
        console.info('This might never be executed.'); 
        console.info('Dom might get ready before requirejs would load modules.');
    });

    domReady(function () {
        console.info('This runs when the dom gets ready and modules are loaded.');
    });
});

Я виявив, що я роблю це як частину основного запису, так що всі мої JavaScript гарантують, що DOM готовий і jquery завантажений. Не впевнений, наскільки це здорово, тому ми вітаємо будь-які відгуки, але ось мій main.js:

require(['domReady!'], function(domReady){
    console.log('dom is ready');
    require(['jquery', 'bootstrap'], function(){
        console.log('jquery loaded');
        require(['app'], function(app){
            console.log('app loaded');
        });
    });
});