← 返回目录

16. 通用规范模板与差异化弹窗方案

别再用原生 alert 应付所有提示了！成功、错误、危险操作是三种完全不同的场景，长得一模一样的弹窗用户分不清轻重。成功要轻（绿色、2 秒自动消失）、错误要醒目（红色、看清楚）、危险操作要确认（弹窗、点确定才执行）——三个工具函数全局复用，界面专业度立刻上一个档次。

16.1 互动演示（三种弹窗真实体验）

16.2 知识点讲解

① 通用项目规范模板（速查清单）

// ===== HTML 规范 =====
1. 标签语义化， 层级别套太多层；
2. 引入资源顺序： css 先行→ 第三方 js(jQuery) 次之→ 页面业务 js 最后；
3. 页面结构分层， 用注释区分头部、 内容、 底部。

// ===== CSS 规范 =====
1. 类名有含义（ 别用.div1、.box2 这种）；
2. 公共样式提去 common.css， 别每页重复写；
3. 样式层级别套太深， 避免多层嵌套。

// ===== JS 编码规范 =====
1. 统一用
const /
let， 别用
var；
  2. 字符串统一用单引号；
3. 接口请求统一用封装好的 request， 别页面里直接写 XHR；
4. 异步统一 async / await +
  try /
  catch；
5. 高频按钮配防抖 / 节流；
6. 重复逻辑抽成函数， 别复制粘贴代码。

② 三种弹窗：成功 / 错误 / 确认

三种提示场景，三个函数，别混用：

// ===== 1. showSuccess：轻量成功提示 =====
// 场景：新增/编辑成功、保存成功
// 特点：绿色、轻、2 秒自动消失，不打扰用户
function showSuccess(text) { // 调用时传一句话，比如 showSuccess("保存成功")
  const tip = document.createElement("div"); // 动态创建一个 div 当提示条
  tip.style.cssText = // 用 cssText 一次性写好所有样式
    "position:fixed;top:30px;left:50%;transform:translateX(-50%);" + // 固定在页面顶部居中
    "background:#09bb07;color:#fff;padding:8px 16px;border-radius:4px;z-index:9999"; // 绿色背景白字
  tip.innerText = text; // 把传进来的文字放上去
  document.body.appendChild(tip); // 挂到页面上，立刻显示
  setTimeout(() => tip.remove(), 2000); // 2 秒后自动消失，不用点（箭头函数写 ()，remove 是方法加括号）
}

// ===== 2. showError：错误提示 =====
// 场景：接口失败、参数缺失、操作失败
// 特点：红色、醒目、2.5 秒消失，让用户能看清
function showError(text) {
  // 和上面差不多，背景色换成 #f56c6c，时间 2500ms
}

// ===== 3. showConfirm：危险操作确认 =====
// 场景：删除、退出登录、清空数据
// 特点：黑色遮罩 + 居中弹窗，必须用户点确认才执行
function showConfirm(text, okCallback) { // 传提示文字 + 点确定后要执行的函数
  const mask = document.createElement("div"); // 创建全屏遮罩 div
  mask.style.cssText = // 遮罩样式：盖住全屏、半透明黑
    "position:fixed;top:0;left:0;width:100%;height:100%;" +
    "background:rgba(0,0,0,.5);display:flex;justify-content:center;" +
    "align-items:center;z-index:9999";
  mask.innerHTML = `<div style="background:#fff;padding:30px;border-radius:8px;text-align:center;">
		<p>${text}</p>
		<button onclick="this.closest('div').parentElement.remove()">取消</button>
		<button onclick="this.closest('div').parentElement.remove(); okCallback()">确定</button>
	</div>`;
  document.body.appendChild(mask); // 把遮罩+弹窗挂到页面上，弹出来
}

公共弹窗写进 common.js 全局复用——所有页面直接调 showSuccess / showError / showConfirm，不用每页自己写弹窗 HTML 和样式。

③ 怎么用：业务场景举例

// 接口成功：弹绿色提示
await addUser(data); // 等添加用户接口完成
showSuccess("用户新增成功"); // 弹绿色小条，2 秒自动消失

// 接口失败：拦截器统一弹红色提示
catch (err) { // 上面 await 失败了，走到这里
  showError(err); // 弹红色错误提示
}

// 删除前：先确认，用户点了确定才真删
showConfirm("确定删除该商品？", async => { // 弹确认框，用户点确定才执行回调
  await deleteGoods(id); // 等删除接口完成
  renderList(); // 重新渲染列表
  showSuccess("删除完成"); // 弹绿色提示
});

④ 实战：用在哪 / 常见坑 / 怎么解决

可能在什么地方用：

① 所有操作反馈——保存成功、删除成功用绿色 toast；② 接口报错用红色 toast；③ 删除、退出等不可逆操作前用确认弹窗。

常见的问题：

① 所有提示都用 alert——丑、不能区分类型、挡视线；② 弹窗 DOM 每页都写一遍，样式不统一；③ 删除不确认，用户手滑误删；④ showConfirm 的回调里 this 指错了。

解决思路：

① 三个函数封装到 common.js，全局调用；② 成功/错误用 toast（自动消失），危险操作用遮罩确认弹窗；③ 删除、清空、退出这类不可逆操作必须 showConfirm；④ 回调函数里用箭头函数或者把 this 存起来。

16.3 课后作业（融入本节）