歷史
在開發(fā)中戚嗅，動(dòng)態(tài)創(chuàng)建一個(gè)彈層（暫且命名為box）是很常見的需求雨涛。因?yàn)槿绻趆tml中始終渲染這些box，代價(jià)可能會(huì)比較高懦胞，如果是純文字還好替久，復(fù)雜點(diǎn)的涉及到ajax，圖片躏尉，那就不太好了蚯根。然而如果每次用戶一個(gè)動(dòng)作（click或者mouseover）就動(dòng)態(tài)創(chuàng)建一個(gè)box，移出就刪除box,那么效率也不算很高胀糜，需要頻繁繪制dom,性能不好颅拦。那么，如何比較高效教藻、完美地創(chuàng)建一個(gè)彈窗呢距帅？本文演示了用單例模式來創(chuàng)建。
演示
一個(gè)createWindow方法,用于創(chuàng)建box:
createWindow函數(shù)立即執(zhí)行括堤，返回了一個(gè)匿名函數(shù)碌秸，匿名函數(shù)中保持了createWindow閉包中對(duì)div的引用，若div已經(jīng)存在痊臭，則直接返回div,如果不存在哮肚，才會(huì)重新創(chuàng)建。然后監(jiān)聽按鈕事件广匙，只需切換display狀態(tài)就好了允趟。
完整demo代碼
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
.common-box {
background: rgb(233, 90, 90);
width: 100px;
height: 100px;
overflow: hidden;
}
</style>
</head>
<body>
<button id="btn1">
點(diǎn)我創(chuàng)建新窗口
</button>
<button id="hide">
點(diǎn)我隱藏
</button>
<script>
const btn1 = document.querySelector('#btn1');
const createWindow = (() => {
let div;
return (words) => {
if (!div) {
console.log('重新創(chuàng)建');
div = document.createElement('div');
div.innerHTML = words || '我是默認(rèn)的語句';
div.className = 'common-box';
div.style.display = 'none';
document.body.appendChild(div);
}
return div;
}
})();
btn1.addEventListener('click', ()=>{
let box = createWindow(`我是文字 ${Date.now()}`);
box.style.display = 'block';
}, false);
//隱藏
document.querySelector('#hide').addEventListener('click', ()=>{
document.querySelector('.common-box').style.display = 'none';
}, false);
</script>
</body>
</html>
