前端的设计模式

之前梳理的关于设计模式在前端的几个用栗。

工厂模式

// 示栗一：
class Product {
  constructor(name) {
    this.name = name
  }
  init() {
    console.log('init')
  }
  fun1() {
    console.log('f1')
  }
  fun2() {
    console.log('f2')
  }
}

class Creator {
  create(name) {
    return new Product(name)
  }
}

// 测试
let creator = new Creator()
let p = creator.create('p1')
p.init()
p.fun1()

// 示栗二：
function Checks() {
  this.cheackA = function () {
    console.log('我是A')
    return this
  }
  this.cheackB = function () {
    console.log('我是B')
    return this
  }
  this.cheackC = function () {
    console.log('我是C')
    return this
  }
}

var c = new Checks()
c.cheackA().cheackB().cheackC()

适配器模式

// 旧接口格式和使用者不兼容，中间加一个适配转换接口

class Adaptee {
  specificRequest() {
    return '德国标准插头'
  }
}

class Target {
  constructor() {
    this.Adaptee = new Adaptee()
  }
  request() {
    let info = this.Adaptee.specificRequest()
    return `${info} - 转换器 - 中国标准插头`
  }
}

// 测试
let target = new Target()
let res = target.request()
console.log(res)

代理模式

// 明星经纪人示例:

// 明星
let star = {
  name: '张某某',
  age: 25,
  phone: '13900001111',
}

// 经纪人
let agent = new Proxy(star, {
  get: function (target, key) {
    if (key === 'phone') {
      // 返回经纪人电话
      return '168xxxxxx'
    }
    if (key === 'price') {
      // 明星不报价 经济人报价
      return 120000
    }
    return target[key]
  },
  set: function (target, key, value) {
    if (key === 'customPrice') {
      if (value < 100000) {
        // 最低10万
        throw new Error('价格太低')
      } else {
        target[key] = value
        return true
      }
    }
  },
})
// test 测试
console.log(agent.name)
console.log(agent.age)
console.log(agent.phone)
console.log(agent.price)

agent.customPrice = 90000
console.log(agent.customPrice)

状态模式

// 红灯 绿灯 黄灯
class State {
  constructor(color) {
    this.color = color
  }
  handle(context) {
    console.log(`turn to ${this.color} light`)
    // 设置状态
    context.setState(this)
  }
}

// 主体
class Context {
  constructor() {
    this.seState = null
  }
  getState() {
    return this.state
  }
  setState(state) {
    this.state = state
  }
}

// test
let context = new Context()
let green = new State('green')
let yellow = new State('yellow')
let red = new State('red')

// 绿灯亮了
green.handle(context)
console.log(context.getState())

yellow.handle(context)
console.log(context.getState())

red.handle(context)
console.log(context.getState())

装饰器模式

// 为对象添加新功能，不改变其他原有的结构和功能
class Circle {
  draw() {
    console.log('画一个圆形')
  }
}

// 装饰器代码
class Decoator {
  constructor(circle) {
    this.circle = circle
  }
  draw() {
    this.circle.draw()
    this.setRedBorder(circle)
  }

  setRedBorder(circle) {
    console.log('设置红色边框')
  }
}

// 测试代码
let circle = new Circle()
circle.draw()

console.log('------ 分割线 ----- ')

// 装饰开始
let dec = new Decoator(circle)
dec.draw()

• 装饰器推荐使用第三方库 core-decorators
  第三方开源 lib，提供常用的装饰器；
  首先安装 npm install core-decorators –save；
  引入 import {readonly} from ‘core-decorators’。

// 示例：
class Person {
  @readyonly
  name() {
    return 'Jonly'
  }
}
let p = new Person()
console.log(p.name)

代理模式

系统中被唯一使用，一个类只有一个实例 只实例化唯一的对象，比如：登陆框 购物车等。

// 示栗一：
class SingleObject {
  login() {
    console.log('login')
  }
}

let ProxySingleInstance = (function () {
  let instance
  return function () {
    if (!instance) {
      instance = new SingleObject()
    }
    return instance
  }
})()

// 测试
let obj1 = new ProxySingleInstance()
obj1.login()

let obj2 = new ProxySingleInstance()
obj2.login()

console.log('obj1===obj2:', obj1 === obj2) // true

console.log('-------------- 华丽的分割线 ---------------')

let obj3 = new ProxySingleInstance()
obj3.login()

console.log('obj1===obj2:', obj1 === obj3) // true

// 示栗二：
class SingleObject {
  login() {
    console.log('login')
  }
}

SingleObject.getInstance = (function () {
  let instance
  return function () {
    if (!instance) {
      instance = new SingleObject()
    }
    return instance
  }
})()

// 测试
let obj1 = SingleObject.getInstance()
obj1.login()

let obj2 = SingleObject.getInstance()
obj2.login()

console.log('obj1===obj2:', obj1 === obj2) // true

console.log('-------------- 华丽的分割线 ---------------')

let obj3 = new SingleObject.getInstance()
obj3.login()
console.log('obj1===obj3:', obj1 === obj3) // true

// 示栗三：
class SingleObject {
  login() {
    console.log('login')
  }
}

SingleObject.getInstance = (function () {
  let instance
  return function () {
    if (!instance) {
      instance = new SingleObject()
    }
    return instance
  }
})()

// 测试
let obj1 = SingleObject.getInstance()
obj1.login()

let obj2 = SingleObject.getInstance()
obj2.login()

console.log('obj1===obj2:', obj1 === obj2) // true

console.log('-------------- 华丽的分割线 ---------------')

let obj3 = new SingleObject() // 不推荐 不可控
// let obj3 = SingleObject.getInstance(); // 最好这样写
obj3.login()
console.log('obj1===obj3:', obj1 === obj3) // false