Ankündigung

Einklappen
Keine Ankündigung bisher.

Eine Frage zum guten Code-Layout

Einklappen

Neue Werbung 2019

Einklappen
X
  • Filter
  • Zeit
  • Anzeigen
Alles löschen
neue Beiträge

  • 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

  • #2
    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

    Kommentar


    • #3
      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.
      [SIZE="1"]RGB is totally confusing - I mean, at least #C0FFEE should be brown, right?[/SIZE]

      Kommentar


      • #4
        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:

        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?
        I like cooking my family and my pets.
        Use commas. Don't be a psycho.
        [URL="http://jscouch.de"]Blog[/URL] - [URL="http://coverflowjs.github.io/coverflow/"]CoverflowJS[/URL]

        Kommentar

        Lädt...
        X