Как правильно организовать наследуемую структуру js приложения?

Question

[fatedupi]

Всем привет!
Есть необходимость сделать много форм на html+js
Для этого хочу сделать н̶е̶б̶о̶л̶ь̶ш̶о̶й̶ ̶в̶е̶л̶о̶с̶и̶п̶е̶д̶ "расширяемый фреймворк", но не могу придумать как-бы лучше организовать наследование
Хочется что-то типа такого:

//Внутри фреймворка будут разные штуки "по умолчанию", например компоненты - "this.components"
function framework(settings) {
	this.components = {
		date: {
			prop: 'date_component'
		}	
	}
  
	this.form = {
		constructor: function() {
			this.fields.forEach(function(field) {
		    	$('#log').append(
		        	$('<div/>').text(typeof field.component !== 'undefined' ? field.component.prop : 'undefined')
		        );
		    });
		}
	}
}

framework.prototype.setup = function(settings) {
	//Расширяемся
	$.extend(true, this.components, settings.components);
	$.extend(true, this.form, settings.form); 
	
	//Запускаемся
	this.form.constructor();
}

А вот само приложение, которое будут использовать фреймворк выше:

var app = new framework();
app.setup({
	components: {
		selectize: { // Добавляем новый компонент, которого нет в основном фреймворке
			prop: 'select_component'
		}
	},
	form: {
		fields: [
			{
				name: 'dateInput',
				component: app.components.date
			}, {
				name: 'selectInput',
				component: app.components.selectize //А вот тут затык - так как selectize выше еще не инициализирован, то тут будет undefined :-(
			}
		]
	}
});

Вот ссылка что-бы поиграться - https://jsfiddle.net/6mmy45vr/3/

Подскажите, как лучше организовать такое "наследование", может есть какие-то способы отложенной инициализации переменных или типа того?
Можно обернуть fields в функцию, а в конструкторе писать this.fields = this.fields(), но это некрасиво как-то.

Спасибо!

Answer 1

[Константин Громов]

Объект фреймворка же сам и содержит компоненты. Так передавайте ему строку с типом и он сам получит объект компонента: https://jsfiddle.net/rb0wjwk8. А лучше вовсе разделить настройку и отрисовку, это две логически разные операции: https://jsfiddle.net/scf6ht8r. И советую наперёд подумать о том, что каждый тип компонента отличается отрисовкой и, как следствие, может иметь собственный метод сбора данных. Вдобавок скорее всего понадобится восстанавливать состояние формы, валидировать и в процессе работы её перестраивать. Исходя из этого, если есть дедлайн лучше сначала поискать готовые решения или хотя бы его куски.