ts设计模式(工厂模式，单例模式)

目录

简单工厂

工厂方法

抽象工厂

单例模式：

ts 懒汉单例

ts 饿汉：

js 懒汉单例：

js 饿汉单例：  直接赋值（不判断）

js 透明单例

ts 透明单例

单例模式实例：模态窗口

---

1. 安装ts: 

npm install -g typescript

2. 安装ts-node:

npm install ts-node -g

3. 安装插件   code runner

简单工厂

// 简单工厂
abstract class Cafe {
  constructor(public name:string) {
    
  }
}

class LIUCoffee extends Cafe {
  
}
class OOLCoffee extends Cafe {

}
class ADCoffee extends Cafe {

}

class FactoryCoffee {
  static order (name:string) {
    switch(name) {
      case 'LIU':
        return new LIUCoffee('liu菲菲')
      case 'OOL':
        return new OOLCoffee('OOL卡卡')
      case 'AD':
        return new OOLCoffee('ADtia')
      default:
        throw new Error('no coffee')
    }
  }
}

console.log(FactoryCoffee.order('LIU').name)
console.log(FactoryCoffee.order('OOL'))
console.log(FactoryCoffee.order('AD'))
// console.log(FactoryCoffee.order('AD1'))

工厂方法

export
// 工厂方法
abstract class Cafe {
  constructor(public name:string) {
    
  }
}

class LIUCoffee extends Cafe {
  
}
class OOLCoffee extends Cafe {

}
class ADCoffee extends Cafe {

}

abstract class FactoryCafe {
  abstract createCoffee(): Cafe
}

class LIUCoffeeFactory extends FactoryCafe {
  createCoffee(): Cafe {
    return new LIUCoffee('liukaa')
  }  
}
class OOLCoffeeFactory extends FactoryCafe {
  createCoffee(): Cafe {
    return new OOLCoffee('oolkka')
  }  
}
class ADCoffeeFactory extends FactoryCafe {
  createCoffee(): Cafe {
    return new ADCoffee('')
  }  
}

console.log(new ADCoffeeFactory().createCoffee())
console.log(new OOLCoffeeFactory().createCoffee())
console.log(new LIUCoffeeFactory().createCoffee())

抽象工厂

export {}
// 抽象工厂
abstract class Kaka {
  constructor(public name: string){ }
}
abstract class Moka {
  constructor(name: string){}
}
abstract class Joka {
  constructor(name: string){}
}

class LiuKaka extends Kaka {
  constructor(name:string){
    super(name);
  }
}
class AnderKaka extends Kaka {}
class LiuMoka extends Moka {}
class AnderMoka extends Moka {}
class LiuJoka extends Joka {}
class AnderJoka extends Joka {}

abstract class CafeFactory {
  abstract createKaka():Kaka
  abstract createMoka():Moka
  abstract createJoka():Joka
}

class LiuCafe extends CafeFactory{
  createKaka(): Kaka {
    return new LiuKaka("liukaka");
  }
  createMoka(): Moka {
    return new LiuMoka("liumoka");
  }
  createJoka(): Joka {
    return new LiuJoka("liuJoka");
  }
}
class AnderCafe extends CafeFactory{
  createKaka(): Kaka {
    return new AnderKaka("Anderkaka");
  }
  createMoka(): Moka {
    return new AnderMoka("Andermoka");
  }
  createJoka(): Joka {
    return new AnderJoka("AnderJoka");
  }
}

console.log(new LiuCafe().createKaka())
console.log(new LiuCafe().createMoka())
console.log(new LiuCafe().createJoka())

console.log(new AnderCafe().createKaka())
console.log(new AnderCafe().createMoka())
console.log(new AnderCafe().createJoka())

单例模式：

ts 懒汉单例

export {}
// es6 懒汉
class W {
  private static w:W
  private constructor(){

  }
  public static getInstance(){
    if(!this.w) W.w = new W()
    return W.w
  }
}


let w1 = W.getInstance()
let w2 = W.getInstance()

console.log(w1 === w2);

ts 饿汉：

// // es6  饿汉
class W {
  private static w:W = new W()
  private constructor(){

  }

  public li(){
    console.log('li')
  }
  public static getInstance(){
    return W.w
  }
}


let w11 = W.getInstance()
let w22 = W.getInstance()

console.log(w11 === w22);
w11.li()

js 懒汉单例：

//es5懒汉
function W(){
  
}

W.prototype.hollo ='11'

W.getInstance = (function(){
  let w 
  return function(){
    if(!w) {w = new W()}
    return w
  }
})()

let w1 = W.getInstance()
let w2 = W.getInstance()

console.log(w1 === w2);
console.log(w1.hollo)

js 饿汉单例：  直接赋值（不判断）

// es5 饿汉单例
function W(){
  
}

W.getInstance = (function(){
  let w = new W()
  return function(){
    return w
  }
})()

let w1 = W.getInstance()
let w2 = W.getInstance()

console.log(w1 === w2);

js 透明单例

// es5 透明单例

let WW = (function (){
  let w;
  // let a=()=>{console.log('111')}
  return function(){
    if(!w) { 
      console.log(this,'this')
      return (w = this)}
    return w
  }
})()

WW.prototype.a = ()=>{
  console.log('1112')
  return 'rere'
}


let w1 = new WW()
let w2 = new WW()

console.log(w1 === w2);
w1.a();

解释：构造函数返回一个对象，那么这个对象就是他的实例

// 解释：
// let a = {'uu':11}
// // 构造函数返回一个对象，那么这个对象就是他的实例
// function W(){
//   return a
// }
// let w1 = new W()
// let w2 = new W()

// console.log(w1 === w2);
// console.log(w1);

ts 透明单例

// ts 透明单例 懒汉
let LiuYu  = (function(){
  let liu:any
  return function(this: any){
    // console.log(this)
    if(!liu) return (liu = this)
    return liu
  }
})()

LiuYu.prototype.liuyu = ()=>{
  console.log('liuyu')
}
let L1 = new (LiuYu as any)()
let L2 = new (LiuYu as any)()
console.log(L1 === L2)
L1.liuyu()

单例模式实例：模态窗口

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <button id="show-button">显示模态窗口</button>
  <button id="hide-button">关闭模态窗口</button>

  <script>
    class LoginModal {
      static instance;
      constructor(){
        this.element = document.createElement('div')
        this.element.innerHTML = 
        (`
          <form>
            用户名：<input /><br>
            <button>登录</button>
            <button id='close'>close </button>
            
          </form>
        `)
        this.element.style.cssText = 
        (`
          border:1px solid blue;display:block;
          position:absolute;top:40%;left:40%;
        `)

        document.body.appendChild(this.element)
        document.getElementById('close').addEventListener('click',()=>{
          this.element.style.display = 'none'
        })
      }

      show(){
        this.element.style.display = 'block'
      }
      hide(){
        this.element.style.display = 'none'
      }
      static getInstance(){
        if(!LoginModal.instance){
          LoginModal.instance = new LoginModal()
        }
        return LoginModal.instance
      }
    }

    let button_show = document.getElementById('show-button')
    let button_hide = document.getElementById('hide-button')
    button_show.onclick = ()=>{
      LoginModal.getInstance().show()
    }
    button_hide.addEventListener('click',()=>{
      LoginModal.getInstance().hide()
    })


  </script>
</body>
</html>