Javascript-форум (https://javascript.ru/forum/)
-   Ваши сайты и скрипты (https://javascript.ru/forum/project/)
-   -   модульность для js (https://javascript.ru/forum/project/28264-modulnost-dlya-js.html)

Kolyaj 30.05.2012 12:14

Куда развитие? Свою задачу скрипт выполняет.
Есть одна вещь, которую можно было бы добавить. Как решу добавлять, так и отрефакторю.

Цитата:

Сообщение от B~Vladi
пока всё помнишь

Давно уже не помню. Я слишком много всего пишу, обычно через месяц свой код читаю, как чужой. Поэтому читабельность для меня важнее, чем, например, количество символов в названии функции.

B~Vladi 30.05.2012 12:22

Цитата:

Сообщение от Kolyaj
Поэтому читабельность для меня важнее, чем, например, количество символов в названии функции.

Поддерживаю! :)

vflash 28.01.2013 23:55

продолжаю развивать это направление.
утилита функционально не выросла , но в качестве код подрос.

использую его в проекте wada.vn и в своем небольшом сервисе.

На практике большим плюсом стало то, что в модуле сразу описываю зависимости css-файлов.
Уже и забыл про ошибки на подобии случайной глобальной переменной. Или в каком-то файле не указал "use strict".

на будущее есть идея - собирать js не в один файл, а выделять общее для всех страниц ядро.


в общем получался простой и практичный инструмент.
исходник - https://github.com/vflash/scmod
npm - https://npmjs.org/package/scmod
демо - http://scmod.vflash.ru/sandbox?src=h...eedreader.json

vflash 23.02.2013 13:20

Реализовал функционал подмены адресов. Адрес модуля сверяется с таблицей и заменяется на другой.
Используя подмену можно в описании модуля ссылаться на глобальный адрес модуля, так как он более уникален, но в проекте использовать локальный источник.

небольшой пример http://vflash.ru/work/zztest/
вот json корневого модуля примера
{
	"modules":{"zzparser": "github:~/vflash/zzparser"},
	"scripts": ["./test.js"]
}


в HTML подключаем его через scmod - http://scmod.vflash.ru/sandbox?src=h...test/test.json
на страницу будут подключены три скрипта
1 - [url]http://scmod.vflash.ru/file/3/EasySAXParser/https/raw.github.com/vflash/easysax/master/easysax.js[/url]
2 - [url]http://scmod.vflash.ru/file/2/zzParser,EasySax/https/raw.github.com/vflash/zzparser/master/zzparser.js[/url]
3 - [url]http://scmod.vflash.ru/file/1/module,zzparser/http/vflash.ru/work/zztest/test.js[/url]


в данном случаи файлы двух модулей будут загружены из удаленного источника. Оба модуля расположены на github-е отчего загрузка файлов с него значительно медленнее чем могло быть с локального. Также нет возможности делать в них локальные правки.

используя подмену можно заменить глобальный адрес локальным.
для этого создал папку deps и туда клонировал два репозитория
git clone git://github.com/vflash/zzparser.git
git clone git://github.com/vflash/easysax.git
в этой же папке создал файл со списком подмен http://vflash.ru/work/zztest/deps/replace.json
{
	"replace": {
		"github:~/vflash/easysax": "./easysax/easysax.json",
		"github:~/vflash/zzparser": "./zzparser/zzparser.json"
	}
}


теперь в HTML подключаем наш модуль с указанием списка подмен http://scmod.vflash.ru/sandbox?rep=d...test/test.json
на страницу будут подключены три скрипта, но уже только с локального источника
1 - [url]http://scmod.vflash.ru/file/3/EasySAXParser/http/vflash.ru/work/zztest/deps/easysax/easysax.js[/url]
2 - [url]http://scmod.vflash.ru/file/2/zzParser,EasySax/http/vflash.ru/work/zztest/deps/zzparser/zzparser.js[/url]
3 - [url]http://scmod.vflash.ru/file/1/module,zzparser/http/vflash.ru/work/zztest/test.js[/url]



список подмен можно описать не только в отдельном файле но и в корневом модуле, свойство "replace".
дополнительно для scmod указываем rep=true - http://scmod.vflash.ru/sandbox?rep=t...test/test.json
{
	"modules":{"zzparser": "github:~/vflash/zzparser"},
	"scripts": ["./test.js"],

	"replace": {
		"github:~/vflash/easysax": "./deps/easysax/easysax.json",
		"github:~/vflash/zzparser": "./deps/zzparser/zzparser.json"
	}
}

vflash 18.06.2013 18:18

добавлен функционал для работы из консоли.
после установки модуля доступны следующие команды

Код:

scmod-scripts -3 -lang=en ./side-zzreader/src/zzreader/feedreader.json
scmod-styles -3 ./side-zzreader/src/zzreader/feedreader.json
scmod-langs -for=en,ru,de ./side-zzreader/src/zzreader/feedreader.json

команда scmod-scripts - компилирует все скрипты в один файл
команда scmod-styles - компилирует все css-стили в один файл
команда scmod-langs - формирует список строк для локализации

параметр -for=SS задает ключи локализации для команды scmod-langs
параметр -lang=SS указывает ключ локализации для команды scmod-scripts
параметр -[1..9] задает адрес корневого каталога относительно указанного модуля
параметр -max выдача будет без сжатия кода
параметр -rep разрешает подмену адресов. матрица должна быть указанна в корневом модуле
параметр -rep=./deps/replace.json разрешает подмену адресов. матрица расположена в файле

tenshi 22.06.2013 19:42

зачем 3 команды если всё это можно делать одной? а то и вообще можно делать пересборку при изменении файлов автоматом.
да и всякие "списки подмен" не мешало бы генерить автоматом.
есть ли загрузка css если загружен соответствующий js?
где сборщик шаблонов?

vflash 23.06.2013 02:40

Цитата:

Сообщение от tenshi
зачем 3 команды если всё это можно делать одной? а то и вообще можно делать пересборку при изменении файлов автоматом.

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

Цитата:

Сообщение от tenshi
да и всякие "списки подмен" не мешало бы генерить автоматом.

можно. но это нужно писать, а время на это нет. я сам пока-что в практике подменой не пользовался по полной.

Цитата:

Сообщение от tenshi
есть ли загрузка css если загружен соответствующий js?

для публикации все зависимые js собираются в один файл . тоже самое с css.
сейчас пока только такая модель, для многих проектов этого достаточно.
хочу в будущем реализовать и другие модели, но пока обдумываю как лучше делать и какую.

Цитата:

Сообщение от tenshi
где сборщик шаблонов?

нету. шаблонизаторов полно, все не реализуешь.

tenshi 23.06.2013 04:36

Зачем так делать? Это же одна операция - сборка ассетов.

Зачем она тогда вообще нужна? о0

Ну это понятно. То есть каждый файл нужно подключать вручную?

А все и не надо. Ты же не поддерживаешь всякие cofeescript и sass? Как ты сейчас обходишься с шаблонами? Гвоздями прибиваешь в JS? Грузишь в HTML? Ходишь на сервер чтобы что-нибудь отрендерить?

vflash 23.06.2013 09:53

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

Цитата:

Сообщение от tenshi
Ну это понятно. То есть каждый файл нужно подключать вручную?

модули собираются автоматически. описывать модуль естественно вручную.

Цитата:

Сообщение от tenshi
Как ты сейчас обходишься с шаблонами? Гвоздями прибиваешь в JS? Грузишь в HTML? Ходишь на сервер чтобы что-нибудь отрендерить?

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

каждый пользуется какими-то своими шаблонизаторами. я не хочу сборщик превращать во фреймворк или комбайн. в крайнем случаи можно компилировать вручную по команде, в модуле просто подключить эти готовые файлы. можно написать какойто автомат который будет компилировать шаблоны по изменению файла.

sass и подобное можно былобы всунуть прям в код, благо их не так много. но как сделать красиво у меня идей пока нет. ну и я ими не пользуюсь, хватает возможностей css.

tenshi 23.06.2013 18:43

А зачем указывать глобальный адрес? Чем локальные-то не угодили?

Вручную - это же страшный геморрой. Неужели это никак не автоматизировать?

Это не шаблоны, а билдер. Разница в том, что шаблоны являются расширением целевого синтаксиса, а билдер конструирует используя исходный. Ну да не суть. Каждый пользуется какими-то своими [чем угодно], и хороший сборщик должен предоставлять апи в том или ином виде, чтобы к нему можно было прицепить другие приблуды. При этом вовсе не обязательно поддержку их всех реализовывать. Но хотя бы один пример крайне желателен.

Для примера, мой сборщик состоит из ядра, которое реализует единую схему разруливания зависимостей. И пачку модулей для сборки различных ассетов: для веб скриптов, для нодных скриптов, для расширений для мозиллы, для расширений для хрома, для стилей, для стилей с использованием sass, для xslt-шаблонов, для smatry-шаблонов, для локалей, для png-спрайтов, для svg-спрайтов... всё что им нужно - используя ядро получить отсортированный список файлов и слить их воедино. Для нового типа ассетов сборщик пишется на раз-два. Да, ещё пачка модулей для различных форматов файлов - чтобы зависимости искать автоматически, а не забивать их ручками.


Часовой пояс GMT +3, время: 17:38.