1. 引言
无限级联菜单常见于网站或者应用中的分类筛选功能，其主要应用场景是帮助用户快速定位目标内容。在Web开发过程中，使用JavaScript实现无限级联菜单是一个基本的需求和技能。
2. 实现原理
无限级联菜单的实现基于以下原理：
2.1 数据结构
在无限级联菜单中，每一个菜单元素都有下一级的菜单。因此，我们可以把无限级联菜单的数据结构设计成嵌套的对象或者数组。
const menu = [
{
name: '菜单1',
children: [
{
name: '菜单1-1',
children: []
},
{
name: '菜单1-2',
children: [
{
name: '菜单1-2-1',
children: []
},
{
name: '菜单1-2-2',
children: []
}
]
}
]
},
{
name: '菜单2',
children: []
}
];
以上数据结构可表示一个包含两个顶层菜单项的无限级联菜单，其中“菜单1”下有两个二级菜单项，“菜单1-2”又有两个三级菜单项。
2.2 动态渲染
实现无限级联菜单的关键在于动态渲染菜单项，使得菜单项按照其数据结构层级展开。因此，我们需要使用递归函数。
function renderMenu(menu, level = 1) {
const ul = document.createElement('ul');
ul.classList.add('menu-level-' + level);
for (const item of menu) {
const li = document.createElement('li');
const a = document.createElement('a');
a.textContent = item.name;
li.appendChild(a);
if (item.children && item.children.length > 0) {
const subMenu = renderMenu(item.children, level + 1);
li.appendChild(subMenu);
}
ul.appendChild(li);
}
return ul;
}
const menuElement = renderMenu(menu);
document.body.appendChild(menuElement);
以上代码中，renderMenu()函数接受一个菜单数据和一个层级参数，第一次调用时层级为1。函数创建一个ul元素，表示一层菜单项，遍历菜单数据的每一项，为每一项创建li元素和a元素，并插入到ul元素中。如果该项有子菜单，则递归调用renderMenu()创建子菜单，并将子菜单插入到该项li元素中。最后，函数返回ul元素。
3. 示例实现
以下是一个使用JavaScript实现的无限级联菜单的简单示例。该示例创建了一个菜单对象，并使用递归函数renderMenu()渲染菜单。
const menu = [
{
name: '电脑',
children: [
{
name: '笔记本电脑',
children: [
{
name: '游戏本'
},
{
name: '轻薄本'
}
]
},
{
name: '台式电脑',
children: [
{
name: '游戏主机'
},
{
name: '商用台式机'
}
]
}
]
},
{
name: '手机',
children: [
{
name: '苹果手机',
children: [
{
name: 'iPhone 12'
},
{
name: 'iPhone 11'
}
]
},
{
name: '华为手机',
children: [
{
name: 'Mate 40'
},
{
name: 'P40'
}
]
}
]
}
];
function renderMenu(menu, level = 1) {
const ul = document.createElement('ul');
ul.classList.add('menu-level-' + level);
for (const item of menu) {
const li = document.createElement('li');
const a = document.createElement('a');
a.textContent = item.name;
li.appendChild(a);
if (item.children && item.children.length > 0) {
const subMenu = renderMenu(item.children, level + 1);
li.appendChild(subMenu);
}
ul.appendChild(li);
}
return ul;
}
const menuElement = renderMenu(menu);
document.body.appendChild(menuElement);
运行以上代码，会在页面上渲染出一个无限级联菜单，样式如下：
.menu-level-1 {
background-color: #eee;
}
.menu-level-2 {
background-color: #ddd;
}
.menu-level-3 {
background-color: #ccc;
}
a {
display: block;
padding: 0.5rem;
text-decoration: none;
color: #333;
}
li {
list-style: none;
}
此时，我们可以打开浏览器的开发者工具查看页面结构，可以看到每一层的菜单都被用ul和li元素嵌套展示出来了。
4. 总结
无限级联菜单的实现虽然看起来很简单，但是要考虑到对数据的处理和递归渲染的实现。递归的优势在于可以适应任意层级的数据结构，但是也要注意递归深度，避免无限递归。
除了使用JS实现无限级联菜单，也可以使用现有的UI框架，如Bootstrap或者Element UI等，来快速搭建无限级联菜单的界面。
无限级联菜单的应用场景较为广泛，如分类筛选、地区选择、多级菜单等。因此，掌握实现无限级联菜单的技能对于Web前端开发者来说是一个很基础的需求。