javascript设计模式---单例模式

最新推荐文章于 2024-02-09 15:20:54 发布

哈娄

最新推荐文章于 2024-02-09 15:20:54 发布

阅读量151

点赞数 1

分类专栏： javascript

本文链接：https://blog.csdn.net/bangbDIV/article/details/116659212

版权

javascript 专栏收录该内容

33 篇文章 0 订阅

订阅专栏

单例模式（构造多次，都会是第一次的实例）

单：单一，一个
例：实例

核心思路：用一个变量保存第一个实例，然后把该实利直接返回给外部的调用。

单例模式核心代码简易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>

哈娄

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
javascript设计模式---单例模式

单例模式单：单一，一个例：实例核心思路：用一个变量保存第一个实例，然后把该实利直接返回给外部的调用function person() { this.name='test'}// 正常实例let p1 = new person()let p2 = new person()console.log(p1==p2) // false, 会得到两个实例// 单例模式核心代码const getSingle = (function() { let instance =
复制链接

扫一扫