HTML und Javascript OOP

[J o]

Einen wunderschönen Sonntag zusammen,

ich bin seit einigen Tagen am überlegen, ob ich die Art wie ich Javascript beim Client verwende umstrukturiere.

Derzeit:

Nach einem entsprechenden Request kommt von meinem Server ein umfangreiches Objekt mit Templates und Daten aus meiner Datenbank. Dieses ist derzeit Global an jeder Stelle verfügbar. Entsprechend der Daten gibt es dann die ein oder andere Schleife welche an ein Template die Daten übergibt und diese dann dem DOM hinzufügt. Wenn dies alles erledigt ist, werden für die entsprechenden Buttons Eventlistener gesetzt welche dann die entsprechende Funktionalität besitzen. Zudem werden zwei Funktionen initialisiert die in festen Intervallen diese Daten bearbeitet/weiterrechnen und den Inhalt der Elemente im DOM mit den neuen Daten überschreibt. Da mitunter viele gleichartige Strukturen vorhanden sind und die Daten sich Server seitig ändern können, frage ich mich ob das der geeignete Weg ist.

Konzept1:

Wenn die Daten vom Server kommen, könnte ich auch die in den Schleifen durchgeführte Funktionalität in ein Objekt auslagern. Dieses Objekt könnte im Konstruktor das Template mit den Daten dem DOM hinzufügen und direkt einen Pointer auf das gesamte Element besitzen. (Beispiel ungetestet, könnten Fehler vorhanden sein)

var objects = [];
for(i in data) {
	objects.push( new testObject( data.something[i], data.templates ) ); 
}
var testObjekt = function ( data, template ) {
	this.el = document.getElementById("something").appendChild( template );
	this.el.innerHTML = data.something;
	this.data = data;
	this.update = function ( data ) {
		this.data = data;
		this.el.innerHTML = data.something;
	}
}

1. Frage:

Wenn objects[i].update(data) aufgerufen wird, dann muss das DOM sehr wahrscheinlich nicht nach dem richtigen Element durchsucht werden, richtig?

2.Frage:

Wie geht ihr mit Daten um, die in zwei Funktionen ständig in Intervallen genutzt oder benötigt werden? Beziehungsweise, wie können Redundanzen vermieden werden?

Konzept 2: Daten bleibt Global.

var data = {...};
var objects = [];
for(i in data) {
	objects.push( new testObject(i) ); 
}
var testObjekt = function (i) {
	this.el = document.getElementById("something").appendChild( data.template );
	this.el.innerHTML = data.something[i];
	this.update = function ( i ) {
		this.el.innerHTML = data.something[i];
	}
}

Macht das vielleicht mehr Sinn? Ist das so gängig? Oder geht das noch eleganter?

Vielen Dank schon mal und Ein schönes Restwochenende.

Gruß
Jo