Erzeugen einer ungeordneten Liste aus Javascript-Knotenobjekten

Question

Erzeugen einer ungeordneten Liste aus Javascript-Knotenobjekten

Gefragt el 31 de Dezember, 2010: Wann wurde die Frage gestellt
1357 Ansichten: Anzahl der Besuche der Frage
2 Antworten: Anzahl der Fragenantworten
Gelöst: Aktueller Status der Frage

Ich habe die folgenden Codes geschrieben. Der Zweck dieser Codes ist es, eine <ul> von einigen Javascript-Node-Objekten:

<html>

<body>
<div id='content'></div>
<script type='text/javascript'>

            function node(name,parent){
                this.name=name;
                this.parent=parent;
                this.level=function(){
                    if(this.parent==null)
                        return 0;
                    return this.parent.level()+1;                    
                }
                this.childs=new Array();
            }

            //create a rootNode, having no parent
            var rootNode=new node('AAA',null);

            //create node1 and add it to the child of rootNode
            var node1=new node('BBB',rootNode);
            rootNode.childs.push(node1);

            //create node2 and add it to the child of rootNode
            var node2=new node('CCC',rootNode);
            rootNode.childs.push(node2);

            //create node3 and add it to the child of node1
            var node3=new node('DDD',node1);
            node1.childs.push(node3);

            //create node4 and add it to the child of node1
            var node4=new node('EEE',node1);
            node1.childs.push(node4);

            //create node5 and add it to the child of node2
            var node5=new node('FFF',node2);
            node2.childs.push(node5);

            function getTreeHTML(node,html){

                if(node.level()==0)
                    html+='<ul>';

                html+='<li>';
                html+=node.name;
                if(node.childs.length > 0){
                    html+='<ul>';
                    for(var i in node.childs){
                        html+=getTreeHTML(node.childs[i],html);
                    }
                    html+='</ul>';
                }
                html+='</li>';

                if(node.level()==0)
                    html+='</ul>';
                return html;
            }

            var treeHTML=getTreeHTML(rootNode,'');
            document.getElementById('content').innerHTML=treeHTML;
</script>
</body>

</html>

Unter rootNode gibt es zwei unmittelbare Kindknoten, für diese beiden Kindknoten sollte einer von ihnen zwei ~~Kinder~~ Kinder und ein anderer sollte ein Kind haben. Ich vermute, dass es einen logischen Fehler in der getTreeHTML() Funktion, aber ich kann einfach nicht herausfinden, was es ist, können Sie die Codes auf http://htmledit.squarefree.com/ dann können Sie schnell sehen, was ich meine.

Vielen Dank an Sie alle.

Gefragt el 31 de Dezember, 2010 von bobo

Answer 1

2 Antworten

Answer 2

4voto

T.J. Crowder Punkte 948310

Das Problem liegt hier:

html+=getTreeHTML(node.childs[i],html);

Sie enden mit hinzukommend die HTML-Zeichenfolge zweimal, weil Sie innerhalb der Funktion an die übergebene HTML-Zeichenfolge anhängen, dann aber auch eine Anfügeoperation mit dem, was sie zurückgibt, verwenden. Wenn Sie dies ändern, funktioniert die Funktion einwandfrei:

html=getTreeHTML(node.childs[i],html);
html+=getTreeHTML(node.childs[i],'');

Off-Topic : Einige Vorschläge/Empfehlungen/Beobachtungen, falls Sie daran interessiert sind; nichts davon ist kritisch gemeint, nur hilfreich:

Anstatt Zeichenketten zu verketten, geht es in der Regel schneller, wenn man eine Reihe von Zeichenketten in einem Array aufbaut und dann mit einer join('') um sie am Ende alle zu einer Kette zusammenzufügen.
Die übliche Praxis (die Sie ruhig ignorieren können!) ist es, Konstruktorfunktionen wie node zunächst gedeckelt ( Node ), um sie von Nicht-Konstruktorfunktionen zu unterscheiden.

Jeder Ihrer node Objekte erhalten ihre eigene kopieren. der level Funktion, die in Ihrem Code nicht notwendig ist. Sie können sich alle eine level Funktion, etwa so:

function node(name,parent){
    this.name=name;
    this.parent=parent;
    this.childs=new Array();
}
node.prototype.level = function() {
    if(this.parent==null)
        return 0;
    return this.parent.level()+1;                    
}

Im Englischen ist der Plural von "child" "children" (unregelmäßig).
使用する for..in um durch Array-Indizes zu schleifen, wie in Ihrem for(var i in node.childs){ ist heikel und technisch inkorrekt, es sei denn, Sie treffen einige Vorsichtsmaßnahmen in der Schleife; es wird fehlschlagen, wenn Sie irgendetwas Interessantes mit Ihren Arrays machen, wie z.B. mehr Metadaten zu ihnen hinzufügen (Arrays sind nur Objekte, Sie können ihnen beliebige Eigenschaften hinzufügen; und Bibliotheken fügen manchmal Eigenschaften zu Array.prototype um Browserunterschiede auszugleichen, die einen naiven for..in Schleife). Details hier: Mythen und Realitäten der for..in
Sie können schreiben this.childs=new Array(); als this.childs=[]; wenn Sie möchten; sie haben genau die gleiche Wirkung.
Unabhängig davon, wo Sie Ihre var Anweisung in Ihrem Code, wird sie am Anfang der Funktion wirksam (oder am Anfang des globalen Bereichs, wenn die var ist global). Ich denke, dass ich damit ein bisschen auf mich allein gestellt bin, aber ich mag es nicht, wenn mein Code für die Codewartung ein bisschen irreführend ist, also setze ich immer die var ist oben. Mehr hier Armes missverstandenes Kind var . So zum Beispiel:
```
// This series of statements
doSomething();
doSomethingElse();
var a = new Foo();
doAnotherThing();

// ...is *exactly* identical to:
var a;
doSomething();
doSomethingElse();
a = new Foo();
doAnotherThing();
```
Empfehlen Sie eine Funktion auf node das ein Kind erzeugt und es einhängt, so dass Sie die Möglichkeit vermeiden, dass die parent gesetzt wird, aber dann das Kind zum falschen childs Array (oder gar nicht hinzugefügt).
使用する null "kein Elternteil" zu bedeuten, ist in Ordnung, aber undefined ist tatsächlich etwas einfacher zu handhaben.
Sie können die Macht der Der seltsam mächtige OR-Operator von JavaScript (||) an einigen Orten. Sie sehen dies ein Los in JavaScript-Code. if Aussagen sind völlig gut, aber ich hielt es für erwähnenswert, weil es so gängige Praxis ist.
Zahnspangen sind wirklich Ihre Freunde, auch wenn sie nicht notwendig sind.

Das alles und ein paar Kleinigkeiten zusammengenommen:

var rootNode, node1, node2;

function Node(name, parent){
    this.name = name;
    this.parent = parent; // undefined if none
    this.children = [];
}
Node.prototype.level = function(){
    return this.parent ? this.parent.level() + 1 : 0;
};
Node.prototype.addChild = function(name) {
    var child;

    child = new Node(name, this);
    this.children.push(child);
    return child;
};

//create a rootNode, having no parent
rootNode = new Node('AAA');

//create node1 and add it to the child of rootNode
node1 = rootNode.addChild('BBB');

//create node2 and add it to the child of rootNode
node2 = rootNode.addChild('CCC');

//create node3 and add it to the child of node1
node1.addChild('DDD');

//create node4 and add it to the child of node1
node1.addChild('EEE');

//create node5 and add it to the child of node2
node2.addChild('FFF');

function getTreeHTML(node, html) {
    var i;

    html = html || []; // In case they don't give it

    if(node.level()==0) {
        html.push('<ul>');
    }

    html.push('<li>');
    html.push(node.name);
    if (node.children.length > 0) {
        html.push('<ul>');
        for (i = 0; i < node.children.length; ++i) {
            getTreeHTML(node.children[i], html);
        }
        html.push('</ul>');
    }
    html.push('</li>');

    if (node.level() == 0) {
        html.push('</ul>');
    }

    return html;
}

var treeHTML = getTreeHTML(rootNode).join('');
document.getElementById('content').innerHTML=treeHTML;

Beantwortet el 31 de Dezember, 2010 von T.J. Crowder (948310 Punkte )

Answer 3

1voto

Psytronic Punkte 5967

Entfernen Sie die html alles zusammen:

function getTreeHTML(node){
    var html = "";
    if(node.level()==0)
        html+='<ul>';

    html+='<li>';
    html+=node.name;
    if(node.childs.length > 0){
        html+='<ul>';
        for(var i in node.childs){
            html+=getTreeHTML(node.childs[i]);
        }
        html+='</ul>';
    }
    html+='</li>';

    if(node.level()==0)
        html+='</ul>';
    return html;
}

Beantwortet el 31 de Dezember, 2010 von Psytronic (5967 Punkte )

Erzeugen einer ungeordneten Liste aus Javascript-Knotenobjekten

Antworten

Empfohlene Fragen

Top-Tags

CodeJaeger.com

Powered by:

Erzeugen einer ungeordneten Liste aus Javascript-Knotenobjekten

Antworten

Verwandte Fragen

Empfohlene Fragen

Top-Tags

CodeJaeger.com

Powered by: