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创建的。但是，如果你想重现这种行为，你会采用与此类似的方式：

＆＃13;

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); });

＆＃13;

.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%;
}

＆＃13;

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

希望我能帮到这里！

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

我很确定今天（在FF中）警报也是使用浏览器实习生html和CSS呈现的。

confirm（）如何在JavaScript中工作

2 个答案: