Лучшая практика JQuery, используя $(документ). Уже внутри IIFE?

Я смотрю фрагмент кода:

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

Я, хотя IIFE выполняет функции $(document).ready, этот код правильный? или я могу просто удалить $(document).ready и поместить код непосредственно внутри IIFE.

Ответы

Ответ 1

Нет, IIFE не выполняет код в готовом документе.

1. Только в IIFE:

(function($) {
  console.log('logs immediately');
})(jQuery);

Этот код сразу же запускает журналы "logs immediately" без готовности документа.

2. В готовности:

(function($) {
   $(document).ready(function(){
     console.log('logs after ready');
   });
})(jQuery);

Запускает код немедленно и ждет готовности документа и записывает "журналы после готовности".

Это объясняет, что лучше понять:

(function($) {
  console.log('logs immediately');
  $(document).ready(function(){
    console.log('logs after ready');
  });
})(jQuery);

Этот журнал "немедленно регистрируется" на консоли сразу после загрузки окна, но "журналы после завершения" регистрируются только после того, как документ готов.

IIFE не является альтернативой для готовности:

Альтернативой для $(document).ready(function(){}) является:

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

Update

Из jQuery версии 3.0, готовый обработчик изменен.

Рекомендуется только следующая форма готового обработчика.

jQuery(function($) {

});

Готовый обработчик теперь асинхронен.

$(function() {
  console.log("inside handler");
});
console.log("outside handler");

> внешний обработчик

> внутри обработчика

Ответ 2

  • Если вам нужно, чтобы DOM был готов, вам нужно использовать $(function() {/* DOM Manipulations goes here})
  • Если вы хотите избежать столкновения имен какого-либо типа, вы можете обернуть код с помощью IIFE (function($) {/* safely use $ here*/}(jQuery))

И вы можете комбинировать оба подхода:

(function($) {
    /*Do smth that doesn't require DOM to be ready*/

    $(function() {
        /*Do the rest stuff involving DOM manipulations*/
    });

}(jQuery));

Ответ 3

IIFE необходимо создать еще одну область. Если вы удалите IIFE и $, не будет определено (т.е. jQuery.noConflict()) - вы получите сообщение об ошибке. jQuery будет определяться везде, где загружается файл javascript с библиотекой.

Итак, это не лучшая практика jQuery, это лучшая практика javascript.