модульность для js
 

Документация и исходники тут https://github.com/vflash/scmod

В свое время пробовал асинхронно загружать по требованию но переизбыток асинхронности усложняет код. Позже стал просто объединять файлы в один, а для описания связей использовал отдельные файлы. Программируя под nodejs оценил удобство когда каждый файл имеет свою область видимости.

Появилась идея сделать менеджер js-файлов в виде веб сервиса. Сервису указываем корневой модуль, а он формирует список файлов и отдает js код для подключения этих файлов через прокси который оборачивает исходник в функцию(свою область видимости) .

То как сделано в node.js на клиенте повторить не получиться, так как в ноде файлы грузятся синхронно по требованию. Потому для клиента необходимо вначале вычислять какие и в какой последовательность файлы нужно грузить. Если держать структуру модуля в js-коде(как в ноде), то для вычисления списка файлов потребуется загружать и парсить все эти файлы. Но это увеличивает общее время время загрузки страницы. Когда количество файлов в несколько десятков это становиться неудобно во время разработки. Поэтому и по опыту использования "отдельных файлов", в качестве структуры модуля выступает отдельный json файл.

Описание модуля выглядит примерно так

// какойто модуль /js/zzz
{
	"modules": {
		"core": "../core/core.json",
		"xxx": "./xxx.json"
	},
	
	"scripts": [
		"./common.js",
		"./code.js",
		"./init.js"
	]
}


// модуль обшего функционала  ../core/core.json
{
	"scripts": [
		"./core.js",
		"./core-cookie.js",
		"./core-xhr.js"
	]
}


// еще какойто модуль ./xxx.json
{
	"modules": {
		"core": "../core/core.json"
	},
	
	"scripts": [
		"./xxx1.js",
		"./xxx2.js"
	]
}

в результате должны быть подключены файлы:
пропустив через прокси файл выглядит примерно так

каждый модуль может состоять из нескольких файлов но каждый будет в своей области видимости. Общим для них будет переменная module. Её можно переопределить в любом файле модуля. К примеру module=fucntion(){....};

если нужен объект который будет общим для файлов модуля но недоступен другим модулям то структуре нужно создать связь с указанием пути как true

{
	"modules": {
		"core": "../core/core.json",
		"xxx": "./xxx.json",
		"ee": true
	},
	
	"scripts": [
		"./common.js",
		"./code.js",
		"./init.js"
	]
}

если нужен виртуальный модуль то так:

{
	"modules": {
		"core": "../core/core.json",
		"xxx": "./xxx.json",
		"vvv": "global:vvvv"
	},
	
	"scripts": [
		"./common.js",
		"./code.js",
		"./init.js"
	]
}

Если необходимо чтобы переменная "module" была названа по другому то в структуре необходимо указать:

{
	"alias": "ddd",
	"modules": {
		"core": "../core/core.json",
		"xxx": "./xxx.json",
		"vvv": "global:vvvv"
	},
	
	"scripts": [
		"./common.js",
		"./code.js",
		"./init.js"
	]
}

Где-то серьезно опробовать этот менеджер еше не приходилось. Написал прототип на node.js , но реализация такая только чтоб проверить и попробовать использовать.

В перспективе в структуре можно хранить и структуру CSS файлов.



Исходник сервиса тут https://github.com/vflash/scmod

Для пробы запустил сервис по адресу http://scmod.vflash.ru
подключать примерно так http://scmod.vflash.ru/sandbox?src=h...da/common.json
сборка в один файл выглядит так http://scmod.vflash.ru/scripts?src=h...da/common.json

код сырой потому уронить можно в три счета.

Если в модуле будет setTimiout или ajax-запрос
которые обращаются к глобальным переменным-то будет ошибка

Люди до такого простого вывода доходят только на своих ошибках. Это почему-то невозможно объяснить.


Как-то у тебя сложно всё. Я просто пишу в каждом файле инструкции, указывающие от каких файлов зависит текущий. Не надо никаких дополнительных конфигов.
https://github.com/Kolyaj/BuildJS

Kolyaj,
мне удобнее отдельный файл структуры. в этом-же файле можно указывать используемые CSS.
на вкус и цвет ...

добавил возможность указывать зависимые CSS файлы в пакет.

// какойто модуль /js/zzz
{
	"styles": [
		"./element.css"
	]
}

в итоге сервис http://scmod.vflash.ru/sandbox?src=.... вернет js код который подключит через document.write(...), JS и CSS файлы.

сервис http://scmod.vflash.ru/styles?src=.... соберет все css файлы в один и вернет его.

также опробовал перевод на другие языки. Для этого в модули описываю матрицу замены строк:

// какойто модуль /js/zzz
{
	"langs": {
		"текст который требует перевода": {
			"ru": "текст перевода",
			"en": "the translation",
			"vn": "bản dịch",
			....
		},
		......
	}
}

через сервис http://scmod.vflash.ru/scripts?lang=vn&src=.... получаю js-код уже на другом языке.
В JS-коде заменяются строки только в "двойных кавычках".

а если запросить http://scmod.vflash.ru/langs?src=http://..../xxx.json то выдаст список строк для которых нужен перевод.

У самого сейчас возникла необходимость создать такой инструмент для проекта.

Спасибо за исходник, посмотрю Ваш подход. Когда-то колупался в BuilderJS от Kolyaj, тоже прикольно :)

Вот колупаться там не стоило, там код из серии "работает -- не трогай", я сам его боюсь :)

Хм...

Там код на JS, который парсит код на JS и генерирует код на JS, который генерирует код на JS.

Я знаю, как его отрефакторить, чтобы было всё красиво и понятно, но мне лень, раз всё и так работает.

Лучше сделать, пока всё помнишь :)
Развитие не предполагается разве?