В чём разница обёрток кода jQuery?

Question

[Максимка]

Я не так давно начал изучать JS, и когда читаю код разбирающихся людей, сталкиваюсь с двумя вариантами обёрток кода jQuery.

Первый вариант

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

что, как я знаю, является аналогом для

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

И второй:

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

Объясните, пожалуйста, чем второй вариант отличается от первого, т.е в чём его суть?

Answer 1

[Сергей Протько]

выходит как-то так.

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

1-ый вариант - когда нужно что бы код выполнялся только тогда, когда у нас готово DOM дерево. То есть документ сам догрузился и браузер завершил разбор дерева элементов. Так мы можем быть уверены что по нашему селектору нам вернут реально все доступные элементы и нету такого что что-то еще не догрузилось. Собственно $(function() {}) это полный аналог $(document).ready.

2-ой вариант является хорошей практикой для ограничения области видимости. То есть ваш код работает только с теми объектами, которые передали в замыкания. Профит в том, что можно безболезненно подменять переменные. Скажем передавать jQuery другой версии или что-то в этом духе и при этом у нас нету необходимости менять хоть что-то внутри замыкания. Собственно об этом уже много раз спрашивалось и отвечалось

Comments

[Евгений Петров]

Ну, глобальный контекст в замыкания-то попадёт по-любому.

Answer 2

[Евгений Петров]

Первый — запуск кода после события DOMContentLoaded. Это значит, что DOM построен и можно безопасно начинать траверс.

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

(function () {
	var test = 7;
})();
console.log(window.test); //undefined

Использование IIFE прекрасно подходит для паттерна «Модуль»

var myObject = function () {
	var test = 7; // Приватная переменная

	return {
		test: function (a) {
			console.log(a * test);
		}
	};
}();

myObject.test(5); // 35

Answer 3

[Сергей]

Вторая функция выполняется, когда объектная модель (DOM) готова к использованию, мол когдадокумент загружен и готов- делаем. Первая - в том же случае, т.к. The ready() method может быть применен только к одному данному документу, поэтому селектор не обязателен.

Третья - то же самое в принципе, т.к. $ - это функция, если не передать в нее параметры (селекторы), то она вернет объект готового документа.

Что при этом будет быстрее - хз.
Вообще я с javascript и Jquery не очень дружу, поэтому могу ошибаться. Думаю, надо гуглить в сторону функции $