Требовать domReady плагин против JQuery $(document).ready()?

Ответ 1

Кажется, что все ключевые моменты уже были поражены, но несколько деталей провалились сквозь трещины. Главным образом:

domReady

Это и плагин, и модуль. Если вы включите его в массив требований w/trailing !, ваш модуль не будет выполняться до тех пор, пока он не "безопасен" для взаимодействия с 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 и $(document).ready()

Оба вынюхивают, будет ли/когда DOM готов по существу таким же образом.

Попытайтесь стрелять в jQuery в неподходящее время

jQuery будет запускать любой готовый обратный вызов, даже если DOM загружается до того, как выполняется jQuery (ваш код не должен заботиться о том, что происходит в первую очередь.).

Ответ 2

Попытка ответить на ваш основной вопрос:

Почему requirejs предоставляет плагин domReady, когда мы можем иметь jquery $(document).ready();?

На самом деле они делают две разные вещи. RequireJS 'domReady означает, что этот модуль требует, чтобы DOM был полностью загружен до его запуска (и поэтому его можно найти в любом количестве модулей в вашем приложении, если вы этого желаете), в то время как $(document).ready() вместо этого отключает его функции обратного вызова, когда DOM загружается.

Разница может казаться тонкой, но подумайте об этом: у меня есть модуль, который каким-то образом должен быть связан с DOM, поэтому я могу либо зависеть от domReady, либо связывать его с временем определения модуля, либо указывать a $(document).ready() в конце его с обратным вызовом функции init для модуля. Я бы назвал первый подход чище.

Между тем, если у меня есть событие, которое должно произойти правильно, так как DOM готов, событие $(document).ready() было бы go-to, поскольку это, в частности, не зависит от того, что RequireJS выполняется, загружая модули, при условии, что зависимости кода, из которого вы его вызываете.

Также стоит учитывать, что вы не обязательно используете RequireJS с jQuery. Любой библиотечный модуль, который нуждается в доступе DOM (но не полагается на jQuery), по-прежнему будет полезен с помощью domReady.

Ответ 3

Отвечая на ваши пули в порядке появления:

• Они оба выполняют одно и то же
• Если у вас есть оговорки о jquery по любой причине, используйте domReady
• Правильно, поэтому просто используйте jQuery
• Поскольку не все используют jQuery
• Я согласен, просто используйте jQuery
• Плагины по определению 'feed a need'.
• Cross Browser ajax - это не вещь. Перекрестный домен? Вероятно, есть, и если нет, тогда нет необходимости кормить.
• -, -, - Ok

Когда дело доходит до этого, вы слишком задумываетесь об этом. Это механизм для запуска javascript на domReady. Если у вас не было jQuery, я бы отстаивал плагин domReady. Поскольку у вас есть jQuery, не загружайте больше скриптов, чтобы сделать что-то, что уже доступно.

Обновление Clarity

Плагин domReady собирает функции для вызова, когда документ "готов". Если он уже загружен, они выполняются немедленно.

JQuery собирает функции и связывает отложенный объект, чтобы dom был "готов". Когда dom будет готов, отложенный объект будет разрешен, и функции будут срабатывать. Если dom уже "готов", отложенные будут уже решены, поэтому функция будет выполняться немедленно.

Это означает, что эффективно они делают то же самое.

Ответ 4

После некоторых экспериментов с requirejs с несколькими модулями я предлагаю использовать domReady.

Я заметил, что функция, связанная с $(document).ready(...), не вызывается, когда несколько модулей загружаются requirejs. Я подозреваю, что dom готовится до того, как выполняется весь код requirejs, и обработчик обратного вызова 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.');
    });
});

Ответ 5

Я обнаружил, что я делаю это как часть основной записи, так что всем моим 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');
        });
    });
});