Разбить обьект на несколько файлов

[pokk]

Добрый день, у меня есть объект, при открытии странице я пробегаю по нему и назначаю addEventListener id которые находятся в объекте.

objPageKalib={
	//--------------------------------------------------------------------------
	// "Id_IN_kalib_Kp": {	},
	// "id_td_U_250": {	},
	// "Id_IN_Kalib_Pout": {	},
	//--------------------------------------------------------------------------
	"Id_SaveKalib": {
			Type:	'click',
			action: function(element, data, index){download_mib('Load_kalib.BIN');}
	},
	//--------------------------------------------------------------------------
	"Id_OpenFileKalib": {
			Type:	'change',
			action: function(element, data, index){KalibOpenfile(element);}
	},
	//--------------------------------------------------------------------------
	"Id_IN_kalib_descusion": {
			Type:	'change',
			action: function(element, data, index){KalibSavePage('KalibDescus.CGI','Id_IN_kalib_descusion');}
	},
..............................
}

Со временем объект очень быстро вырос и я начинил разделять, постранично. Т.е на каждую страницу по своему объекту, а при загрузке страницы все объекты объеденяються в один получился вот такой косталь. Как можно сделать это более универсальные?
Что бы можно было надробить объект даже одной страницы на несколько частей, и потом не забывать их все сгруппировать(что бы автоматически это получалось).
Пока думаю сделать объект из объектов,в который буду добавляться мелкие объекты. А цикл переписать что бы он проходил по всем объектам и добавлял события. Есть ещё какие нибудь решения ?

/**
 * Overwrites obj1 values with obj2 and adds obj2 if non existent in obj1
 * @param obj1
 * @param obj2
 * @returns obj3 a new object based on obj1 and obj2
 */
function merge_options(obj1,obj2){
    var obj3 = {};
    for (var attrname in obj1) { obj3[attrname] = obj1[attrname]; }
    for (var attrname in obj2) { obj3[attrname] = obj2[attrname]; }
    return obj3;
}
//==================================================================================================
/*
	* @Описание:	Описание функции.
	* @Параметр:	
	* @Возврат:		Нету
*/
window.addEventListener('DOMContentLoaded', function() {
	var obj = {};	
	obj=merge_options(objOnclick,objOnInput);
	obj=merge_options(obj,objOnChange);
	obj=merge_options(obj,objPageKalib);
	obj=merge_options(obj,objPageState);
	obj=merge_options(obj,EventButt);
	
	for(var el in obj) {
			var handler = obj[el];
			var Type = handler.Type;
			
			if(typeof Type === 'undefined'){
				continue;
			}
			
			console.log(el);
			var butt=document.getElementById(el);
			console.log(butt);
			butt.addEventListener(Type,handler.action);
			if(typeof handler.Run === 'undefined'){
				//console.log(handler);
			}else{
				handler.Run();
			}
			//butt.addEventListener('click',handler.action);
	}
});

PS: Мелкие объекты хочу вынести в отдельные файлы вообще, или куски объекта если можно ?

[SuperZen]

надо было повесить один слушатель на документ, и из события брать id, потом брать этот id из твоего объекта, если он там есть вызвать ф-цию... и не вешать 500 слушателей...

на чем сервер? как ты их объединяешь?

[pokk]

"повесить один слушатель на документ, и из события брать id, потом брать этот id из твоего объекта..."
О что-то интересно, можно по подробнее, или примерно как это будет выглядит?" немного не понятно как вот это "и из события брать id" сделать. События разные могут быть, change,input, Click,
Еще есть ответный пакет с данными формата JSON, значения которых надо распихать по input,div(c разными ID), можно на это тоже сделать свое событие? Хотя на это я сделал в запросную функцию передается объект который содержит соответствие Ключа параметра JSON с ID div,input куда надо разместить значение.

"на чем сервер?" На микроконтроллере stm32f103 c flash в 256kb

"как ты их объединяешь?" Кого их ? страницы?
Это условное название страниц нету, html выгружается один, а там через div скрываю/открываю что отображать.
Файлы JS ? Gulp'ом плагином gulp-inline-source он все в один файл html запихивает.

Объекты ? тупо в лоб уже приводил код

var obj = {};  
	    obj=merge_options(objOnclick,objOnInput);
	    obj=merge_options(obj,objOnChange);
	    obj=merge_options(obj,objPageKalib);

а потом из obj вешаю события.

[SuperZen]

например:

<input id="three" type="radio" value="1" name="id2[]" />
<input id="two" type="radio" value="2" name="id2[]" />
<input id="one" type="text" value="" name="id1" />

<script>
  const actions ={
    one: () => console.log('hi there')
  }
  const handler = e => {
    console.log(e.target.id, e.target.name, e.target.value)
    actions[e.target.id] && actions[e.target.id]()
  }
  ['click', 'input'].forEach(event => addEventListener(event, handler))
</script>

""как ты их объединяешь?" Кого их ? страницы?"
как загружаешь на страницу, может стоит посмотреть на import, export?

"Еще есть ответный пакет с данными формата JSON, значения которых надо распихать по input,div(c разными ID), можно на это тоже сделать свое событие?"

может переписать на MVVM? что-нибудь типа... https://github.com/jorgebucaran/hyperapp

[pokk]

"может переписать на MVVM? что-нибудь типа"
Можно, почитал про фаемворки возникли вопросы.
1) Я так понял что эта штука поможет соединить визуальное отображение, с событиями действиями, и все это оформить в один модуль блок, для быстрого повторного использование, в других проектах.
2) Не понятно как это работает т.е какие файлы заливаются на сервер и что содержат. После выгрузки полу пустого html библиотека Hyperapp
формирует html код и вставляет в страницу?

[SuperZen]

Вообще, смысл MVVM - есть состояние приложения, графический интерфейс отрисовывается в соответствии с этим состоянием, остается только написать функции, которые изменяют это состояние, никаких прямых манипуляций (типа document.getElementById не актуально) с DOM делать не надо

1) Можно и так сказать
2) Нужна среда разработки

nodejs, потом сборщик проекта webpack или parcel или gulp (лучше parcel сначала, он проще в понимании, и у него есть HMR, можно этот пример взять за основу https://github.com/parcel-bundler/ex...aster/hyperapp

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

там в файле package.json есть команда build, после того как приложение написано, запускаем build должна появиться папка build и в ней будут файлы, все эти файлы заливаешь куда надо %)

как-то так...

[pokk]

"никаких прямых манипуляций (типа document.getElementById не актуально) с DOM делать не надо"
Хм.. у меня основная страница состоит из svg картинки, на которую сверху надо наложить текст + значения(с периодическим обновлением)
Что бы сверху не накладывать сделал в самой картинке пуcтые блоки и каждому из них присвоил ID. А потом из JSON параметры вытаскиваю и впихиваю в эти ID. Это будет возможно через MVVM ?

"появиться папка build и в ней будут файлы"
Да вот мне было и интересно какие файлы там будут кучу много JS по каждому модулю или один и HTML ?

"nodejs, потом сборщик проекта webpack или parcel или gulp "
Искал как сделать на gulp нечего не нашел =(( а c gulp уже имел дело больше понравился чем webpack

[SuperZen]

"Что бы сверху не накладывать сделал в самой картинке пуcтые блоки и каждому из них присвоил ID. А потом из JSON параметры вытаскиваю и впихиваю в эти ID. Это будет возможно через MVVM ?"

Да

"Да вот мне было и интересно какие файлы там будут кучу много JS по каждому модулю или один и HTML ?"

Смотря как настраивать, можно библиотеки отдельно, свой код отдельно, либо в разные файлы, либо в один, можно сделать так чтобы была одна html и все в нее вставлено

"Искал как сделать на gulp нечего не нашел =(( а c gulp уже имел дело больше понравился чем webpack"

В топку гульп, возьми https://parceljs.org/