JS 使用单例模式实现弹出div
时间: 2023-12-09 11:06:11 浏览: 64
单例模式是一种常用的设计模式,它的主要目的是确保一个类只有一个实例,并提供一个全局访问点。在 JavaScript 中,可以使用单例模式来实现弹出 div 的功能。
下面是一个简单的例子:
```javascript
var Popup = (function() {
var instance;
function createInstance() {
var div = document.createElement("div");
div.innerHTML = "Hello, world!";
div.style.display = "none";
document.body.appendChild(div);
return div;
}
return {
getInstance: function() {
if (!instance) {
instance = createInstance();
}
return instance;
},
show: function() {
this.getInstance().style.display = "block";
},
hide: function() {
this.getInstance().style.display = "none";
}
};
})();
// 使用
Popup.show(); // 显示弹出框
Popup.hide(); // 隐藏弹出框
```
在这个例子中,我们使用了一个立即执行函数,创建了一个私有变量 `instance`,它存储了唯一的实例。在 `createInstance` 函数中,我们创建了一个 div 元素,并将其添加到页面中。然后,我们返回这个 div 元素,作为单例的实例。
在 `getInstance` 方法中,我们首先检查实例是否已经存在。如果不存在,我们调用 `createInstance` 方法来创建实例。最后,我们返回实例。
在 `show` 和 `hide` 方法中,我们通过 `getInstance` 方法来获取实例,并设置其样式属性来显示或隐藏弹出框。
通过这种方式,我们可以确保只有一个弹出框实例存在,并且可以在任何时候访问它。同时,我们可以在需要时方便地显示或隐藏弹出框。