js-day23-设计模式-单例模式

单例模式

单例模式也称作为单子模式，单体模式。单例模式的定义是产生一个类的唯一实例，是软件设计中较为简单但是很常用的一种设计模式。

• 单例模式的核心是确保只有一个类一个实例，并提供全局访问.
• 实现

  • 用一个变量来标志当前是否已经为某个类创建过对象，如果是，则在下一次获取该类的实例时，直接返回之前创建的对象

  • 多次实例化,返回一个对象

构造函数方法

// 构造函数方法
function Person(name){
  this.name = name
}
Person.prototype.getName = function(){
  console.log(this.name)
}
Person.getInstance = function(name){
  if(!this.instance){
    this.instance = new Person(name)
  }
  return this.instance
}
let p1 = Person.getInstance('哈哈')
let p2 = Person.getInstance('嘿嘿')
console.log(p1 == p2)

ES6中的实现

 class Person{
   constructor(name){
      this.name = name
   }
   say(){
      console.log(this.name)
   }
   static getInstance(name){
     if(!this.instance){
        this.instance = new Person(name)
     }
        return this.instance
     }
 }
 let p1 = Person.getInstance('张三')
 let p2 = Person.getInstance('王五')

单例案例

css

    html,body{
        width: 100%;
        height: 100%;
    }
    button{
        background-color: blue;
        border: none;
        color: #fff;
        width: 100px;
        height: 35px;
        margin: 50px 20px;
    }
    .mask{
        width: 100%;
        height: 100%;
        background-color: rgba(0, 0, 0, 0.7);
        position: absolute;
        left: 0;
        top: 0;
        display: none;
    }
    .info{
        position: absolute;
        width: 500px;
        height: 400px;
        background-color: #fff;
        left: 0;
        top: 0;
        right: 0;
        bottom: 0;
        margin: auto;

    }
    .color1{
        background-color: aquamarine !important;
    }
    .color2{
        background-color: yellowgreen !important;
    }
    .color3{
        background-color: rebeccapurple !important;
    }
    span{
        background-color: #bbb;
        padding: 0 2px;
        position: absolute;
        right: 0;
    }
    .info p{
        text-align: center;
        line-height: 300px;
    }

html

    <button>弹窗</button><button>弹窗</button><button>弹窗</button>
    <div class="mask">
        <div class="info">
            <span>&times;</span>
            <div>
                <p>111</p>
            </div>
        </div>
    </div>

js

 class Prompt{
     constructor(){}
     init(bg,text){
         this.mask=document.querySelector('.mask')
         this.info=document.querySelector('.info')
         this.close=document.querySelector('.info span')
         // this.btns=document.querySelectorAll('button')
         
         this.info.lastElementChild.firstElementChild.innerHTML=text
         this.info.classList.add(bg)
         // console.log(this.close);
         this.show()
         this.hide()
     }
     show(){
         
                 this.mask.style.display='block'
     }
     hide(){
         this.close.onclick=()=>{
                 this.mask.style.display='none'
             }
     }
     static getInstance(bg,text){
         if(!this.instance){
             this.instance=new Prompt(bg,text)
         }
         this.instance.init(bg,text)
         return this.instance
     }
 }
 const btns=document.querySelectorAll('button')
 btns[0].onclick=()=>{
     Prompt.getInstance('color1','王成喜欢跳舞、唱歌、rap！')
 }
 btns[1].onclick=()=>{
     Prompt.getInstance('color2','崔傑瑜喜欢钓鱼！')
 }
 btns[2].onclick=()=>{
     Prompt.getInstance('color3','陈洁喜欢喝酒！')
 }