如何在JS卡片中展示用户数据？跨JS文件数据连接咨询

1. 拆分并导出用户数据 #

把userData单独放到userData.js文件中，用ES模块规范导出：

// userData.js
export const userData = [
    {
        "id": 1,
        "name": "John",
        "description": "fafewqrewrqwer2322revzd",
        "profilePicture": "https://images.unsplash.com/1535713875002-d1d0cf377fde?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=580&q=80"
    },
    {
        "id": 2,
        "name": "Josh",
        "description": "qweqwsxasdqwew",
        "profilePicture": "https://images.unsplash.com/photo-1570295999919-56ceb5ecca61?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=580&q=80"
    },
    {
        "id": 3,
        "name": "Jane",
        "description": "yjtykyumjhjhjkgjhhjkhkj",
        "profilePicture": "https://media.istockphoto.com/photos/elegant-beauty-picture-id516208984?k=20&m=516208984&s=612x612&w=0&h=KooFBmqHtO2lz5CFV5Oe87u_12wgKCxHvTHxlYuErCU="
    },
    {
        "id": 4,
        "name": "Iness",
        "description": "k4jh23k4jh23kjhk2jhk",
        "profilePicture": "https://images.unsplash.com/photo-1573496359142-b8d87734a5a2?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=388&q=80"
    }
];

2. 修改HTML的脚本引入方式 #

由于使用ES模块，需要给script标签添加type="module"属性：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="style.css">
    <script src='./script.js' type="module"></script> 
    <title>Usercards</title>
</head>
<body>
    <div id="root"></div>
</body>
</html>

3. 编写卡片渲染逻辑 #

在script.js中导入用户数据，修复渲染函数，动态将用户信息注入卡片：

// script.js
import { userData } from './userData.js';

const root = document.querySelector('#root');

// 创建单个用户卡片
function createUserCard(user) {
    // 卡片容器
    const section = document.createElement('section');
    section.classList.add('section');

    // 头像容器
    const article = document.createElement('article');
    article.classList.add('article');

    // 头像图片
    const img = document.createElement('img');
    img.src = user.profilePicture;
    img.alt = `${user.name} 的头像`;
    img.classList.add('img');

    // 用户名称
    const nameHeading = document.createElement('h1');
    nameHeading.textContent = user.name;
    nameHeading.classList.add('section-name');

    // 用户描述
    const description = document.createElement('p');
    description.textContent = user.description;
    description.classList.add('section-desc');

    // 操作按钮
    const button = document.createElement('button');
    button.classList.add('button');
    button.textContent = '查看资料';

    // 组装元素层级
    article.append(img);
    section.append(article, nameHeading, description, button);

    return section;
}

// 生成所有卡片并挂载到页面
const userCards = userData.map(createUserCard);
root.append(...userCards);

4. 保留原有CSS样式 #

你的CSS代码无需修改，直接沿用即可：

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    font-size: 62.5%;
    --font-size-sm: 2rem;
    --font-size-md: 2.4rem;
}

body {
    min-height: 100vh;
    background-color: blanchedalmond;
}

#root {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 50px;
    padding: 10%;
}

section {
    position: relative;
    padding: 1.2rem;
    width: 100%;
    height: 350px;
    border: 2px solid black;
    background-color: white;
    border-radius: 15px;
}

.section-name {
    font-size: var(--font-size-md, 24px);
}

.section-desc {
    font-size: var(--font-size-sm, 18px);
    padding: 2rem 0;
}

article {
    text-align: center;
    margin-top: 20%;
}

img {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    object-fit: cover;
}

button {
    background-color: hsl(229deg 100% 73%);
    border: none;
    width: 120px;
    height: 40px;
    border-radius: 10px;
    font-size: 15px;
    font-family: Arial, Helvetica, sans-serif;
    color: white;
    cursor: pointer;
    box-shadow: 0 0 5px 0 black;
    margin-top: 20px;
}

关键修复点 #

• 用ES模块实现跨文件数据共享，避免全局变量污染
• 让卡片创建函数接收单个用户数据，动态生成对应内容
• 正确组装DOM元素层级，匹配CSS样式类名
• 确保map函数正确传递用户数据到卡片创建函数

内容的提问来源于stack exchange，提问作者andr_hot