Почему мне нужно обернуть код JQuery в литерал функции?

У меня есть следующий код, который работает -

$(function(){
 $('#testbutton').click(function(){
 var checkedValue = $('[name="someRadioGroup"]:radio:checked').val();
 $('#result').html('The radio element with value <tt>' + checkedValue + '</tt> is checked');
 });
});

Я понимаю, что $('# testbutton') извлекает элемент HTML с id testbutton и назначает ему обработчик событий.

Но я не понимаю, почему мне нужно поставить этот код внутри литерала функции?

Если я удаляю $(function(){ (и соответствующий });), он не работает.

Однако другой код может работать, не будучи обернутым в литерал функции. Пример -  alert('Hi there')

В чем разница? Почему предупреждение работает, но оператор присваивания события не работает?

3 ответа

Это не требование.

Вы помещаете свой код в обработчик событий, который вызывается, когда DOM готов.

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

Если ваш код не выполняет выбор DOM, тогда он не нужен. Вот почему ваш alert() работает, потому что ему не нужно извлекать какие-либо элементы.

Альтернативой является это.

<button id="testbutton">click</button>

Это помещает ваш код под все элементы на странице, поэтому они могут быть доступны, когда ваш код работает.

Другой альтернативой является использование обработчика window.onload.

window.onload = function() {
 // your code
};

или с помощью jQuery.

$(window).on("load", function() {
 // your code
});

Это похоже на обработчик DOM ready, за исключением того, что он ожидает загрузки всех ресурсов, например изображений.


$(function(){...}); является сокращением для $(document).ready(function(){...});. Цель этого заключается в том, чтобы не запускать ваш код до тех пор, пока элементы, которые вы намереваетесь работать, не существуют в DOM (как правило, после того, как документ готов.)


На самом базовом уровне что-то из формы (function(){...})() является литералом функции, который выполняется немедленно. Это означает, что вы определили функцию, и вы вызываете ее немедленно.

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

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

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

Это означает, что вы передаете ссылку на фактический объект jQuery, но он известен как $в объеме литерала функции.

licensed under cc by-sa 3.0 with attribution.