javascript设计模式---单例模式
Posted 哈娄
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了javascript设计模式---单例模式相关的知识，希望对你有一定的参考价值。
单例模式 （构造多次，都会是第一次的实例）
- 单：单一，一个
- 例：实例
核心思路：用一个变量保存第一个实例，然后把该实利直接返回 给外部的调用。
单例模式核心代码简易demo
-
正常实例代码
function person(name) {
this.name=name
}
let p1 = new person('test1') // name=test1
let p2 = new person('test2') // name=test2
console.log(p1==p2) // false, 会得到两个实例
- 单例模式核心代码，闭包保存变量思维
const getSingle = (function() {
// 根据业务自由调整封装
function person(name) {
this.name=name
}
let instance = null;
return function getSingle(name) {
if (!instance) instance = new person(name)
return instance
}
})()
let p1 = new getSingle('test3') // name=test3
let p2 = new getSingle('test4') // name=test3，内容不变
console.log(p1==p2) // true, 单例模式应用场景：做一个弹窗, 不同按钮点击出来，内容显示不一样文案，但是都是相同div弹窗
<!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>
.test1,.test2,.close {
display: inline-block;
width: 100px;
height: 40px;
line-height: 40px;
border: 1px solid red;
text-align: center;
}
</style>
</head>
<body>
<div class="test1">显示内容1</div>
<div class="test2">显示内容2</div>
<div class="close">清空</div>
<div class="container"></div>
<script>
const getSingle = (() => {
class SingleClass {
constructor() {
this.ele = document.createElement('div')
this.ele.className = 'tip'
}
setValue = (value) => {
this.ele.innerHTML = `<div>${value}</div>`
document.querySelector('.container').appendChild(this.ele)
}
}
let instance = null;
return function getSingle(val) {
if (!instance) instance = new SingleClass()
instance.setValue(val)
return instance
}
})()
document.querySelector('.test1').onclick = () => {
getSingle('test1')
}
document.querySelector('.test2').onclick = () => {
getSingle('test2')
}
document.querySelector('.close').onclick = () => {
getSingle('')
}
</script>
</body>
</html>
以上是关于javascript设计模式---单例模式的主要内容，如果未能解决你的问题，请参考以下文章