根据数据渲染DOM树形菜单——中途感想

Posted 2021-01-01 mflnhg

根据数据渲染DOM树形菜单，这个需求做了几天了。一开始觉得用while也可以实现一层一层查找数据，但后来发现while还是做不到，因为我查找这个动作必须有进入有出来然后进入下一个条目，但while只能进去再出来就得靠一些进去前写的一些变量，比如什么oldMenu，但根据数据来渲染的，我们不可能每次都知道数据有几层，每层又有几个子层，子层又有几个子层，我们不可能为这些数据“私人订制”while的嵌套层数，所以还是用递归实现。虽然说递归会占用内存，但目前我的能力只能想到用递归来实现，至于为什么给汽车做的内嵌系统不能用递归，这个以后再了解( 一个新闻上看到的http://www.sohu.com/a/75155172_156793 )。

数据的格式

var json = {

    
    t1:{
        h2:‘第一级菜单‘,
        t1:{
            h2:‘第二级菜单‘,
            t1:{
                h2:‘第三级菜单1‘,
                t1:{
                    h2:‘第四级菜单‘,
                }
            },
            t2:{
                h2:‘第三级菜单2‘,
            },
            t3:{
                h2:‘第三级菜单3‘,
            },
        },
    },

}

 

首先数据不允许裸在json的第一层括号里，其次，每个数据都必须有它的标题  --->   【标题+子集】，这样的格式。

递归用法：每进入一个集合都要个这一层的集合缩进。进入就是进入递归，调用一遍自己。

 

用递归做也是困难重重，首先就是怎样控制缩进，开始没想到后来想到了其实也非常简单，既然进入了要缩进，那进入完事后出来就要把缩进恢复，具体在代码上就是，进入一次递归 i++ ，结束本次递归 i-- ，这样就实现了。

 

然后就是怎样让这个函数只用传进一个格式正确的数据，返回一个嵌套关系正确的DOM结构，这一步实现比较简单，就return出来就行了。

 

总结：做到这里，逐渐发现js的高深之处，就是数据和DOM的配合使用，让我再一次想到那个词 “数据驱动视图” ， 这里的数据应该就是想  　　  

　　【从各种渠道获取到的数据转换成json  --->   格式化json   --->    将格式化的json传入到实现写好的DOM生成函数】

回到我刚刚写的这个根据数据生成DOM树形菜单，假如我加入一个新需求，根据用户添加更新树形菜单，这是不是跟 “数据驱动视图” 有点沾边呢？( 我觉得这个需求再妙味后面的教学里马上就会出现 )。想到这里，才觉得React可能不是一般的难学，是变态难学，而我的学习计划表上，可能要加入一个新的条目：数据结构。