原生JS手写朋友圈信息流：从数据到渲染的完整实现-代码聚汇网

原生JS手写朋友圈信息流：从数据到渲染的完整实现

刘信华·2026-09-04·阅读 78 GEO检测（免费）

前端基础原生JavaScriptDOM操作

|难度：普通|阅读约 28 分钟

最近有朋友问我，前端基础到底要补到什么程度。我给的建议是，别急着用框架，先像“手写代码实现朋友圈”这种完整页面，用最原始的方式过一遍。这个题目看起来很常见，但它把列表渲染、事件委托、状态同步、时间格式化、本地持久化这些高频能力全串起来了。我更愿意把它当成一次项目复盘来看：不依赖 React、Vue，只用 HTML + CSS + 原生 JavaScript，把一个朋友圈信息流从零写到能正常发布、点赞、评论、看大图。做完之后，你对所谓的数据驱动视图会有非常具体的感知，而不是停留在概念上。

很多同学学完 DOM 操作、数组方法、事件监听，单独拆开都懂，但一问“能不能自己做个完整页面”，就不知道从哪下手。朋友圈这个场景刚刚好：数据结构不算复杂，但交互不少；状态不算多，但每个状态都会影响页面显示；不需要后端，也能用浏览器本地能力模拟出接近真实产品的体验。这个方向对前端入门后想练手、对想复习原生 JS 的同学都适用。本文记录我用原生方式实现一个朋友圈信息流 Demo 的完整过程，包含代码和踩坑点，篇幅会比较长，建议边看边敲。

1. 项目复盘：手写代码实现朋友圈，到底在练什么

1.1 为什么把朋友圈当作练手题目

先解释选这个题目的原因。朋友圈信息流本质上是一组数据集合的视觉化展示：每一个动态就是一条数据，这条数据里有谁发的、发了什么文字、配了什么图、什么时候发的、点赞了哪些人、评论了哪些内容。把这些数据渲染到页面上，就是列表；用户在页面上操作，本质就是在修改这些数据然后重新渲染。这个逻辑几乎是所有前端页面的底层模型。

如果你用 Vue 或者 React 来做，很多东西会被框架自动处理掉，比如数据变化后视图自动更新、事件绑定生命周期等。好处是开发快，坏处是真出了问题，新手很容易一头雾水，因为中间隔着一层封装。手写代码则不同，从数据到 DOM 的所有变化都是自己可控的。你会经历“数据变了但页面没刷新”“事件绑不上”“点击某个区域却触发多个操作”这类非常经典的问题，也会因此真正理解框架在帮你做什么。

1.2 我提前划定的功能范围

因为没有后端，我把项目边界定成纯前端模拟，而不是完整社交产品。我在这个 Demo 中实现了五件事：动态列表展示、发布新动态、点赞和取消点赞、评论提交和展示、点击图片查看大图。用户身份用当前页面的固定用户模拟，其他动态里的用户都通过初始种子数据生成。数据默认存放在接口之外，直接存在浏览器 localStorage 中，好处是刷新页面内容不会丢，坏处是换个浏览器或换台设备就看不到同一份数据，这个取舍需要先说清楚，免得有同学以为是多端同步的真实现，实际上它是一个单机版原型。

另外要说明一点：这里做的是具有朋友圈形态的通用信息流页面，不涉及任何具体产品的界面版权，也没有服务端权限、好友关系、后台审核这些完整链路。这么做不是简化过头，而是把复杂问题拆掉之后，前端要练的重点恰好都落在上述五个功能上。

需要模型API调用？免费领10W Token，多模型网关一键接入 Claude、DeepSeek 等主流模型。

2. 动手前最重要的一步：设计好数据模型

2.1 一条朋友圈动态需要哪些字段

动手写页面之前，我建议先把数据结构写在纸上。朋友圈里的“一条动态”不能只是字符串数组，否则后面点赞和评论时会非常难受。我使用的是对象数组，每条动态对象大概长这样：

js复制{
  id: 101,
  user: { id: "u_cheng", name: "橙子" },
  content: "周末去公园散步，风很舒服。",
  images: [
    "https://picsum.photos/seed/park1/400/400",
    "https://picsum.photos/seed/park2/400/400",
    "https://picsum.photos/seed/park3/400/400"
  ],
  timestamp: Date.now() - 1000 * 60 * 10,
  likes: [
    { id: "u_bei", name: "阿北" },
    { id: "u_lu", name: "小鹿" }
  ],
  comments: [
    {
      id: 1,
      user: { id: "u_bei", name: "阿北" },
      content: "下次叫上我",
      timestamp: Date.now() - 1000 * 60 * 5
    }
  ]
}

字段分开看会容易理解。content 保存文本，images 保存图片地址的数组，timestamp 保存发布时间的时间戳，这样后续格式化时间段很方便；likes 和 comments 都是嵌套数组，表示一对多关系。这里有一个值得养成的习惯：用户信息不要只存一个字符串名字，最好有稳定的 ID。虽然 Demo 里直接显示名字看起来足够，但如果后续要做“点头像进入某人主页”这类功能，没有 ID 就会寸步难行。

2.2 为什么我用时间戳而不是直接存格式化字符串

新版开发者容易犯一个错误：把时间直接存成“2025-01-01 12:00”这种格式化字符串。这样做显示起来方便，但等你想做时间排序、判断是否今天、计算多少分钟前，就会非常别扭。字符串比较大小不一定稳定，提取年月日还要做正则解析，凭空增加复杂度。

正确做法是存储 Date.now() 得到的时间戳。显示的时候要转成“刚刚”“10分钟前”“昨天”这类格式，只需要在渲染函数里临时转换一次，数据层仍然保留原始时间戳。这个理念可以延伸到一个通用习惯：存储和展示要分开，存储层尽量保持信息的原始形态，展示层负责格式化。

2.3 页面布局和基本交互区域

页面结构方面，我参考了比较常见的信息流布局：顶部是一个背景区，背景下方露出固定用户的头像和昵称；接着是发布框；再往下是动态列表。动态列表的每条记录内部又分为头像区、内容区、图片区、时间操作区、点赞列表、评论区和评论输入框。不要小看这个划分，后面渲染函数写起来时，基本就是按这个结构拼接 HTML。

布局确定后，我还顺手定了一个关键渲染约定：用户点击某个操作，代码就找到对应的那条动态、修改该动态对象里的数据，再重新渲染整个 feed。这种先更新数据、再整体渲染的模式虽然简单粗暴，但对于这类无组件状态的中小型页面是足够有效的，而且不容易埋雷。

2.4 数组、JSON 与 localStorage 三者如何联动

前端模拟后端最直接的方式是：页面数据先放在一个 JS 数组中，需要保存时把数组 JSON.stringify，再用 localStorage.setItem 写入；下次打开页面时先读 localStorage，如果读到内容就 JSON.parse 放回数组，没读到就用种子数据初始化。数组是内存里的“数据库”，localStorage 只是持久化通道。整个过程不会真正发送网络请求，但对初学者理解前后端交互模型有非常大的帮助。

不过 localStorage 不是无限容量，浏览器一般给到 5MB 左右，对于纯文本和少量图片链接够用，但如果大量塞 base64 图片极容易爆掉。所以我在 Demo 里用外链图片地址演示，而不是硬编码大量 base64 字符串，如果你完全离线，把每条的 images 改成空数组，功能照样能跑，只是少了图片区的视觉效果。

3. HTML + CSS 先搭出朋友圈信息流的壳

3.1 HTML 骨架与常用节点

整体代码我拆成了三个文件：index.html、style.css、app.js。对这类规模的项目来说，文件和功能边界太细反而增加负担，三个文件刚好。HTML 里面先把页面骨架和操作占位节点写出来，JavaScript 后续负责填内容。骨架如下：

html复制<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>手写代码：实现朋友圈信息流 Demo</title>
  <link rel="stylesheet" href="style.css" />
</head>
<body>
  <div class="page">
    <!-- 顶部个人信息 -->
    <div class="profile">
      <div class="profile-cover"></div>
      <div class="profile-user">
        <div class="avatar lg" id="currentUserAvatar">橙</div>
        <span class="nickname">橙子</span>
      </div>
    </div>

    <!-- 动态发布框 -->
    <div class="publish-box">
      <textarea
        class="publish-input"
        id="publishInput"
        placeholder="分享新鲜事..."
        maxlength="500"
      ></textarea>
      <div class="publish-actions">
        <span class="publish-tip">Ctrl + Enter 发表</span>
        <button type="button" class="publish-btn" id="publishBtn">发表</button>
      </div>
    </div>

    <!-- 动态列表 -->
    <div class="feed-list" id="feedList"></div>
  </div>

  <!-- 图片预览浮层 -->
  <div class="preview-mask hidden" id="previewMask">
    <img id="previewImage" alt="预览图片" />
    <button type="button" class="preview-close" id="previewClose">关闭</button>
    <button type="button" class="preview-prev" id="previewPrev">上一个</button>
    <button type="button" class="preview-next" id="previewNext">下一个</button>
  </div>

  <script src="app.js"></script>
</body>
</html>

我特意把发布框放在页面顶部，而不是像某些产品那样放在底部弹层。这样实现逻辑最简单，后续想改成固定底部只需要加一点点定位样式，不影响数据层。动态列表区留一个空容器，具体每条动态的 DOM 后面由 renderFeed 动态生成。

3.2 CSS 布局里面真正需要注意的点

CSS 不多，但有几个关键点值得展开。首先是整个页面宽度，我使用 max-width: 520px 加 margin: 0 auto，让 PC 浏览器里看手机端原型的效果更集中，不至于拉满全屏显得很奇怪。

其次是头像不要直接用图片 URL。在离线场景下，外部图片头像往往加载失败，我用了一个土办法：用昵称的首字符生成头像，再根据昵称哈希出一个背景色，这样离线也能看到彩色头像。别小看这个技巧，在很多临时后台、内部系统中，这种方案能帮你节省大量维护头像资源的成本。核心样式如下：

css复制.page {
  max-width: 520px;
  margin: 0 auto;
  background: #fff;
  min-height: 100vh;
}

.profile {
  height: 240px;
  background: linear-gradient(135deg, #8fd3ff, #3b7fbd);
  padding: 150px 16px 0;
  color: #fff;
}

.profile-user {
  display: flex;
  align-items: center;
  gap: 12px;
}

.avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 8px;
  color: #fff;
  font-weight: 600;
  font-size: 18px;
  background: #5b8ff9;
  flex-shrink: 0;
}

.avatar.lg {
  width: 64px;
  height: 64px;
  border-radius: 12px;
  font-size: 28px;
  border: 2px solid rgba(255, 255, 255, 0.6);
}

动态列表里每条动态也需要头像和主体内容的两列布局。我把头像固定为 44px，避免内容过长导致布局飘起来。图片区域用 CSS Grid 实现九宫格效果，单张图时限制成一个大图，两张和四张图时用两列布局，其他张数用三列布局，这样接近主流信息流产品的图片呈现习惯：

css复制.feed-item {
  display: flex;
  gap: 12px;
  padding: 16px;
  border-bottom: 1px solid #f2f2f2;
}

.img-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
  margin-top: 8px;
}

.img-grid-2 {
  grid-template-columns: repeat(2, 1fr);
}

.img-grid.img-one {
  grid-template-columns: 1fr;
  max-width: 65%;
}

.img-grid img {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border-radius: 6px;
  background: #f0f0f0;
  cursor: pointer;
}

.time-row {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 10px;
  color: #999;
  font-size: 13px;
}

.action-btn {
  border: none;
  background: none;
  color: #576b95;
  cursor: pointer;
  font-size: 13px;
  padding: 0;
}

这里有一个比较实用的细节：给图片容器设置了 aspect-ratio: 1 / 1 和 object-fit: cover，即使图片原始尺寸不是正方形，也能裁切成视觉整齐的方块。aspect-ratio 在现在的浏览器里兼容性已经足够好，不用担心，旧浏览器也有比例边距的老办法兜底。

3.3 JavaScript 文件的基础数据与初始化函数

CSS 骨架搭好后，接下来才是真正手写核心逻辑的部分。我先在 JS 文件顶部定义基础数据和工具函数。初始化数据时，我用了类似“读不到就直接使用默认种子”的策略，这样第一次打开页面不会白屏，后续你修改过数据也不会被覆盖：

js复制const STORAGE_KEY = "moments_demo_v1";
const currentUser = { id: "u_cheng", name: "橙子" };

const feedList = document.getElementById("feedList");
const publishInput = document.getElementById("publishInput");
const publishBtn = document.getElementById("publishBtn");
const previewMask = document.getElementById("previewMask");
const previewImage = document.getElementById("previewImage");
const previewClose = document.getElementById("previewClose");
const previewPrev = document.getElementById("previewPrev");
const previewNext = document.getElementById("previewNext");

let previewImages = [];
let previewIndex = 0;

function defaultMoments() {
  const now = Date.now();
  return [
    {
      id: 1,
      user: { id: "u_cheng", name: "橙子" },
      content: "周末去公园散步，风很舒服，随手拍了几张照片。",
      images: [
        "https://picsum.photos/seed/park1/400/400",
        "https://picsum.photos/seed/park2/400/400",
        "https://picsum.photos/seed/park3/400/400"
      ],
      timestamp: now - 1000 * 60 * 8,
      likes: [{ id: "u_bei", name: "阿北" }, { id: "u_lu", name: "小鹿" }],
      comments: [
        { id: 1, user: { id: "u_bei", name: "阿北" }, content: "下次叫上我", timestamp: now - 1000 * 60 * 6 }
      ]
    },
    {
      id: 2,
      user: { id: "u_an", name: "阿北" },
      content: "新换的键盘到了，手感超出预期。",
      images: [],
      timestamp: now - 1000 * 60 * 60 * 26,
      likes: [],
      comments: [
        { id: 2, user: { id: "u_lu", name: "小鹿" }, content: "什么轴？", timestamp: now - 1000 * 60 * 60 * 25 }
      ]
    },
    {
      id: 3,
      user: { id: "u_lu", name: "小鹿" },
      content: "记录第一次做蛋糕，虽然卖相一般但味道不错。",
      images: [
        "https://picsum.photos/seed/cake/400/400",
        "https://picsum.photos/seed/cake2/400/400"
      ],
      timestamp: now - 1000 * 60 * 60 * 24 * 3,
      likes: [{ id: "u_cheng", name: "橙子" }],
      comments: []
    }
  ];
}

默认数据里故意安排了三种不同情况：第一条有图片也有评论，第二条只有文本，第三条有两张图片但没有评论。这样开发渲染函数时，可以一次性覆盖大部分 UI 形态。

实际运行的时候，如果想把图片换成本地静态图，把静态图放到项目目录，然后把 images 数组的地址改成相对路径即可，相对路径在本地 file 协议下通常也能正常显示。

4. 原生 JavaScript 实现数据驱动渲染与发布

4.1 渲染入口 renderFeed 怎么写

数据层准备好后，核心就是设计渲染入口。所谓 renderFeed，本质上就是遍历 moments 数组，把每个对象拼成一段 HTML 字符串，最后统一塞进 feedList 容器。不要一听到“数据驱动”就觉得复杂，数据驱动在原始 DOM 操作里的表现就是：数据和 DOM 之间保持单向映射关系，改数据后调用一次 renderFeed，页面和数组就保持一致。

js复制function renderFeed() {
  const html = moments.map(buildMomentHtml).join("");
  feedList.innerHTML = html;
}

function buildMomentHtml(moment) {
  const user = moment.user || { name: "匿名" };
  const userName = escapeHTML(user.name);
  const liked = isLikedByMe(moment);

  return `
    <article class="feed-item" data-id="${moment.id}">
      ${avatarHtml(userName)}
      <div class="feed-content">
        <div class="feed-user">${userName}</div>
        ${moment.content ? `<div class="feed-text">${escapeHTML(moment.content)}</div>` : ""}
        ${imageGridHtml(moment.images)}
        <div class="time-row">
          <span>${formatTime(moment.timestamp)}</span>
          <button type="button" class="action-btn" data-action="toggleLike">
            ${liked ? "取消点赞" : "点赞"}
          </button>
          <button type="button" class="action-btn" data-action="openComment">评论</button>
        </div>
        ${likeListHtml(moment.likes)}
        ${commentListHtml(moment.comments)}
        <div class="comment-editor hidden">
          <input class="comment-input" maxlength="200" placeholder="写评论..." />
          <button type="button" class="comment-submit" data-action="submitComment">发送</button>
        </div>
      </div>
    </article>
  `;
}

buildMomentHtml 中反复出现了一些函数：avatarHtml、imageGridHtml、likeListHtml、commentListHtml、formatTime。每个函数只负责自己那一小块内容。这种拆分方式有两个好处：buildMomentHtml 阅读起来像目录，不会动辄几十行堆在一起；后续要调整图片样式或评论样式，只改对应小函数即可。

4.2 HTML 转义是必做题，不是加分项

写渲染函数时，有一个安全问题必须处理：用户输入的文本如果直接插入 HTML，用户发一段 <script>alert('xss')</script>，页面打开就会弹出弹窗，严重时还能做更多破坏操作。虽然 Demo 里只有本地用户，但请把这个习惯当成肌肉记忆。

我在渲染时对所有不可信文本调用了 escapeHTML：

js复制function escapeHTML(value) {
  return String(value)
    .replaceAll("&", "&amp;")
    .replaceAll("<", "&lt;")
    .replaceAll(">", "&gt;")
    .replaceAll('"', "&quot;")
    .replaceAll("'", "&#39;");
}

替换顺序也有讲究，先替换 &，这样后面生成的实体不会被二次转义。图片 URL 因为来自我自己默认数据，可以直接渲染，但如果是上传用户提供的 URL，还需要增加 http:// 或 https:// 白名单校验，这里不展开讲。

4.3 发布一条新动态要考虑什么

接下来是发布动态。发布按钮监听 click 事件，同时 textarea 监听 Ctrl + Enter 快捷键。执行发布前先去掉首尾空格，空内容直接 return。若内容正常，就构建一个新对象插入 moments 数组的最前面，因为朋友圈通常按时间倒序展示，新发布的内容应该出现在顶部。

js复制function publish() {
  const content = publishInput.value.trim();
  if (!content) return;

  moments.unshift({
    id: nextId(),
    user: { ...currentUser },
    content,
    images: [],
    timestamp: Date.now(),
    likes: [],
    comments: []
  });

  publishInput.value = "";
  saveData();
  renderFeed();
}

function nextId() {
  return Date.now() + Math.floor(Math.random() * 1000);
}

publishBtn.addEventListener("click", publish);
publishInput.addEventListener("keydown", (event) => {
  if (event.key === "Enter" && (event.ctrl