confirm()如何在JavaScript中工作

Question

我正在考虑今天JavaScript中的本机函数如何工作,我可以跨越alert()并且我认为它必须使用createElement()或创建一个元素并使用innerHTML,但我无法弄清楚创建一个弹出元素所需的完整代码,以及制作两个按钮,然后返回true或false基于一次点击.
乔斯说:

通常JS是异步的; 为什么警报特别？它是如何以及为什么以与我自己的脚本不同的方式创建UI元素？

这是我想出的代码:

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成为"流",它表现得比正常功能完全不同的特殊功能.当你问为什么:嗯 - 也许在这些日子里有一个很好的功能.请注意,在早期版本中alert看起来像一个系统消息(在IE中仍然如此).至少在Firefox中,即使调用了警报,您现在也可以正常地与浏览器进行交互.
这就是为什么它仅仅用于今天的调试(甚至这里console.log是更好的选择).

我很确定今天(在FF中)警报也是用浏览器实习生html和CSS呈现的.