单例模式
一个类只有一个实例,并提供一个访问它的全局访问点。
JavaScript可以使用闭包实现不基于类的单例模式
实现关键:
使用闭包缓存一个保存单例的变量,如果该变量存在则返回,否则返回一个新对象
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>单例模式</title>
<style>
.modal {
width: 200px;
height: 100px;
border: 1px solid #000;
position: fixed;
left: 50%;
margin-left: -100px;
top: 100px;
}
</style>
</head>
<body>
<button id="modal-btn">modal</button>
<script>
// 通用的惰性单例
function createSingle(fn) {
let instance;
return function () {
return instance || (instance = fn.apply(this, arguments));
};
}
function createModal(html) {
const div = document.createElement("div");
div.innerHTML = html;
div.className = "modal";
div.style.display = "none";
document.body.appendChild(div);
return div;
}
const createSingleModal = createSingle(createModal);
const btn = document.querySelector("#modal-btn");
btn.addEventListener("click", function () {
const modal = createSingleModal(Date.now());
modal.style.display = "block";
});
</script>
</body>
</html>