← 返回目录

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

通用弹窗模板和差异化方案，总结项目里弹窗的标准写法。

核心三步：
1. 遮罩层——半透明黑色盖住页面
2. 弹窗本体——居中显示内容
3. 关闭方式——点遮罩/点取消/点确认

坑：弹窗要 z-index 最高、锁定背景滚动、关闭要清掉事件防止内存泄漏。

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

点按钮体验：轻量成功、醒目错误、确认弹窗三种形态。

16.2 知识点讲解

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

// ===== 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. 重复逻辑抽成函数，别复制粘贴代码

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

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

// ===== 1. showSuccess：轻量成功提示 =====
// 场景：新增/编辑成功、保存成功
// 特点：绿色、轻、2 秒自动消失，不打扰用户
function showSuccess(text) {
  // 创建一个 div 当提示条
  const $tip = $("<div>");

  // 写样式：固定在页面顶部居中
  $tip.attr("style",
    "position:fixed;top:30px;left:50%;transform:translateX(-50%);" +
    "background:#09bb07;color:#fff;padding:8px 16px;border-radius:4px;z-index:9999"
  );

  // 把传进来的文字放上去
  $tip.text(text);

  // 挂到页面上，立刻显示
  $("body").append($tip);

  // 2 秒后自动消失
  setTimeout(function () {
    $tip.remove();
  }, 2000);
}

// ===== 2. showError：错误提示 =====
// 场景：接口失败、参数缺失、操作失败
// 特点：红色、醒目、2.5 秒消失
function showError(text) {
  // 和 showSuccess 差不多，背景色换成红色
}

// ===== 3. showConfirm：危险操作确认 =====
// 场景：删除、退出登录、清空数据
// 特点：黑色遮罩 + 居中弹窗，必须用户点确认才执行
function showConfirm(text, okCallback) {
  // 创建全屏遮罩
  const $mask = $("<div>");

  // 写遮罩样式
  $mask.attr("style",
    "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.html(
    `<div style="background:#fff;padding:30px;border-radius:8px;text-align:center;">
      <p>${text}</p>
      <button class="no-b">取消</button>
      <button class="ok-b">确定</button>
    </div>`
  );

  // 挂到页面上
  $("body").append($mask);

  // 点取消：只删遮罩，不执行回调
  $mask.find(".no-b").on("click", function () {
    $mask.remove();
  });

  // 点确定：删遮罩 + 执行回调
  $mask.find(".ok-b").on("click", function () {
    $mask.remove();
    okCallback();
  });
}

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

3. 怎么用：业务场景举例

// 接口成功：弹绿色提示
// 等添加用户接口完成
await addUser(data);
// 弹绿色小条，2 秒自动消失
showSuccess("用户新增成功");
// 接口失败：拦截器统一弹红色提示
// 上面 await 失败了，走到这里
catch (err) {
  // 弹红色错误提示
  showError(err);
}

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

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

可能在什么地方用：

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

常见的问题：

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

解决思路：

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

一句话：成功 showSuccess 绿、错误 showError 红、危险 showConfirm 确认；三函数全局复用，别用 alert。

16.3 课后作业（融入本节）

练习四：差异化弹窗封装
1. 在 js/common.js 里封装 showSuccess（绿、2 秒）、showError（红、2.5 秒）、showConfirm（遮罩+确定/取消）
2. 页面里引入并测试三个函数。

练习五：代码规范自查对照下面清单检查自己之前写的代码：变量名语义化吗？用了 const/let 吗？字符串统一单引号了吗？接口请求统一封装了吗？异步用 async/await 了吗？提交前删 console.log 了吗？

本页重点

API作用参数返回值代码示例
showSuccess(text)弹绿色轻量成功提示入参：一句话2 秒自动消失showSuccess("操作成功");
showError(text)弹红色醒目错误提示入参：一句话2.5 秒后消失showError("出错了");
showConfirm(text,cb)危险操作遮罩确认入参：文字、确定回调点确定才执行showConfirm("确定删？", function () { });
setTimeout(fn,ms)控制提示自动消失入参：函数、毫秒返回：定时器 idsetTimeout(function () { tip.remove(); }, 2000);
el.remove()把提示条从页面删掉无返回：无tip.remove();