• Das Erstellen neuer Accounts wurde ausgesetzt. Bei berechtigtem Interesse bitte Kontaktaufnahme über die üblichen Wege. Beste Grüße der Admin

eigenes Framework erstellen

P

pumi

New member
Hallo,

ich möchte mir gern eine eigenes Framework erstellen, dass das Erstellen von
DOM-Elementen erleichtert.
Folgend mein Ansatz dazu.
Code: 
function Panel(sWidth, sHeight, eContainer) {
    var DOMElement = CreateDOMElement.call(this, "DIV", "PANEL", eContainer);
    DOMElement.style.width = sWidth;
    DOMElement.style.height = sHeight;
    return DOMElement;
}

function Label(sText, eForElement, eContainer) {
    var DOMElement = CreateDOMElement.call(this, "LABEL", "LABEL", eContainer);
    DOMElement.textContent = sText;
}

function CreateDOMElement(eDOMElementName, sClassName, eContainer) {
    var eDOMElement = document.createElement(eDOMElementName);
    eDOMElement.className = sClassName;
    globalVar.id++;
    eDOMElement.id = sClassName + "X" + globalVar.id;

    if (eContainer === "body") {
        document.body.appendChild(eDOMElement);
    } else {
        document.getElementById(eContainer).appendChild(eDOMElement);
    }

    return eDOMElement;
}

Code: 
//Aufruf zb. so
var panel = new Panel(sTest, "200px", "body");

Wie findet ihr das vom Ansatz her?
Bitte nur konstruktive Kritik...bin noch Anfänger.

Danke und Grüße pumi
 
Hmm, es wird für dich sicherlich seinen Zweck erfüllen. Allerdings ist das alles Plain-JS, was nicht schlecht ist, aber mit z.B. JQuery kannst du ganz leicht DOM-Element erstellen bzw. entfernen.

Ich bin mir ein wenig unsicher, ob noch ein "Framework" für die Erstellung von DOM-Elementen gebraucht wird.
 
pumi schrieb:
bin noch Anfänger.
Zum Vergrößern anklicken....

also den Vorsatz als Anfänger ein eigenes Framework erstellen zu wollen finde ich mutig.

Wie Rico schon gesagt hat, schaut der bisherige Code soweit erstmal gut aus, allerdings erschließt sich auch mir der Sinn deines Vorhabens, hinsichtlich des Verhältnisses von Aufwand und Nutzen, nicht so ganz.

Wenn es nur um das erstellen von DOM-Element für einen bestimmten Zweck geht, warum ein eigenes Framework bauen, wenn man mit JQuery und Modernizer die selben Effeckte erreichen kann?

Solltest du das Framework jedoch zu lernzwecken (learning by doing) bauen wollen, dann ist das ok.
 
Zuletzt bearbeitet:
addyosmani.com/writing-modular-js/
ob commonJS oder AMD sich durchsetzen wird oder beides, bleibt abzuwarten, solange würde ich auf CommonJS setzen, da das recht einfach nach AMD konvertiert werden kann
 
Danke für die Antworten.
Mit den Beispielen ist es recht sinnfrei, da gebe ich euch recht.
Ich habe aber auch vor komplexere Objekte zu erstellen, zb. eine Tabelle,
da hat man dann schon einen Vorteil.
Außerdem sieht der Source nicht so wüst aus.
Aufruf dann zb so:
Code: 
var t = new Table("100%", "200px", 5, 3, false, "body");
			t.rows[0].cells[1].innerHTML = "test";
		    
			for(var c=0; c<5;c++){
				t.rows[c].cells[1].style.backgroundColor = "red";
			}
Da ist der Code gegenüber normalem JS, deutlich kompakter und einfacher
zu handeln inkl. Fehlerbehandlung etc.

Grüße pumi
 
pumi schrieb:
Da ist der Code gegenüber normalem JS, deutlich kompakter
Zum Vergrößern anklicken....
kompakter ist nicht gleich besser, ein konstruktoraufruf mit massig parametern, wo man nicht sieht, was bedeuten sie, ist keine gute idee.
die style angaben haben da auch nichts drinn zu suchen

pumi schrieb:
einfacher zu handeln
Zum Vergrößern anklicken....
sieh dir mal an, wie jquery das macht

bei deinem 1. beispiel, erzeugen eines panels, würde man idr. das div schon im dom haben und das mit js aufhübschen
 
hesst schrieb:
ein konstruktoraufruf mit massig parametern, wo man nicht sieht, was bedeuten sie, ist keine gute idee.
Zum Vergrößern anklicken....
Genau das wäre auch mein Kritikpunkt.

Man kann in JS auch indirekt benannte Parameter realsieren, indem man ein Objekt als einzigen Parameter übergibt und dann die Eigenschaften dieses Objekts abfragt. Könnte bei dir dann vielleicht so aussehen:
Code: 
var p = panel({
	width: "200px",
	height: "100px",
	container: document.body
});
Wenn man dann noch eine gescheite Defaultverwaltung dahinterpackt, kann man dann einige auch weglassen.
Die genaue Implementierung überlasse ich dir als Übung ;)

Zustätzlich würde ich nicht so massiv mit IDs arbeiten. Das macht eine Funktionen nur weniger flexibel. So wie in meinem Beispiel oben würde ich da Referenzen auf Nodes übergeben. Wenn du dann mit IDs arbeitest, kannst du einfach
Code: 
	container: document.getElementById("test")
verwenden.

Als (vorerst) letzter Punkt ist noch zu erwähnen, dass deine Funktionen, so wie sie aufgebaut sind, nicht sinnvoll als Konstruktor benutzt werden können, da du das erzeugte Objekt (this) nicht verwenden kannst - es wird nicht zurückgegeben, da du das DOM-Objekt zurückgibst. Deswegen alle Funktionen klein schreiben (ist die Konvention, die im Sprachkern verwendet wird, und an die sich viele halten) und das "new" weglassen. Eben so wie in meinem Beispiel oben.
 
Danke für die Antworten.
Ich gebe euch recht, die vielen Parameter sind nicht sinnvoll.
Ich habe versucht die Parameter nach dem Aufruf zuzuweisen, bekomme
aber bei meinem Test immer nur "function()" zurück...ich verstehe nicht warum!?
Code: 
function testclass() {
    this.parameter = {};
    this.parameter.par1 = function(param){
        return param;
    };			
    console.log(this.parameter.par1);
    return this;
}
		
var t = new testclass();
t.parameter.par1("ssdfgds");

Ich würde es wie vorgeschlagen auch gern mit Objekten umsetzen, wenn das besser ist,
aber ich blicke da noch nicht so ganz durch.
 
pumi schrieb:
Ich gebe euch recht, die vielen Parameter sind nicht sinnvoll.
Zum Vergrößern anklicken....
Ich glaube, du hast uns falsch verstanden, viele Einstellungmöglichkeiten über Parameter sind gut. Nur kommt man ziemlich schnell durcheinander, wenn man die nicht benennen kann (bei anderen Programmiersprachen ist das möglich - z.B. Python) - deswegen verwendet man in JS gerne den Ansatz, dass man ein Objekt übergibt und dieses dann als Configurationsobjekt versteht.

Deinen letzten Ansatz verstehe ich nicht genau, was du da erreichen willst...

Ein Beispielcode wäre sowas:
Code: 
function panel(att) {
    var DOMElement = createDOMElement({
    	tag: "DIV",
    	className: "PANEL",
    	parent: att.container
    });
    DOMElement.style.width = att.width;
    DOMElement.style.height = att.height;
    return DOMElement;
}
 
hm, das heißt, ich muss für jede Funktion ein Paramterobject definieren?
Ist das nicht etwas umständlich?

hier noch ein anderes Beispiel, was ich machen möchte:
Code: 
function color()
        {
            this.mycolor = "red";
            console.log("color=" + this.mycolor);
        }
        
        var c = new color();
        c.mycolor = "green";

Bei console.log kommt immer "color=red", was ja auch klar ist.
Ich möchte nun irgendwie, dass wenn ich
Code: 
c.mycolor = "green";
zuweise,
console.log dann ausgibt "color=green"
Es sollte aber nicht über die Parameter der Function reinkommen, sondern eben über
die Variable der Function.
Vielleicht ne blöde Frage, aber ich stelle mir vor, dass das irgendwie gehen sollte...

Danke vorab und Grüße pumi
 
Zuletzt bearbeitet:
pumi schrieb:
hm, das heißt, ich muss für jede Funktion ein Paramterobject definieren?
Zum Vergrößern anklicken....
Nicht für jede Funktion. Aber für den Typ von Funktion, den du hier zeigst, ist das hilfreich.

pumi schrieb:
Ist das nicht etwas umständlich?
Zum Vergrößern anklicken....
Nicht wirklich. Der Gewinn an Lesbarkeit macht den Mehraufwand auf jeden Fall wett.

PS: Jetzt hast du einen wirklichen Konstruktor und solltest ihn, nach Konvention, groß schreiben ;)
 
pumi schrieb:
hm, das heißt, ich muss für jede Funktion ein Paramterobject definieren?
Ist das nicht etwas umständlich?
Zum Vergrößern anklicken....
am besten, du schaust dir mal andere frameworks an. jquery ist da z.b. führend wenn es um dom manipulation geht. die bieten 2 wege an, dom-knoten einzufügen. einmal über ein objekt. noch besser und auch häufiger genutzt, über einen string. das versteht jeder und ist auch auf anhieb zu überblicken, weil du dein html ganz normal als text angibst, wie sonst auch.
$(node).append("<p>HTML</p>");
willst du vorhandene elemente aufhübschen, macht man das idr. so
$(node).panel({parameter: wert})
wobei man auf zusätzliche css angaben nach möglichkeit verzichtet, und die schon vorab als datei einbindet und zur laufzeit nur noch diese auswählt, z.b. über klassen
 
danke für die Antworten.
Die Links werde ich mir anschauen und auch wie es in jquery gelöst ist.
@Rico2009: wenn du mir ein kleines Beispiel hättest, wäre nett.
 
Code: 
function color(opt)
{
  var defaultOpt = {
    color: "red"
  };
  opt = opt || defaultOpt;
  this.mycolor = opt.color || defaultOpt.color;
  this.setColor = function(c)
  {
    this.mycolor = c;
  }
  this.logColor = function(c)
  {
    console.log(this.mycolor);
  }
}
        
var c = new color();
c.logColor();
c.setColor("blue");
c.logColor();
// willst du objektorientiert programmieren macht man das folgende eigentlich nicht, dann könntest du mycolor "private" machen
c.mycolor = "green";
c.logColor();
 
ahhh, super. Vielen Dank.
Jetzt weiß ich auch meinen Denkfehler.
Die Membervarialen werden erst durch eine Funktion aktiviert...
 
...wobei ich eine setter-Funktion bei einer normalen Property, wenn sie wirklich einfach nur den Wert setzt, irgendwie witzlos finde...

hesst schrieb:
Code: 
// willst du objektorientiert programmieren macht man das folgende eigentlich nicht
Zum Vergrößern anklicken....
Was hat das denn mit OO zu tun? Wenn du kontrollieren willst, mit welchen Werten deine Variable besetzt wird, definiert man da einen gescheiten Setter und kann sich dann die nervige .set...()-Syntax sparen.
 
kkapsner schrieb:
...wobei ich eine setter-Funktion bei einer normalen Property, wenn sie wirklich einfach nur den Wert setzt, irgendwie witzlos finde...
Zum Vergrößern anklicken....
alles was nicht gekapselt ist an einem objekt gehört zur öffentlichen schnittstelle.
die sollte aber implementierungsdetails verbergen.
greifen die die variable nutzenden objekte alle direkt darauf zu, ist das nicht gegeben. will man später doch eine aktion an das setzen binden, musst du alle stellen ändern.
 
Du musst dich einloggen oder registrieren, um hier zu antworten.
Zurück
Oben