前言
很多做前端開發(fā)的朋友偶爾會跟我抱怨：前端技術可謂日新月異轮蜕，平時需要花大量的時間去學習更新知識庫，也難以保證不會落伍收壕。追求最新的前端開發(fā)技術妓灌，就好像追“芝諾的烏龜”一樣，無論多努力蜜宪，我們永遠是落后的一方虫埂。
是的，我也不得不承認前端技術大神制輪子的速度永遠領先于我們端壳。那又何妨告丢，難倒沒有最新的技術加持枪蘑，我們以前開發(fā)的系統(tǒng)就會崩塌嗎损谦？事實上，這種情況并不會發(fā)生岳颇，反而盲目追求新技術對系統(tǒng)造成的不確定性才是最致命的照捡。
我認為，原生的低級的技術才是最穩(wěn)定话侧，最可靠的栗精。所以，今天我們暫且拋卻所有新生代技術瞻鹏，回歸原生HTML5悲立，探究一下還有什么冷知識，是我們之前不曾涉足的新博。比如薪夕，我們下面即將開始研究的這個組件。
模態(tài)對話框組件
假設您的項目有個需求赫悄，寫一個模態(tài)對話框原献，首先你會想到用什么技術來實現馏慨？
- 用JQuery的插件？用Css自己做一個浮動Div層姑隅？
其實写隶，以上的都不需要。因為原生的HTML其實是自帶Dialog組件的讲仰。而且它還是在Top Layer上渲染的慕趴，這意味著我們不需要設置z-index屬性，就能保證對話框在最頂層鄙陡。
代碼如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Dialog Example</title>
<style>
dialog {
width: 500px;
padding: 10px;
border: solid 1px #000;
border-radius: 10px;
background-color: #fff;
}
</style>
</head>
<body>
<button id="open-btn">Open Dialog</button>
<p id="message"></p>
<dialog id="my-dialog">
<h3>This is a Model Dialog.</h3>
<button id="confirm-btn">Confirm</button>
<button id="cancel-btn">Cancel</button>
</dialog>
</body>
</html>
<script>
const dialog = document.getElementById('my-dialog');
const message = document.getElementById('message');
document.getElementById('open-btn').onclick = function() {
dialog.showModal();
};
dialog.addEventListener('close',function(e){
console.log(e);
});
dialog.querySelector("#confirm-btn").onclick = function(){
dialog.close();
message.innerText = "Confirm Button is Clicked."
}
dialog.querySelector("#cancel-btn").onclick = function(){
dialog.close();
message.innerText = "Close Button is Clicked."
}
</script>
運行效果
dialog效果
點一下按鈕秩贰，一個簡單質樸的模態(tài)對話窗馬上就出現在我們眼前。如果想美化一下柔吼，拿CSS往上堆就好了毒费。我就懶得弄啦~
如果還想了解更多，請參考官方文檔：
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/dialog
總結
- 原生HTML庫中愈魏，有很多現成的非常好用組件觅玻，是被我們前端開發(fā)所忽略的;
- 原生組件使用起來非常簡潔方便；
- 強烈推薦給跟我一樣有代碼潔癖的朋友培漏，盡量避開框架擁抱原生溪厘。
