Eine Frage zum guten Code-Layout

SilentSight · 02.07.2010, 21:39

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:

PHP-Code:

  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 · 13.07.2010, 13:36

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 · 13.07.2010, 16:48

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 · 14.07.2010, 09:18

Das hier betrachtet ist zumindest unlogisch

Zitat:

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:

PHP-Code:

  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?

Themen-Optionen
Druckbare Version zeigen Jemanden per E-Mail auf dieses Thema hinweisen
Thema bewerten
Thema bewerten:

Ähnliche Themen
Thema	Autor	Forum	Antworten	Letzter Beitrag
Code completion/Folding Eclipse/PDT/Zend	sumiyou	PHP Tipps 2010	9	30.06.2010 11:22
[Erledigt] Frage zu JOIN Befehl und dem Auslesen desselben	apo	PHP Tipps 2010	11	13.06.2010 19:32
[Erledigt] Sprache, die PHP Code erzeugt	Turamisi	Software-Design	21	04.02.2010 10:27
Frage bzgl Code in nicht erfüllten Abfragen	Uhu	PHP-Fortgeschrittene	4	05.07.2009 23:02
[Erledigt] semantischer Code - einfache Frage	choice	PHP Tipps 2009	17	26.05.2009 15:53
Div-Layout Frage/Problem	scheffie	HTML, Usability und Barrierefreiheit	7	26.05.2009 09:18
[Erledigt] PHP Code aus Datenbank	ayti	PHP Tipps 2008	8	26.05.2008 19:40
Design und Code Trennen	TeazY	PHP Tipps 2008	29	21.05.2008 12:08
Nur bestimmten Html Code zulassen?	litterauspirna	PHP Tipps 2008	5	29.04.2008 12:30
[Erledigt] Lesbarkeit von Code		Off-Topic Diskussionen	6	14.07.2005 14:48
[Erledigt] BB Code entfernen		PHP Tipps 2005	2	25.04.2005 15:20
[Erledigt] bb code innerhalb von bb code geht nicht		PHP Tipps 2007	2	12.01.2005 17:29
[Erledigt] Frage!		PHP Tipps 2004	4	27.07.2004 11:25

02.07.2010, 21:39
SilentSight Erfahrener Benutzer Registriert seit: 27.04.2008 Beiträge: 107	Eine Frage zum guten Code-Layout 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: PHP-Code: 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


Mister Ad PHP Code Flüsterer Registriert seit: 21.08.2005 Beiträge: 4682 PHP-Kenntnisse: Fortgeschritten

13.07.2010, 13:36
SilentSight Erfahrener Benutzer Registriert seit: 27.04.2008 Beiträge: 107	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

13.07.2010, 16:48
ChrisB Moderator¹ Registriert seit: 28.03.2010 Beiträge: 7.470 PHP-Kenntnisse: Fortgeschritten	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. __________________ RGB is totally confusing - I mean, at least #C0FFEE should be brown, right?