シングルトン モードでは、クラスのインスタンスは 1 回だけ作成され、使用されるすべての場所で同じインスタンスが参照されます。
ポップアップウィンドウを例に挙げます。
1: メソッドの作成
<style>
/*样式*/
.popup-dom{
width: 100px;
line-height: 32px;
height: 32px;
text-align: center;
position: fixed;
top: 0;
bottom: 0;
right: 0;
left: 0;
margin: auto;
border: 1px solid red;
display: none;
}
</style>
<body>
<!-- 标签 -->
<button id="open">打开</button>
<button id="close">关闭</button>
</body>
// 函数方法式单例实现-弹窗
class Popup {
constructor () {
this.popupDom = null; // DOM容器
this.createdPopupDOM(); // 创建DOM
};
// 构建弹窗实例
static createdPopup() {
if (!Popup.prototype.p) Popup.prototype.p = new Popup();
return Popup.prototype.p;
};
// 创建弹窗DOM
createdPopupDOM() {
let popupDom = document.createElement('div');
popupDom.className = 'popup-dom';
popupDom.innerHTML = `
<div>标题</div>
`;
this.popupDom = popupDom;
document.body.appendChild(this.popupDom);
};
// 显示
showPopup() {
this.popupDom.style.display = 'block';
};
// 隐藏
hiddenPopup() {
this.popupDom.style.display = 'none';
};
};
// 原型上暂存创建的实例
Popup.prototype.p = null;
// 创建实例1,2
let popup_1 = Popup.createdPopup();
let popup_2 = Popup.createdPopup();
console.log(popup_1 === popup_2 ); // true
// 获取DOM按钮
let openButton = document.querySelector('#open');
let closeButton = document.querySelector('#close');
// 绑定事件
openButton.addEventListener('click', () => {
popup_1.showPopup();
});
closeButton.addEventListener('click', () => {
popup_2.hiddenPopup();
});
// 打开关闭的为同一弹窗
2: 新しいメソッドで作成 (DOM とスタイルは同じ、JS の別の部分)
class Popup {
constructor () {
this.popupDom = null; // DOM容器
this.createdPopupDOM(); // 创建DOM
};
// 创建弹窗DOM
createdPopupDOM() {
let popupDom = document.createElement('div');
popupDom.className = 'popup-dom';
popupDom.innerHTML = `
<div>标题</div>
`;
this.popupDom = popupDom;
document.body.appendChild(this.popupDom);
};
// 显示
showPopup() {
this.popupDom.style.display = 'block';
};
// 隐藏
hiddenPopup() {
this.popupDom.style.display = 'none';
};
};
// 创建实例方法
let createdPopup = (function () {
let p = null;
return function () {
if (!p) {
p = new Popup();
};
/*
如果构造函数返回的为引用类型,则new构造函数时得到的就是返回值
其他类型则为构造函数创建的实例
*/
return p;
};
})();
// 创建实例1,2
let popup_1 = new createdPopup();
let popup_2 = new createdPopup();
console.log(popup_1 === popup_2 ); // true
// 获取DOM按钮
let openButton = document.querySelector('#open');
let closeButton = document.querySelector('#close');
// 绑定事件
openButton.addEventListener('click', () => {
popup_1.showPopup();
});
closeButton.addEventListener('click', () => {
popup_2.hiddenPopup();
});
// 打开关闭的为同一弹窗
終わり: 個人的な要約。修正または最適化を歓迎します。