JavaScript: Modules

Написание скриптов помимо app.js должно быть модульным. Скрипт должен возвращать объект или функцию, и уже к возвращенному результату будут применяться какие-то действия, например в app.js - вызовы функций, использование переменных и т.д. Оборачивать такие модули следует либо по Universal Module Definition (обертка AMD & Web) либо просто в define.

Рассмотрим пример на классе Animal (файл animal.js).

(function (root, factory) {
	if (typeof define === 'function' && define.amd) {
		define(['jquery'], factory);
	} else {
		root.Animal = factory(root.jQuery);
	}
}(this, function ($) {
	var Animal = function(name) {
		this.name = name;
	};

	Animal.prototype.showName = function() {
		$('#animal-name').text(this.name);
	};

	return Animal;
}));

Обертка позволяет нам как загрузить этот скрипт с помощью amd (requirejs), так и вставить его в head с помощью тега script.

Если у нас есть amd-загрузчик, то определяем зависимость нашего класса Animal от jQuery с помощью define. Обращаем внимание, что jquery написано маленькими буквами, так как в config.js она указывается именно так.

if (typeof define === 'function' && define.amd) {
	define(['jquery'], factory);

Если такого загрузчика нет (т.е. мы подключили файл через тег script), то мы будем встраивать переменную Animal в глобальную область видимости root.Animal. При таком подключении в браузере root - это window. jQuery мы передаем фабрике в качестве аргумента, добиваясь модульности.

} else {
	root.Animal = factory(root.jQuery);
}

Теперь в нашем app.js мы можем написать следующий код для использования модуля Animal:

require(['animal'], function(Animal) {
	var pet = new Animal('Дрозд');
	pet.showName();
});

Стоит помнить, что нигде кроме callback-функции переменная Animal доступна не будет.

Если бы мы подключили файл animal.js через тег script, то в коде мы погли бы избавиться от обертки require и сразу использовать класс Animal, поскольку он уже бы был в window.