Блог о программировании

Шаблон Модуль в javascript

Категория: Javascript
 14 мая 2016 г. 12:31

Анонимные функции - замечательная функциональность, доступная js-разработчику, которая упрощает реализацию и улучшает читаемость огромного количества кода. Также анонимные функции лежат в основе замыканий, с помощью которых можно делать весьма занимательные вещи. Одной из крайне полезных свойств замыканий является то, что все, что помещено внутри замыкания - сокрыто от внешнего окружения, другими словами достигается инкапсуляция кода. А это, в свою очередь, самое необходимое для создания собственной модульной системы на js.


Как выглядит?

В общем случае код модуля выглядит так:

;(function () {
	//тут код модуля
})();

Сразу пояснение: символ ; в начале кода необходим для предотвращения возможной ошибки. Если вдруг случится так, что при минификации нескольких js-файлов были объединены в один, и в предыдущем файле программист не поставил точку с запятой в конце своего кода, то получился ошибка. То есть, в ситуации, когда первый файл a.js содержит:

var simple = 2

а второй файл b.js содержит код модуля:

//в начале нет ;
(function () {
	//тут код модуля
})();

и после объединения получится:

var simple = 2
//в начале нет ;
(function () {
	//тут код модуля
})();

То при запуске данного кода получится ошибка из-за отсутствующей точки с запятой. Интерпретатор js-кода будет видеть такой код:

var simple = 2(function () {})(); // вернет TypeError: 2 is not a function

и попытается вызвать 2 как функцию, что и приведет к ошибке. В случае, если бы ; стояла перед модулем - этого бы не было:

var simple = 2;(function () {})(); // undefined - все нормально

Вот такая защита от дурака.


Использование

Лучше всего понимается на примерах. Пример ниже четко показывает обособленность переменных внутри модуля(инкапсуляция):

var message = "Привет, я из глобального контекста!";
console.log(message); // выведет: Привет, я из глобального контекста!
;(function () {
	console.log(message); // выведет: undefined
	var message = "Привет, я из модуля!";
	console.log(message); // выведет: Привет, я из модуля!
})();
console.log(message); // выведет: Привет, я из глобального контекста!

Также результат выполнения модуля можно экспортировать в глобальный контекст. Например, ниже будет экспортирована функция с переменной, недоступной снаружи:

var showMessage = (function () {
	var message = "Привет, я из модуля!";

	return function () {
		alert(message);
	}
})();
showMessage();

Вот и получается, что хотя модуль всего-лишь функция обертка, но как много значит для разработки на js.

В качестве примера использования этого подхода для создания модуля можно привести самую известную библиотеку - jQuery.

Поделиться статьей

Оставить комментарий