JavaScript 中的自定义确认函数

Question

这是我创建确认框的功能。

我希望该函数根据其中的两个 onclick 函数返回真/假。
但该功能不等待点击。

那么，我能做些什么呢？

function Confirmation(title, message, confirm_button_value) {
  if (
    typeof title !== "undefined" ||
    typeof message !== "undefined" ||
    typeof confirm_button_value !== "undefined"
  ) {
    if (title !== "" || message !== "" || confirm_button_value !== "") {
      var confirmation;

      var confirmation_box = document.createElement("div");
      confirmation_box.classList.add("confirmation_box");

      var title_container = document.createElement("div");
      title_container.classList.add("confirmation_box_title");
      title_container.innerHTML = title;
      confirmation_box.append(title_container);

      var message_container = document.createElement("div");
      message_container.classList.add("confirmation_box_message");
      message_container.innerHTML = message;
      confirmation_box.append(message_container);

      var buttons_container = document.createElement("div");
      buttons_container.classList.add("confirmation_box_buttons");

      var confirm_button = document.createElement("span");
      confirm_button.classList.add("confirmation_box_confirm_button");
      confirm_button.innerHTML = confirm_button_value;
      buttons_container.append(confirm_button);

      var cancel_button = document.createElement("span");
      cancel_button.classList.add("confirmation_box_cancel_button");
      cancel_button.innerHTML = "Cancel";
      buttons_container.append(cancel_button);

      confirmation_box.append(buttons_container);

      document.body.append(confirmation_box);

      confirm_button.onclick = function () {
        confirmation = true;
      };

      cancel_button.onclick = function () {
        confirmation = false;
      };

      return confirmation;
    }
  }
}

（我更喜欢香草解决方案。）

Answer 1

在参数中添加回调函数。 当用户单击任何具有值的按钮时调用回调。

function Confirmation(title, message, confirm_button_value, callback) {
  if (
    typeof title !== "undefined" ||
    typeof message !== "undefined" ||
    typeof confirm_button_value !== "undefined"
  ) {
    if (title !== "" || message !== "" || confirm_button_value !== "") {

      var confirmation_box = document.createElement("div");
      confirmation_box.classList.add("confirmation_box");

      var title_container = document.createElement("div");
      title_container.classList.add("confirmation_box_title");
      title_container.innerHTML = title;
      confirmation_box.append(title_container);

      var message_container = document.createElement("div");
      message_container.classList.add("confirmation_box_message");
      message_container.innerHTML = message;
      confirmation_box.append(message_container);

      var buttons_container = document.createElement("div");
      buttons_container.classList.add("confirmation_box_buttons");

      var confirm_button = document.createElement("span");
      confirm_button.classList.add("confirmation_box_confirm_button");
      confirm_button.innerHTML = confirm_button_value;
      buttons_container.append(confirm_button);

      var cancel_button = document.createElement("span");
      cancel_button.classList.add("confirmation_box_cancel_button");
      cancel_button.innerHTML = "Cancel";
      buttons_container.append(cancel_button);

      confirmation_box.append(buttons_container);

      document.body.append(confirmation_box);

      confirm_button.onclick = function () {
        callback(true);
      };

      cancel_button.onclick = function () {
        callback(false);
      };

    }
  }
}

Answer 2

有3种方法可以解决这个问题

常规回调方法

function Confirmation(title, message, confirm_button_value, callback) {
    if ( typeof title !== "undefined" || typeof message !== "undefined" || typeof confirm_button_value !== "undefined") {
        if (title !== "" || message !== "" || confirm_button_value !== "") {
            
            // removed for brevity
            
            confirm_button.onclick = function () {
                callback(true);
            };

            cancel_button.onclick = function () {
                callback(false);
            };
            return; // important this is here - so we don't throw the bad arguments error
        }
    }
    throw "Bad arguments";
}

用法

try {
    Confirmation("title", "message", "button value", function(result) {
        // handle the selection here
    });
} catch(err) {
    // handle errors here
}

---

或使用 Promises，无论如何这只是美化的回调，因此，任何一种方法都意味着您正在使用回调

function Confirmation(title, message, confirm_button_value) {
    return new Promise((resolve, reject) => {
        if ( typeof title !== "undefined" || typeof message !== "undefined" || typeof confirm_button_value !== "undefined") {
            if (title !== "" || message !== "" || confirm_button_value !== "") {
                
                // removed for brevity
                
                confirm_button.onclick = function () {
                    resolve(true);
                };

                cancel_button.onclick = function () {
                    resolve(false);
                };
                return; // important this is here!!!
            }
        }
        reject("bad arguments");
    });
}

用法

Confirmation("title", "message", "button value")
    .then(result => {
        // handle the selection here
    })
    .catch(err => {
        // handle your error here
    })

---

或者使用 async/await - 这只是 Promises 的语法糖，但是对于那些在 Promises/callbacks 中苦苦挣扎的人来说，代码更容易
这不是魔法，只是糖

确认功能与 Promise 版本相比没有变化 - 虽然用法有所改变

用法 - 只能在async函数内部工作，或现代浏览器中的顶级module

try {
    const result = await Confirmation("title", "message", "button value");
    // handle result here
} catch(err) {
    // handle errors here
}