如何用JavaScript实现网页推送通知？两种实现方式求指导

Hey there! 作为JS新手能主动琢磨不同实现方式的优劣，这点真的很棒👍 咱们来好好聊聊你的问题：

两种实现方案的优劣势对比 #

1. 提前编写HTML+CSS，通过JS控制显隐 #

这种方式是很多新手入门时的首选，优缺点都很明显：

• 优势：
  • 上手门槛低，不用纠结DOM创建的细节，写完HTML和CSS后，只需要用JS切换display或者visibility属性就能控制显示隐藏
  • 结构清晰，HTML负责结构、CSS负责样式，调试起来更直观，改样式直接动CSS就行
  • 性能更友好，页面加载时就完成了DOM解析，后续只是修改样式属性，操作成本极低
• 劣势：
  • 如果需要多种不同类型的通知，提前写一堆隐藏的HTML会让初始DOM显得冗余，虽然对性能影响不大，但不够优雅
  • 灵活性有限，要是想动态修改通知的结构（比如加个图标、换个按钮），得先改HTML模板，没法完全通过JS灵活调整

举个极简实现的例子：

<!-- 提前写好的隐藏通知 -->
<div class="notification" style="display: none;">
  <p>预设的通知文本内容</p>
  <button class="notification-close">关闭</button>
</div>
<button id="show-notice">触发通知</button>

const showBtn = document.getElementById('show-notice');
const notification = document.querySelector('.notification');
const closeBtn = document.querySelector('.notification-close');

showBtn.addEventListener('click', () => {
  notification.style.display = 'block';
});

closeBtn.addEventListener('click', () => {
  notification.style.display = 'none';
});

2. 使用createElement()动态创建DOM #

这种方式更偏向灵活定制，适合有扩展需求的场景：

• 优势：
  • 灵活性拉满，能根据不同场景动态生成不同结构的通知，比如给成功通知加绿色图标、错误通知加红色背景，完全通过JS控制
  • 初始DOM非常干净，不会有一堆隐藏的冗余元素，页面加载更轻快
  • 适合批量生成通知的场景，比如循环创建多条通知
• 劣势：
  • 代码量相对大一些，需要逐个创建元素、设置类名、绑定事件，新手容易在细节上出错
  • 如果频繁创建和销毁DOM，会有轻微的性能开销（不过普通网页场景下基本感知不到）

极简示例如下：

<button id="create-notice">触发通知</button>

const createBtn = document.getElementById('create-notice');

function buildNotification(text = '预设的通知文本内容') {
  // 创建通知容器
  const notice = document.createElement('div');
  notice.className = 'notification';
  
  // 创建文本节点
  const textEl = document.createElement('p');
  textEl.textContent = text;
  
  // 创建关闭按钮
  const closeBtn = document.createElement('button');
  closeBtn.className = 'notification-close';
  closeBtn.textContent = '关闭';
  closeBtn.addEventListener('click', () => {
    notice.remove();
  });
  
  // 组装并添加到页面
  notice.appendChild(textEl);
  notice.appendChild(closeBtn);
  document.body.appendChild(notice);
}

createBtn.addEventListener('click', buildNotification);

市面主流通知插件的实现思路 #

大多数成熟的Toast/Notification类插件，其实是把两种方案的优点结合起来用：

• 提前定义好一套完整的CSS样式（比如通知的固定位置、默认配色、淡入淡出动画等），避免动态创建样式的繁琐
• 核心逻辑采用动态DOM创建，因为要支持自定义内容、不同类型（成功/错误/警告）、插入到指定容器等灵活需求
• 很多插件会做DOM复用优化：比如提前创建几个隐藏的通知元素放到"池子"里，需要显示时就取出一个填充内容并显示，用完再放回池子，避免频繁创建销毁DOM带来的性能损耗
• 额外封装了实用功能：比如自动关闭定时器、通知队列（多个通知依次显示）、点击外部关闭、自定义动画等，这些都是基于动态DOM操作实现的

给你的小建议 #

如果你的需求很简单（固定文本、固定样式的单一种类通知），第一种方案完全够用，快速省心还容易维护；如果之后需要扩展功能（比如多种通知类型、自定义内容），再切换到动态创建的方式，或者直接用成熟插件减少重复造轮子的成本。

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