使用 ES6 的 Promise 对象和 Html5 的 Dialog 元素，模拟 JS 的 alert, confirm, prompt 方法的阻断执行功能。
js 原生的 alert() 方法具有阻断程序执行的功能，但是 alert 的界面真心太丑了。第三方弹窗虽然漂亮，但是无法实现阻断程序的功能，只能用可读性极差的回调的写法。
今天突发奇想，能否用 ES6 的最新技术实现模拟 alert 弹窗阻断程序执行的功能呢。幸亏 ES6 真心给力，经过尝试后发现还真能满足要求。废话不多说 ，直接上代码。
<h5>请打开浏览器控制台观察输出信息~</h5>
<button onclick="testAlert()">alert</button>
<button onclick="testConfirm()">confirm</button>
<button onclick="testPrompt()">prompt</button>
<script>
async function testAlert() {
console.log('alert 1');
await alert('hello，程序已被阻断，按确定才会往下执行哦~');
console.log('alert 2');
}
async function testConfirm() {
console.log('confirm 1');
if (await confirm('hello，程序已被阻断，按确定才会往下执行哦~')) {
console.log('confirm 确定');
} else {
console.log('confirm 取消');
}
}
async function testPrompt() {
console.log('prompt 1');
const value = await prompt('hello，程序已被阻断，输入 yes 才能往下走正确流程~');
if (value == 'yes') {
console.log('prompt 2, value=', value);
} else {
console.log('输入错误，要输入 yes 才是正确答案。')
}
}
function alert(msg) {
return new Promise((resolve, reject) => {
let elDialog = document.createElement('dialog');
elDialog.innerHTML = `<form method="dialog">
<p>${msg}</p>
<button type="submit" value="yes">确定</button>
</form>`;
console.log('进入了 alert() 方法，并阻断了程序继续向下执行！按确定关闭弹窗后将继续执行代码。');
document.body.appendChild(elDialog);
elDialog.show();
elDialog.addEventListener('close', (event) => {
document.body.removeChild(elDialog);
resolve();
})
})
}
function confirm(msg) {
return new Promise((resolve, reject) => {
let elDialog = document.createElement('dialog');
elDialog.innerHTML = `<form method="dialog">
<p>${msg}</p>
<button type="submit" value="yes">确定</button>
<button type="submit" value="no">取消</button>
</form>`;
console.log('进入了 confirm() 方法，并阻断了程序继续向下执行！按确定关闭弹窗后将继续执行代码，按取消则不会执行后面的程序。');
document.body.appendChild(elDialog);
elDialog.show();
elDialog.addEventListener('close', (event) => {
document.body.removeChild(elDialog);
resolve(elDialog.returnValue == 'yes');
})
})
}
function prompt(msg) {
return new Promise((resolve, reject) => {
let elDialog = document.createElement('dialog');
elDialog.innerHTML = `<form method="dialog">
<p>${msg}</p>
<input type="text" />
<button type="submit" value="yes">确定</button>
<button type="submit" value="no">取消</button>
</form>`;
console.log('进入了 prompt() 方法，并阻断了程序继续向下执行。');
document.body.appendChild(elDialog);
elDialog.show();
elDialog.addEventListener('close', (event) => {
let value = elDialog.querySelector('input').value;
document.body.removeChild(elDialog);
resolve(value);
})
})
}
</script>
亲测可用。
使用 Promise 对象封装 Layer 弹窗插件的操作
源码如下：
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/layer/3.1.1/layer.min.js"></script>
<script>
// layer.confirm 方法封装成 Promise 对象
var LayerConfirm = function (options) {
return new Promise((resolve, reject) => {
layer.confirm(options.content, {
btn: ['确定', '取消'] //按钮
}, function () {
resolve.call(null, true)
}, function () {
resolve.call(null, false)
});
});
}
// layer.prompt 方法封装成 Promise 对象
var LayerPrompt = function (options) {
return new Promise((resolve, reject) => {
options.content = options.content ? options.content + '<br />' : '';
options.content += '<input type="text" class="layui-layer-input" value="">';
layer.prompt({ title: options.title, content: options.content }, function (val, index) {
layer.close(index);
resolve.call(null, val)
});
});
}
// 测试 LayerConfirm
async function testLayerConfirm() {
if (await LayerConfirm({ content: '您确定要执行此操作吗？' })) {
alert('ok')
} else {
alert('cancel')
}
}
// 测试 LayerPrompt
async function testLayerPrompt() {//默认prompt
let val = await LayerPrompt({ title: '请输入口令', content: '请输入 6 位口令密码：' });
alert(val);
}
testLayerPrompt();
testLayerConfirm();
</script>
版权声明：本文采用署名-非商业性使用-相同方式共享(CC BY-NC-SA 3.0 CN)国际许可协议进行许可,转载请注明作者及出处。
本文标题：使用 ES6 的 Promise 对象和 Html5 的 Dialog 元素，模拟 JS 的 alert, confirm, prompt 方法的阻断执行功能。
本文链接：http://www.cnblogs.com/sochishun/p/13939343.html
本文作者：SoChishun (邮箱:14507247#qq.com | 博客:http://www.cnblogs.com/sochishun/)
发表日期：2020年11月15日
