个人中心
gpt4 book ai didi

javascript - 从 javascript 节点对象生成无序列表

转载 作者：行者123 更新时间：2023-11-29 17:30:37 24 4
gpt4 key购买 nike

我写了下面的代码，这些代码的目的是从一些javascript节点对象生成一个<ul>:

<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>

在rootNode下，有两个直接子节点，对于这两个子节点，其中一个应该有两个 childs 子节点，另一个应该有一个子节点。我怀疑 getTreeHTML() 函数中存在逻辑错误，但我无法弄清楚它是什么，请随意将代码粘贴到 http://htmledit.squarefree.com/ 上，然后您很快就会明白我的意思。

非常感谢大家。

最佳答案

问题出在这里:

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

您最终向 HTML 字符串添加了两次，因为在函数中您附加到传入的 HTML 字符串，但随后您还对返回的内容使用了附加操作。如果将其更改为其中任何一个，它都可以正常工作:

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

题外话:如果您有兴趣，可以提出一些建议/建议/观察；以下所有内容都不是关键的，只是有帮助的:

  1. 如果您在一个数组中构建一堆字符串，然后使用 join('') 将它们全部放在一个字符串中，而不是连接字符串，通常会更快完成了。
  2. 标准做法(您可以随意忽略!)是使构造函数像 node initially capped (Node)，以将它们与非构造函数区分开来.

  3. 您的每个 node 对象都将获得其自己的 level 函数的副本，这在您的代码中不是必需的.它们都可以共享一个 level 函数，就像这样:

    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;                    
    }

  4. 在英语中，“child”的复数形式是“children”(不规则)。

  5. 使用 for..in 遍历数组索引，就像在您的 for(var i in node.childs){ 中一样，这是微妙的并且在技术上是不正确的，除非您采取循环中的一些预防措施；如果你对数组做任何有趣的事情，比如向它们添加更多元数据，它将失败(数组只是对象，你可以向它们添加任意属性；库有时会向 Array.prototype 添加属性以消除浏览器差异，这将搞砸一个天真的 for..in 循环)。详情在这里:Myths and realities of for..in
  6. 如果愿意，您可以将 this.childs=new Array(); 写成 this.childs=[];；它们具有完全相同的效果。

  7. 无论您将 var 语句放在代码中的什么位置，它都会在函数的顶部生效(或者在全局范围的顶部，如果 var 是全局的)。我认为我对此有点独立，但我不喜欢让我的代码对代码维护者产生误导，所以我总是将 var 放在最前面。更多信息 Poor misunderstood var .例如:

    // This series of statements
    doSomething();
    doSomethingElse();
    var a = new Foo();
    doAnotherThing();


    // ...is *exactly* identical to:
    var a;
    doSomething();
    doSomethingElse();
    a = new Foo();
    doAnotherThing();

  8. 推荐在 node 上创建一个子节点并将其连接起来的函数，这样可以避免设置 parent 但随后将子节点添加到的可能性错误的 childs 数组(或根本没有添加)。

  9. 使用 null 表示“没有父级”很好，但 undefined 实际上更容易处理。
  10. 您可以使用 JavaScript's Curiously-Powerful OR Operator (||) 的力量在一些地方。您会在 JavaScript 代码中看到 很多。 if 语句完全没问题，但我认为值得一提，因为这是很常见的做法。
  11. 牙套真的是您的 friend ，即使它们不是必需的。

将所有这些和一些小事放在一起:

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;

关于javascript - 从 javascript 节点对象生成无序列表，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/4569041/

24 4 0
文章推荐： php - Laravel 5.4 查询包含 JSON 数组的 JSON 字段
文章推荐： php - 如何从数组输出中隐藏/显示 div
文章推荐： php - PDO 限制查询在执行中使用绑定(bind)不起作用
文章推荐： mysql - 使用 Node + Express + Sequelize +(Mysql 或 Postgres)构建 SaaS 产品
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com