使用 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>

亲测可用。

---

版权声明：本文采用署名-非商业性使用-相同方式共享(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日