confirm() 如何在 JavaScript 中工作

Question

我在想今天 JavaScript 中的原生函数是如何工作的，我可以跨越 alert() 我认为它必须使用 createElement() 或创建一个元素并使用 innerHTML，但我无法弄清楚创建弹出元素所需的完整代码，并制作两个按钮，然后 return true 或 false 基于单击.
乔斯说：

usually JS is async; why is alert special? how and why does it create UI elements in a different way from my own scripts?

这是我想出的代码：

function confirm(message) {
    message = message.replace(/"\n"/g, "<br />")
    createElement();
//The create Element is very complicated to create the text box including message. . .
//These two functions are tied to the button's onclick's.
    function clickOkay() {
        valueToReturn = true
        return true;
    }
    function clickCancel() {
        valueToReturn = true
        return false;
    }
    //here, the user hits the button, and sets valueToReturn
    return valueToReturn;
}

但我不明白它是如何停止后台脚本的，如果可以访问，或者 createElement() 是如何工作的，（但那是另一个问题）

Answer 1

alert、confirm、prompt都是浏览器实现的DOM API。它们不会创建 DOM 元素来表示它们，并且它们的功能无法用 JavaScript 完全重新创建，因为您不能强制 JavaScript 引擎等待用户单击您的按钮之一。您只能通过要求包含您创建的对话框结果的回调来接近。

function customConfirm(message, callback) {
    message = message.replace(/"\n"/g, "<br />")
    createElement();
    //The create Element is very complicated to create the text box including message. . .
    function clickOkay() {
        callback(true);
    }
    function clickCancel() {
        callback(false);
    }
}
customConfirm("Hello World!", function (result) {
    console.log(result);
});

Answer 2

confirm()-功能是每个浏览器都为您提供的本机功能。它不是使用 javascript 创建的。但是，如果您想重现该行为，您可以采用类似于此的方式：

function myConfirm(text, cb){
    
    // We need this later
    var body = document.getElementsByTagName('body')[0];
     
    // First we create a div which holds the alert and give it a class to style it with css
    var overlay = document.createElement('div');
    overlay.className = 'myConfirm';
  
    // The box holds the content
    var box = document.createElement('div');
  
    var p = document.createElement('p');
    p.appendChild(document.createTextNode(text));
  
    // We append the text to the div
    box.appendChild(p);
    
    // Create yes and no button
    var yesButton = document.createElement('button');
    var noButton = document.createElement('button');
    
    // Add text and events to the buttons    
    yesButton.appendChild(document.createTextNode('Yes'));
    yesButton.addEventListener('click', function(){ cb(true); body.removeChild(overlay); }, false);
    noButton.appendChild(document.createTextNode('No'));
    noButton.addEventListener('click', function(){ cb(false); body.removeChild(overlay); }, false);
    
    // Append the buttons to the box
    box.appendChild(yesButton);
    box.appendChild(noButton);

    // Append the box to the Overlay
    overlay.appendChild(box)
    
    // insert the Overlay with box into the dom    
    body.appendChild(overlay);
    
}

myConfirm('Hello there!', function(value){ console.log(value); });

.myConfirm{
  position:fixed;
  width:100%;
  height:100%;
  background:rgba(0,0,0,0.05);
}

.myConfirm>div{
  width:200px;
  margin:10% auto;
  padding:10px 20px;
  border:1px solid black;
  background:#ccc;
}

.myConfirm div p{
  text-align:center;
}

.myConfirm div button{
  width:40%;
  margin:0 5%;
}

这可能是一个自制警告框的实现。
请注意 本机警报是一个 synchronous 函数。这意味着浏览器会停止 JavasScript 引擎，直到警告框关闭。您无法复制该行为，但至少可以为该函数提供一个回调，在单击其中一个按钮时调用该回调。在这种情况下，回调只是将值记录到控制台。

希望我能在这里提供帮助！

更新更新问题
在 JavaScript 刚刚兴起的时代，confirm 是向用户询问特定值的有效方式。 confirm、prompt 和 alert 是当今的特殊函数，它们的行为与普通函数完全不同，因为它们破坏了 JavaScript-"flow"。当你问为什么时：嗯 - 也许在这些日子里拥有功能是件好事。请注意，在早期版本中 alert 看起来像系统消息（在 IE 中仍然如此）。至少在 Firefox 中，即使调用了警报，您现在也可以与浏览器正常交互。
这就是为什么它今天仅用于调试（甚至在这里 console.log 是更好的选择）。

我很确定今天（在 FF 中）警报也是使用 browser-intern html 和 CSS 呈现的。

confirm() 如何在 JavaScript 中工作

How does confirm() work in JavaScript

html

javascript

alert

function