Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 13.05.2012, 12:12
Аватар для vflash
Профессор
Отправить личное сообщение для vflash Посмотреть профиль Найти все сообщения от vflash
 
Регистрация: 09.07.2007
Сообщений: 304

модульность для 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"
	]
}


в результате должны быть подключены файлы:
Код:
/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

код сырой потому уронить можно в три счета.
__________________
лучшая rss читалка zzreader.com

Последний раз редактировалось vflash, 10.09.2013 в 10:32.
Ответить с цитированием
  #2 (permalink)  
Старый 13.05.2012, 12:51
Аватар для vadim5june
Студент
Отправить личное сообщение для vadim5june Посмотреть профиль Найти все сообщения от vadim5june
 
Регистрация: 30.04.2012
Сообщений: 1,113

Если в модуле будет setTimiout или ajax-запрос
которые обращаются к глобальным переменным-то будет ошибка
Ответить с цитированием
  #3 (permalink)  
Старый 13.05.2012, 14:01
Новичок на форуме
Отправить личное сообщение для Kolyaj Посмотреть профиль Найти все сообщения от Kolyaj
 
Регистрация: 19.02.2008
Сообщений: 9,177

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


Как-то у тебя сложно всё. Я просто пишу в каждом файле инструкции, указывающие от каких файлов зависит текущий. Не надо никаких дополнительных конфигов.
https://github.com/Kolyaj/BuildJS
Ответить с цитированием
  #4 (permalink)  
Старый 13.05.2012, 19:02
Аватар для vflash
Профессор
Отправить личное сообщение для vflash Посмотреть профиль Найти все сообщения от vflash
 
Регистрация: 09.07.2007
Сообщений: 304

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

Последний раз редактировалось vflash, 13.05.2012 в 19:06.
Ответить с цитированием
  #5 (permalink)  
Старый 29.05.2012, 15:58
Аватар для vflash
Профессор
Отправить личное сообщение для vflash Посмотреть профиль Найти все сообщения от vflash
 
Регистрация: 09.07.2007
Сообщений: 304

добавил возможность указывать зависимые 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 то выдаст список строк для которых нужен перевод.
__________________
лучшая rss читалка zzreader.com

Последний раз редактировалось vflash, 27.06.2012 в 17:39.
Ответить с цитированием
  #6 (permalink)  
Старый 29.05.2012, 16:22
Аватар для DreamTheater
Профессор
Отправить личное сообщение для DreamTheater Посмотреть профиль Найти все сообщения от DreamTheater
 
Регистрация: 15.02.2011
Сообщений: 471

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

Спасибо за исходник, посмотрю Ваш подход. Когда-то колупался в BuilderJS от Kolyaj, тоже прикольно
Ответить с цитированием
  #7 (permalink)  
Старый 29.05.2012, 16:35
Новичок на форуме
Отправить личное сообщение для Kolyaj Посмотреть профиль Найти все сообщения от Kolyaj
 
Регистрация: 19.02.2008
Сообщений: 9,177

Сообщение от DreamTheater
Когда-то колупался в BuilderJS от Kolyaj
Вот колупаться там не стоило, там код из серии "работает -- не трогай", я сам его боюсь
Ответить с цитированием
  #8 (permalink)  
Старый 30.05.2012, 10:02
Аватар для B~Vladi
Модератор Всея Форума
Отправить личное сообщение для B~Vladi Посмотреть профиль Найти все сообщения от B~Vladi
 
Регистрация: 14.05.2009
Сообщений: 4,021

Сообщение от Kolyaj
я сам его боюсь
Хм...
__________________
Болтовня ничего не стоит. Покажите мне код. — Linus Torvalds
влад.куркин.рф
Ответить с цитированием
  #9 (permalink)  
Старый 30.05.2012, 10:17
Новичок на форуме
Отправить личное сообщение для Kolyaj Посмотреть профиль Найти все сообщения от Kolyaj
 
Регистрация: 19.02.2008
Сообщений: 9,177

Сообщение от B~Vladi
Хм...
Там код на JS, который парсит код на JS и генерирует код на JS, который генерирует код на JS.

Я знаю, как его отрефакторить, чтобы было всё красиво и понятно, но мне лень, раз всё и так работает.
Ответить с цитированием
  #10 (permalink)  
Старый 30.05.2012, 11:47
Аватар для B~Vladi
Модератор Всея Форума
Отправить личное сообщение для B~Vladi Посмотреть профиль Найти все сообщения от B~Vladi
 
Регистрация: 14.05.2009
Сообщений: 4,021

Лучше сделать, пока всё помнишь
Развитие не предполагается разве?
__________________
Болтовня ничего не стоит. Покажите мне код. — Linus Torvalds
влад.куркин.рф
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Не получается вставить код js в HTML garmoni Элементы интерфейса 3 05.09.2013 05:56
Обмен сообщениями между js загруженной страницы и расширением для браузера prihod Events/DOM/Window 6 11.12.2011 21:51
способы организации кода melky Общие вопросы Javascript 17 01.10.2011 22:57
изменение стиля для тега используя JS dimiork Элементы интерфейса 2 13.12.2010 10:47