Шаблон Модуль в javascript
Анонимные функции - замечательная функциональность, доступная 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.