Eine Frage zum guten Code-Layout

[SilentSight]

Hallo an alle,

ich habe eine Frage zum guten Code-Layout und wie man das vll. besser machen sollte, da ich gerade versuche mehr mit Javascript zu machen.

Zum Beispiel habe ich mir eine kleine "Klasse" geschrieben um Videos von Youtube auf der Seite einzubinden:

var Video = function(url)
{
    this.container = document.createElement("div");
    this.container.appendChild(document.createElement("div"));
    this.container.lastChild.appendChild(document.createElement("a"));
    this.container.lastChild.lastChild.href = "javascript:void(0);";
    pThis = this;
    this.container.lastChild.lastChild.onclick = function()
    {
        pThis.close();
    };
    this.container.lastChild.lastChild.appendChild(document.createTextNode("Schliessen"));
    this.container.appendChild(document.createElement("object"));
    this.container.style.position = "absolute";
    this.container.style.top = "100px";
    this.container.style.right = "50px";
    this.container.lastChild.width = 640;
    this.container.lastChild.height = 385;
    this.container.lastChild.appendChild(document.createElement("param"));
    this.container.lastChild.lastChild.name = "movie";
    this.container.lastChild.lastChild.value = url;
    this.container.lastChild.appendChild(document.createElement("param"));
    this.container.lastChild.lastChild.name = "allowFullScreen";
    this.container.lastChild.lastChild.value = true;
    this.container.lastChild.appendChild(document.createElement("param"));
    this.container.lastChild.lastChild.name = "allowscriptaccess";
    this.container.lastChild.lastChild.value = "always";
    
    this.container.lastChild.appendChild(document.createElement("embed"));
    this.container.lastChild.lastChild.src = url;
    this.container.lastChild.lastChild.type = "application/x-shockwave-flash";
    this.container.lastChild.lastChild.allowscriptaccess = "always";
    this.container.lastChild.lastChild.allowfullscreen = true;
    this.container.lastChild.lastChild.width = 640;
    this.container.lastChild.lastChild.height = 385;
    
    document.getElementsByTagName("body")[0].appendChild(this.container);
}

Video.prototype.close = function()
{
    document.getElementsByTagName("body")[0].removeChild(this.container);
} 

Frage 1: Sollte ich lieber eine Variable anlegen und die dann per appendChild anhängen oder ist es so wie ich es mache (immer durch den gesamten DOM-Baum) auch gut / besser (auch was die Performance angeht).

Frage 2: Ist es sinnvoll für eine so kleine Funktion die "Klassen" von Javascript zu benutzen? Ich hielt es für sinnvoll, um auch die Schließen-Funktion einfach wieder hernehmen zu können.

Frage 3: Warum meckert der Internet-Explorer beim ersten auftreten von lastChild rum, dass es null ist, ich habe es doch darüber definiert.

Frage 4: Kann mir vll. einer sagen, warum ich immer nur ein geöffnetes Video wieder schließen kann und danach kein "Node" mehr vorhanden ist? Immerhin entferne ich mit der close-Funktion meiner Meinung nach immer nur den einen Ast...

Und ich bin natürlich für jegliche Verbesserungsvorschläge für den Code dankbar, da ich ja etwas für meinen weiteren JS-Weg lernen möchte

Ich freue mir über jede Antwort.

mfg
SilentSight

[SilentSight]

Hallo Leute,

sagt mal, sind euch die Fragen zu blöd oder verstoß ich gegen irgendwelche Forenregeln?
Ich konnte das Problem mit den überlagernden Videos immernoch nich' lösen (Frage 4) und wäre sehr froh, wenn mir wenigstens da jemand weiterhelfen könnte...

mfg

[ChrisB]

Fragen wie #3 und #4 sind kaum beantwortbar, wenn man nicht das Verhalten des Scriptes innerhalb des DOM beobachten/untersuchen kann.
Wenn sich das jemand genauer anschauen soll, dann solltest du also mindestens ein Online-Beispiel bereitstellen - auf's Wesentliche reduziert und valide, bitte.


Und heutige Browsergenerationen haben auch gute Debug-Tools, entweder schon drin oder als Add-On.
Firebug für Firefox ist hier m.E. nach wie vor das Nonplusultra, aber auch andere Browser bieten Debug-Werkzeuge, mit denen sich bei solchen Problemen schon einiges an Erkenntnissen gewinnen lässt. Du solltest dich also auch mal damit beschäftigen, wenn du mehr mit JavaScript machen willst.


Den Code an sich könnte man bspw. verbessern, in dem man nicht für jedes zu erzeugende Element und seine Attribute immer wieder x Zeilen notiert, sondern die Namen/Werte in einem Array o.ä. Datenstruktur ablegt, und dann beim iterieren darüber die immer gleichen/ähnlichen Aktionen in einer Schleife vornimmt.

[rudygotya]

Das hier betrachtet ist zumindest unlogisch

this.container.lastChild.lastChild

Zu 3)
Ich würde drauf tippen, dass es hier kracht. createElement gibt dir eine Referenz auf das Objekt zurück. Die kannst du dann gleich in einer Variable zwischenspeichern und dementsprechend mit dem Element arbeiten.
Zum Code noch:
Wenn du mehrere CSS Eigenschaften ändern möchtest, füge der Einfachheit/Sauberkeit eine CSS-Klasse hinzu.
Der Übersichtlichkeit zuliebe würde ich das auch anders schreiben:

var Video = function(url)
{
    var el = this.container = document.createElement("div"),
        con = el.appendChild(document.createElement("div"));
    con.appendChild(document.createElement("a"));
    con.href = "javascript:void(0);";
    // pthis versteht erstmal keiner, da hat sich eigtl self eingebürgert. Muss man nicht, find ich persönlich halt sauberer
    self = this;
    el.lastChild.lastChild.onclick = function()
    {
        self.close();
    };
    /**
    ...
    usw.
    
    */
    
} 

Dazu noch folgendes: Am besten so wenig DOM-Zugriffe wie möglich. Viel einfacher machst du es dir, wenn du irgendein Framework deiner Wahl verwendest.
Zur 4 würde ich auch gerne eine live demo sehen. Was sagt denn firebug zu this.container?