JSON 文件

在 JavaScript 文件中嵌入 JSON 数据的使用方法

除了从 API 或 .json 文件获取 JSON 数据外，你还可以将类似 JSON 的数据直接嵌入到 JavaScript (.js) 文件中。这种方法适用于不经常更改的小型、静态数据集（static datasets）。

这种方法涉及直接在脚本文件（script file）中定义 JavaScript 对象或数组，然后使用它们。

示例：嵌入菜单数据

与其获取 menu.json，不如创建一个名为 menu-data.js 的文件，其中包含数据和一个函数调用。

// 直接将菜单数据定义为 JavaScript 对象数组
const menuData = [
  {
    "display": "JavaScript Basics",
    "url": "/tutorials/javascript/basics"
  },
  {
    "display": "HTML Fundamentals",
    "url": "/tutorials/html/fundamentals"
  },
  {
    "display": "CSS Styling",
    "url": "/tutorials/css/styling"
  }
];

// 立即调用显示函数（在 HTML 文件中定义）
// 确保此脚本运行前函数已存在
if (typeof displayMenu === 'function') {
    displayMenu(menuData);
} else {
    console.error('displayMenu function not found. Ensure menu-data.js is loaded after the function definition.');
}

HTML 文件 (`index.html`)：

HTML 文件定义了容器（container）和 displayMenu 函数，然后加载 menu-data.js 脚本。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Embedded JSON Data Example</title>
</head>
<body>

    <h1>Tutorial Menu (Embedded Data)</h1>
    <div id="menuContainer"></div>
    <p id="errorContainer" style="color: red;"></p>

    <script>
        // 定义将显示数据的函数
        function displayMenu(items) {
            const menuContainer = document.getElementById('menuContainer');
            const errorContainer = document.getElementById('errorContainer');

            // 清除任何先前的内容/错误
            menuContainer.innerHTML = '';
            errorContainer.textContent = '';

            if (!Array.isArray(items)) {
                errorContainer.textContent = 'Invalid menu data format provided.';
                return;
            }

            // 创建一个列表元素
            const ul = document.createElement('ul');

            // 为每个菜单项创建列表项
            items.forEach(item => {
                const li = document.createElement('li');
                const a = document.createElement('a');
                a.href = item.url;
                // 使用 textContent 以确保安全（如果数据是动态的，可防止潜在的 XSS 攻击）
                a.textContent = item.display;
                li.appendChild(a);
                ul.appendChild(li);
            });

            // 将列表添加到容器
            menuContainer.appendChild(ul);
        }
    </script>

    <!-- 加载包含数据和函数调用的 JavaScript 文件 -->
    <!-- 此脚本必须在定义 displayMenu 函数*之后*加载 -->
    <script src="menu-data.js"></script>

</body>
</html>

解释和注意事项

数据定义 (Data Definition)： 数据 (menuData) 直接在 menu-data.js 中定义为一个标准的 JavaScript 对象数组。
函数定义 (Function Definition)： displayMenu 函数知道如何渲染这些数据，它在主 HTML 文件的 script 标签中定义。
脚本加载顺序 (Script Loading Order)： 至关重要的是，menu-data.js 脚本必须在 displayMenu 函数定义之后包含。这确保了当 menu-data.js 尝试调用 displayMenu 时，该函数是存在的。
执行 (Execution)： 当 menu-data.js 加载时，它定义了 menuData 常量，并立即调用 displayMenu(menuData)，将嵌入的数据直接传递给渲染函数。

优点：

适用于小型、静态数据集，实现简单。
无需通过 HTTP 请求获取数据，潜在加快初始加载速度。
数据与 JavaScript 代码捆绑在一起。

缺点：

数据与代码混杂，可能降低可维护性（maintainable）。
更新数据需要修改 JavaScript 文件，并可能需要重新部署脚本。
不适用于大型数据集，因为它会增加初始脚本加载大小。
无法轻易被期望标准 JSON API 端点（API endpoint）或文件的其他应用程序或服务使用。
需要仔细管理脚本加载顺序。

这种方法不如通过 HTTP 获取 JSON 数据常见，尤其对于动态数据（dynamic data）而言。但它对于特定 JavaScript 应用程序（JavaScript application）中的配置或小型、不变的数据集可能很有用。

JSON 文件

在 JavaScript 文件中嵌入 JSON 数据的使用方法

示例：嵌入菜单数据

menu-data.js 文件：

HTML 文件 (index.html)：

解释和注意事项

优点：

缺点：

`menu-data.js` 文件：

HTML 文件 (`index.html`)：