layer-esm v1.0.1: 面向现代 Web 项目的 Layer 风格弹层库

layer-esm 的定位

layer-esm 为 Web 应用提供弹层、消息提示和对话框功能。常用 API 包括 msg、confirm 和 load。主要变化在于接入方式。旧版代码依赖全局 window.layer，新代码则从 npm 包导入所需 API。

安装与导入

安装

运行以下命令安装 layer-esm:

npm install layer-esm

导入所需 API

从包中导入当前模块所需的 API，可以让依赖关系更清晰:

import { close, confirm, load, msg } from "layer-esm";

如果需要保留类似命名空间的调用方式，也可以使用默认导出:

import layer from "layer-esm";

layer.msg("保存成功");

基本用法

使用 msg 显示消息

msg 适合显示保存成功、操作完成和轻量提醒等简短反馈:

import { msg } from "layer-esm";

msg("保存成功");

使用 confirm 请求确认

当用户必须确认是否继续操作时，可以使用 confirm:

import { confirm, msg } from "layer-esm";

confirm("是否继续删除这条记录？", {
  btn: [ "删除", "取消" ],
}, () => {
  msg("已删除");
}, () => {
  msg("已取消");
});

第一个回调处理确认操作，第二个回调处理取消操作。

使用 load 标识加载状态

load 返回弹层索引。加载弹层不会自动关闭。任务结束后，将该索引传给 close:

import { close, load } from "layer-esm";

const loadingIndex = load();

setTimeout(() => {
  close(loadingIndex);
}, 1500);

load 支持以下 3 种加载样式:

load(0);
load(1);
load(2);

无论任务成功还是失败，都应关闭加载弹层，避免页面残留加载状态。

从旧版 Layer 迁移

更改接入方式

迁移的核心是使用 npm 包导入替代全局脚本依赖。

旧版写法:

<script src="layer.js"></script>
<script>
  layer.msg("保存成功");
</script>

layer-esm 写法:

import { msg } from "layer-esm";

msg("保存成功");

替换常用 API

消息提示

旧版写法:

layer.msg("一段提示信息");

layer-esm 写法:

import { msg } from "layer-esm";

msg("一段提示信息");

确认对话框

旧版写法:

layer.confirm("如何看待前端开发？", {
  btn: ["重要", "特别"],
}, function () {
  layer.msg("确实很重要");
}, function () {
  layer.msg("这种回答也可以");
});

layer-esm 写法:

import { confirm, msg } from "layer-esm";

confirm("如何看待前端开发？", {
  btn: [ "重要", "特别" ],
}, () => {
  msg("确实很重要");
}, () => {
  msg("这种回答也可以");
});

加载提示

旧版写法:

var index = layer.load();

setTimeout(function () {
  layer.close(index);
}, 1500);

layer-esm 写法:

import { close, load } from "layer-esm";

const index = load();

setTimeout(() => {
  close(index);
}, 1500);

逐步完成迁移

建议先迁移 msg、confirm 和 load 等高频调用。只导入当前模块需要的方法，可以减少 layer.xxx 形式的层级访问，也便于识别依赖。

按页面或功能模块逐步替换弹层逻辑。可以先处理保存提示、删除确认和加载遮罩。确认这些场景行为正确后，再迁移其他功能。删除旧版依赖前，请验证选项和回调行为。

内容安全

为了兼容 Layer，字符串类型的 content 会被视为可信 HTML。请勿直接传入不可信的用户输入。应先清理不可信的 HTML，或者在需要结构化 DOM 内容时使用 HTMLElement。

版权声明

本文为原创文章，作者保留版权。转载请保留本文完整内容，并以超链接形式注明作者及原文出处。

作者: 除除
原文: chengchuu.github.io/?p=6443