В чем разница между этими двумя функциями JavaScript?

Question

Я смотрел на то, как работают некоторые плагины jQuery, и видел, как следующее действует как замыкание вокруг всего плагина

$(function(){
    // plugin code here

});

(function($){
    // plugin code here

})(jQuery);

В чем разница между этими двумя?

Answer 1

Первым является определение функции JQuery DOM Ready, а вторым является закрытие функции, которое запускается сразу после анализа и выполняется с объектом jQuery в качестве параметра.

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

Answer 2

Первый - это ярлык для jQuery.ready. Он вызывает функцию, которую вы ей даете, только когда DOM полностью готов к манипулированию (чего обычно не происходит при первом запуске этого скрипта; отсюда и обратный вызов) & mdash; например, когда вы можете безопасно искать элементы по их идентификатору или с помощью селектора CSS, добавлять новые элементы и т. д. и т. д.

Второй запускает функцию немедленно (потенциально до того, как DOM готов к работе) и передает объект jQuery в качестве параметра с именем $. Внутри функции вы можете с уверенностью предположить, что $ ссылается на объект jQuery, тогда как без этого вы не сможете, если вы используете jQuery.noConflict для освобождения $ назад к тому, что раньше это (возможно, Prototype) до загрузки jQuery. Эта техника полезна, когда у вас много кода, написанного с $, но потом вы обнаружите, что должны сосуществовать с Prototype или чем-то еще, что также хочет использовать $. Вы просто помещаете весь свой код в анонимную функцию.

Вы можете сделать обе вещи вместе, если хотите:

jQuery(function($) {
    // Code that uses `$` and expects the DOM to be ready to be
    // manipulated goes here
});