json动态加载导航菜单

JSON（JavaScript Object Notation）是一种轻量级的数据交换格式，易于人阅读和编写，同时也易于机器解析和生成。在动态加载导航菜单的场景中，JSON可以用来存储菜单的结构和内容，然后通过JavaScript来解析和渲染这个菜单。

基础概念

JSON格式：键值对的集合，可以表示对象、数组等数据结构。
动态加载：指的是在页面加载后，根据用户的交互或其他条件，通过JavaScript异步获取数据并更新页面内容。

优势

灵活性：JSON格式灵活，易于扩展和修改菜单结构。
性能：相比静态HTML，动态加载可以减少初始页面大小，提高加载速度。
可维护性：将菜单数据与页面逻辑分离，便于管理和维护。

类型

静态JSON：提前定义好的JSON文件，内容固定。
动态JSON：通过API请求实时获取的JSON数据。

应用场景

大型网站：需要根据用户角色或权限显示不同的菜单。
单页应用（SPA）：菜单内容需要频繁更新。
个性化设置：用户可以根据自己的偏好自定义菜单。

示例代码

假设我们有一个简单的JSON数据表示导航菜单：

[
    {
        "name": "首页",
        "url": "/home"
    },
    {
        "name": "产品",
        "url": "/products",
        "children": [
            {
                "name": "产品A",
                "url": "/products/a"
            },
            {
                "name": "产品B",
                "url": "/products/b"
            }
        ]
    },
    {
        "name": "关于我们",
        "url": "/about"
    }
]

使用JavaScript动态加载并渲染这个菜单：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>动态导航菜单</title>
</head>
<body>
    <nav id="main-nav"></nav>

    <script>
        // 假设这是从服务器获取的JSON数据
        const menuData = [
            {
                "name": "首页",
                "url": "/home"
            },
            {
                "name": "产品",
                "url": "/products",
                "children": [
                    {
                        "name": "产品A",
                        "url": "/products/a"
                    },
                    {
                        "name": "产品B",
                        "url": "/products/b"
                    }
                ]
            },
            {
                "name": "关于我们",
                "url": "/about"
            }
        ];

        function createMenu(items) {
            let ul = document.createElement('ul');
            items.forEach(item => {
                let li = document.createElement('li');
                let a = document.createElement('a');
                a.href = item.url;
                a.textContent = item.name;
                li.appendChild(a);
                if (item.children) {
                    li.appendChild(createMenu(item.children));
                }
                ul.appendChild(li);
            });
            return ul;
        }

        document.getElementById('main-nav').appendChild(createMenu(menuData));
    </script>
</body>
</html>