Лучшие методы jQuery в случае $('document').

Ответ 1

Срочно выработанные выражения функций (IIFE)

IIFE - идеальное решение для локальных областей глобальных переменных/свойств и защиты вашей кодовой базы JavaScript от внешних помех (например, сторонних библиотек). Если вы пишете jQuery-код, который будет запускаться во многих разных средах (например, jQuery-плагины), тогда важно использовать IFE для локальной области jQuery, потому что вы не можете предположить, что все используют $to alias jQuery. Вот как вы это сделаете:

   // IIFE - Immediately Invoked Function Expression
  (function($, window, document) {
      // The $ is now locally scoped

      // The rest of your code goes here!

  }(window.jQuery, window, document));
  // The global jQuery object is passed as a parameter

Если вам не нравится прокручивать нижнюю часть исходного файла, чтобы узнать, какие глобальные переменные/свойства вы переходите на ваш IIFE, вы можете сделать это:

   // IIFE - Immediately Invoked Function Expression
  (function(yourcode) {

      // The global jQuery object is passed as a parameter
      yourcode(window.jQuery, window, document);

      }(function($, window, document) {

          // The rest of your code goes here!

      }
  ));

Чтобы узнать больше о IIFE, вы можете прочитать мое сообщение в блоге под названием я Love My IIFE.

Событие с готовностью jQuery

Многие разработчики завершают весь свой код внутри события готовности jQuery следующим образом:

   $("document").ready(function() {
      // The DOM is ready!
      // The rest of your code goes here!
  });

Или более короткая версия:

   $(function() {
      // The DOM is ready!
      // The rest of your code goes here!
  });

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

   // IIFE - Immediately Invoked Function Expression
  (function(yourcode) {

      // The global jQuery object is passed as a parameter
      yourcode(window.jQuery, window, document);

      }(function($, window, document) {

          // The $ is now locally scoped 
          $(function() {

              // The DOM is ready!

          });

          // The rest of your code goes here!

      }
  ));

Этот шаблон позволяет легче отделять вашу логику (с точки зрения дизайна кода), поскольку не все должно быть обернуто внутри одной функции обратного вызова обработчика события. Он также будет улучшать производительность загрузки страниц приложений, так как не все нужно немедленно инициализировать. Отличным примером этого является lazy привязка обработчиков событий DOM, которые не обязательно должны связываться, когда DOM готов.

Адаптировано из моего сообщения в блоге jQuery Best Practices: http://gregfranko.com/blog/jquery-best-practices/

Ответ 2

Единственное различие между вашим кодом и "предлагаемым" подходом - совместимость и, возможно, лучшее сжатие. Не существует различий в скорости.

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

Передача window и document на ваш IIFE позволит JS minifiers преобразовать ваш код в нечто подобное (без пробелов), что дает вам немного лучшее сжатие:

(function(a, b, c) {
    a(c).ready(function() {
        // ...
    });
})(window.jQuery, window, document);

Если вы не используете window и document экстенсивно, я бы просто сделал:

;(function($) {
    $(function() {
        ...
    });
})(jQuery);

Ответ 3

• $(function(){}) эквивалентен $('document').ready(function(){});. Это касается вас, который вы используете, но последний является старшим из двух и более подробным для загрузки.

• Второй подход, который вы указали, - это явная попытка предотвратить глобальные переменные и вводит известные глобальные переменные $, window и document. Это рекомендуется для повышения осведомленности о том, как легко внедряются глобалы, и как можно более "чистая комната" в отношении кода, который мы вводим на страницу. Также обратите внимание, что второй подход не эквивалентен первому, если вы следуете приведенным комментариям. Поскольку $вставляется как аргумент, этот код совместим с другими библиотеками, которые могут захотеть иметь символ $.

В частности, // The rest of the code goes here находится в месте, которое может быть выполнено до того, как документ будет готов или когда это событие будет запущено. Поместите его внутри функции, переданной в $.

Ответ 4

В вашей ссылке есть anwser:

Ниже показано, что

Если вы знаете среды, в которых будет работать ваш код.

Если вы не заботитесь о производительности загрузки страницы.

Если вам не нужны лучшие практики.

 $("document").ready(function() {
    // The DOM is ready!
    // The rest of the code goes here
  });

Но они рекомендуют, лучше использовать, как показано ниже, Если вы не знаете среду, в которой будет работать ваш код, и

Лучшая производительность загрузки страницы

// IIFE - Immediately Invoked Function Expression
  (function($, window, document) {

    // The $ is now locally scoped 

   // Listen for the jQuery ready event on the document
   $(function() {

     // The DOM is ready!

   });

   // The rest of the code goes here!

  }(window.jQuery, window, document));
  // The global jQuery object is passed as a parameter

Ответ 5

Если вы используете $как псевдоним для jQuery, тогда

   $(document).ready(function(){})

совпадает с

  (function($, window, document) {

  // The $ is now locally scoped 

 // Listen for the jQuery ready event on the document
  $(function() {

    // The DOM is ready!

  });

  // The rest of the code goes here!

 }(window.jQuery, window, document));

Как указывалось в более раннем ответе, второй метод изолирует вас от использования $alias свободно для jQuery, поскольку он передает объект jQuery в выраженное функциональное выражение Immediately, которое в основном удерживает переменные и код внутри него частным и не делает загрязняют глобальное пространство имен.

Короче говоря, если вы прибегаете к первому методу и используете другие библиотеки, используя $, вы закончите конфликт.

Ответ 6

В редкой ситуации, когда вам придется работать с более старой версией jQuery (если я правильно помню - pre 1.8.X), всякий раз, когда вы укажете два блока document.ready, только первый будет запущен в IE9.

Теперь это редкая ошибка, которую я испытал один или два раза и которую я не смог воспроизвести, но я подумал, что это стоит отметить.

Ответ 7

На основе документации JQuery:

All three of the following syntaxes are equivalent:

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

http://api.jquery.com/ready/

Ответ 8

Он называется функцией self ivoking или immediately invoked. Это означает, что функция запускается, как только она создается с использованием параметров в конечном наборе скобок.

Прочитайте Javascript Self Invoking Functions и Выражение с немедленной вызывной функцией (IIFE ) будет ясно, где использовать и как использовать эти функции

Ответ 9

Вы можете использовать событие готовности документа, используя jquery, событие происходит, когда документ полностью загружен.

 $(function () {
    setTimeout(function () {
        // your code
    }, 0);
})