Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 11.04.2019, 06:02
Кандидат Javascript-наук
Отправить личное сообщение для pokk Посмотреть профиль Найти все сообщения от pokk
 
Регистрация: 30.01.2014
Сообщений: 136

Разбить обьект на несколько файлов
Добрый день, у меня есть объект, при открытии странице я пробегаю по нему и назначаю 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: Мелкие объекты хочу вынести в отдельные файлы вообще, или куски объекта если можно ?
Ответить с цитированием
  #2 (permalink)  
Старый 11.04.2019, 10:47
Аватар для SuperZen
Профессор
Отправить личное сообщение для SuperZen Посмотреть профиль Найти все сообщения от SuperZen
 
Регистрация: 08.11.2017
Сообщений: 379

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

на чем сервер? как ты их объединяешь?
Ответить с цитированием
  #3 (permalink)  
Старый 15.04.2019, 06:12
Кандидат Javascript-наук
Отправить личное сообщение для pokk Посмотреть профиль Найти все сообщения от pokk
 
Регистрация: 30.01.2014
Сообщений: 136

"повесить один слушатель на документ, и из события брать 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 вешаю события.

Последний раз редактировалось pokk, 15.04.2019 в 06:19.
Ответить с цитированием
  #4 (permalink)  
Старый 16.04.2019, 14:02
Аватар для SuperZen
Профессор
Отправить личное сообщение для SuperZen Посмотреть профиль Найти все сообщения от SuperZen
 
Регистрация: 08.11.2017
Сообщений: 379

например:
<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
Ответить с цитированием
  #5 (permalink)  
Старый 17.04.2019, 08:12
Кандидат Javascript-наук
Отправить личное сообщение для pokk Посмотреть профиль Найти все сообщения от pokk
 
Регистрация: 30.01.2014
Сообщений: 136

"может переписать на MVVM? что-нибудь типа"
Можно, почитал про фаемворки возникли вопросы.
1) Я так понял что эта штука поможет соединить визуальное отображение, с событиями действиями, и все это оформить в один модуль блок, для быстрого повторного использование, в других проектах.
2) Не понятно как это работает т.е какие файлы заливаются на сервер и что содержат. После выгрузки полу пустого html библиотека Hyperapp
формирует html код и вставляет в страницу?
Ответить с цитированием
  #6 (permalink)  
Старый 17.04.2019, 14:31
Аватар для SuperZen
Профессор
Отправить личное сообщение для SuperZen Посмотреть профиль Найти все сообщения от SuperZen
 
Регистрация: 08.11.2017
Сообщений: 379

Вообще, смысл 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 и в ней будут файлы, все эти файлы заливаешь куда надо %)

как-то так...
Ответить с цитированием
  #7 (permalink)  
Старый 18.04.2019, 06:55
Кандидат Javascript-наук
Отправить личное сообщение для pokk Посмотреть профиль Найти все сообщения от pokk
 
Регистрация: 30.01.2014
Сообщений: 136

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

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

"nodejs, потом сборщик проекта webpack или parcel или gulp "
Искал как сделать на gulp нечего не нашел =(( а c gulp уже имел дело больше понравился чем webpack
Ответить с цитированием
  #8 (permalink)  
Старый 18.04.2019, 13:59
Аватар для SuperZen
Профессор
Отправить личное сообщение для SuperZen Посмотреть профиль Найти все сообщения от SuperZen
 
Регистрация: 08.11.2017
Сообщений: 379

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

Да

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

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

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

В топку гульп, возьми https://parceljs.org/
Ответить с цитированием
Ответ



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

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


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Как избежать ошибки по ограничению открытых файлов? Tipylja Node.JS 3 17.08.2018 19:43
Разбить строку в массив по несколько символов BaBaKa Общие вопросы Javascript 11 20.11.2014 20:29
Простейший конвертер группы файлов видео в несколько форматов FINoM Оффтопик 4 29.01.2012 05:34
Как разбить текст на несколько кусков? Livanderiaamarum Общие вопросы Javascript 30 22.12.2011 12:13
Соединить несколько файлов JS в один maguaguru Общие вопросы Javascript 17 01.12.2011 15:33