Паттерны JavaScript модулей в Impress для node.js и браузеров

[k12th]

Замечу, что Asynchronous module definition (AMD) и CommonJS не поддерживают склеивание файлов.

AMD поддерживает. Насчет CommonJS не знаю, но 90%, что подобная тулза есть.

[MarcusAurelius]

Согласен, я некорректно выразился, тут нужны пояснения. Сам AMD — это принцип асинхронной модульности, он не предполагает объединения в один файл, но вот для нескольких его основных реализаций, (как require.js и curl.js) есть утилиты, позволяющие объединять файлы. Для CommonJS так же есть uglify.js. Для объединения, конечно же, вокруг каждого файла делается дополнительная обертка, а в нашем случае можно клеить простой конкатенацией файлов. Но при объединении теряется основной смысл асинхронной подгрузки модулей (AMD), т.к. он не столько в защите глобального пространства имен (его можно защитить более простым паттерном, а не целой библиотекой), как в возможности подгружать по требованию, по условию, лениво, динамически и главное — в середине работы страницы, когда уже часть интерфейса загружена и пользователь начал работу, то мы имеем запас времени на подгрузку второй порции скриптов.

[maksimr]

А как у вас зависимости определяются для модуля? (что то я не вижу… ткните пальцем если это описано)

[MarcusAurelius]

Это паттерн для системных глобальных модулей. Например, для драйверов баз данных, конфигов, API-оберток, которые должны быть автоматически видны во всех модулях без дополнительных require. В ноде, например, если его подключить через require('moduleName'), то обращаться к нему можно через глобальную переменную moduleName. Для браузера можно его добавлять через тег script на странице или динамически загружать, добавляя тег script в процессе работы, для этого можно взять вот такую реализацию require для браузеров и добавить в global.js

global.scripts = {};

global.require = function(scripts, callback) {
	var counter=0,
		scriptLoaded = function() {
			counter++;
			this.script.loaded = true;
			global.scripts[script.namespace] = this.script;
			if (counter == scripts.length && callback) callback();
		},
		scriptError = function() {
			counter++;
			delete this.script;
			head.removeChild(this);
			if (counter == scripts.length && callback) callback();
		}
	for (var i=0; i<scripts.length; ++i) {
		var path = scripts[i],
			file = path.replace(/^.*[\\\/]/, ''),
			namespace = file.replace(/\.[^/.]+$/, "");
		if (!global.scripts[namespace]) {
			var script = {"namespace":namespace,"file":file,"url":path,"element":null,"loaded":false};
			script.element = document.createElement('script');
			script.element.script = script;
			addEvent(script.element, 'load', scriptLoaded);
			addEvent(script.element, 'error', scriptError);
			script.element.src = path;
			head.appendChild(script.element);
		}
	}
}

[MarcusAurelius]

У этого require, правда есть некоторые зависимости:

	global.html = document.documentElement || document.getElementsByTagName('html')[0];
	global.head = document.head || document.getElementsByTagName('head')[0];
	global.body = null;

я его выделю, протестирую, и добавлю в global.js в статье и в github, чуть позже

[MarcusAurelius]

На github уже обновленная версия, но там кода больше, если его в статью пихнуть, то будет не наглядно.