Документация и исходники тут 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"
]
}
в результате должны быть подключены файлы:
|
Код:
|
/js/core/core.js
/js/core/core-cookie.js
/js/core/core-xhr.js
/js/zz/xxx1.js
/js/zz/xxx2.js
/js/zz/common.js
/js/zz/code.js
/js/zz/init.js |
пропустив через прокси файл выглядит примерно так
|
Код:
|
http://scmod.vflash.ru/file/1/-,core,xxx/http/demo.com/js/zzz/common.js
__MODULE(1, function(global,module,core,xxx){.........код файла............
return [global,module,core,xxx]}); |
каждый модуль может состоять из нескольких файлов но каждый будет в своей области видимости. Общим для них будет переменная 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
код сырой потому уронить можно в три счета.
