设计模式

class Car {
  constructor(num, name) {
    this.num = num
    this.name = name
  }
}
class FastCar extends Car {
  constructor(num, name) {
    super(num, name)
    this.price = 1
  }
}
class SpecialCar extends Car {
  constructor(num, name) {
    super(num, name)
    this.price = 2
  }
}
class Trip {
  constructor(car, long) {
    this.car = car
    this.long = long
  }
  start() {
    console.log(`行程开始，名称：${this.car.name}，车牌号：${this.car.num}`)
  }
  end() {
    console.log(`行程结束，价格：${this.car.price * this.long}`)
  }
}

let car = new SpecialCar(100, '广州专车')
let trip = new Trip(car, 5)
trip.start()
trip.end()

class Product {
  constructor(name) {
    this.name = name
  }
  init() {
    alert('init')
  }
  fn1() {
    alert('fn1')
  }
}
class Creator {
  create(name) {
    return new Product(name)
  }
}
let creator = new Creator()
let p = creator.create('p1')
p.init()

/*说明：单例模式要用到pravite关键字，但JS没有。我们只需要用一个变量确保实例只创建一次就行
*/
class SingleObject {
  constructor() { }
}
SingleObject.getInstance = (function () {
  let instnce
  return function () {
    if (!instnce) {
      instnce = new SingleObject
    }
    return instnce
  }
})()
// 下面这种把 instance 写成类的静态属性的方式也可以，更和TS中的写法一致
// 有些库的单例写法会把 instane 挂在 global 中 ，global.instance = xxx。当然这种写法建议用一个复杂一点的变量名，eg: CG_I18N_EMITER
SingleObject.instnce = undefined
SingleObject.getInstance = function () {
  if (!this.instnce) {
    this.instnce = new SingleObject()
  }
  return this.instnce
}
//  一定要用自定义的getInstance方法来创建实例，不能用new
let obj1 = SingleObject.getInstance()
let obj2 = SingleObject.getInstance()
console.log(obj1 === obj2) // true
//  用了new
let obj3 = new SingleObject()
console.log(obj1 === obj3) // false

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) //  德国标准插头的转换器——中国标准插头

class Circle {
  draw() {
    console.log('画一个圆形')
  }
}
class Decorator {
  constructor(circle) {
    this.circle = circle
  }
  draw() {
    this.circle.draw()
    this.setRedBorder(circle) // 这里要传递“原来的功能”为参数，记得是“装饰”
  }
  setRedBorder(circle) {
    console.log('设置红色边框')
  }
}

let circle = new Circle()
circle.draw() // 画一个圆形
let dec = new Decorator(circle)
dec.draw()  // 画一个圆形  // 设置红色边框

@testDec // 用这个@的语法对下面的类做装饰
class Demo {
  // ...
}
function testDec(target) {
  target.isDec = true
}
console.log(Demo.isDec) // true

//  传递参数的情况
function testDec(isDec) {
  return function(target) {
    target.isDec = true
  }
}
@testDec
class Demo {
  // ...
}
console.log(Demo.isDec) // true

class RealImg {
  constructor(filename) {
    this.filename = filename
  }
  display() {
    console.log(`展示${this.filename}图片`)
  }
}
class ProxyImg {
  constructor(filename) {
    this.realimg = new RealImg(filename)
  }
  display() {
    this.realimg.display()
  }
}

let proxyImg = new ProxyImg('1.png')
proxyImg.display() // 展示1.png图片

// 主题，保存状态，状态变化之后触发所有观察者对象
class Subject {
  constructor(name) {
    this.state = 0
    this.observers = []
    this.name = name
  }
  // 添加观察者
  addOvservers(observer) {
    this.observers.push(observer)
  }
  getState() {
    return this.state
  }
  setState(state) {
    this.state = state
    this.notifyAllObservers()
  }
  notifyAllObservers() {
    this.observers.forEach((observer) => {
      observer.update()
    })
  }
}
// 观察者
class Observer {
  constructor(name, subject) {
    this.name = name
    this.subject = subject
    this.subject.addOvservers(this)
  }
  update() {
    console.log(`${this.subject.name} updata, now state is ${this.subject.getState()}`)
  }
}
let s = new Subject('subject1')
let o1 = new Observer('o1', s)
let o2 = new Observer('o2', s)
s.setState(2) // subject1 updata, now state is 2  // subject1 updata, now state is 2

function addEvent(elm, evType, fn, useCapture) {
  if (elm.addEventListener) {
    elm.addEventListener(evType, fn, useCapture)
    return true
  } else if (elm.attachEvent) {
    var r = elm.attachEvent("on" + evType, fn)
    return r
  } else {
    elm["on" + evType] = fn
  }
}

class Iterator {
  constructor(conatiner) {
    this.list = conatiner.list
    this.index = 0
  }
  next() {
    if (this.hasNext()) {
      return this.list[this.index++]
    }
    return null
  }
  hasNext() {
    if (this.index >= this.list.length) {
      return false
    }
    return true
  }
}

class Container {
  constructor(list) {
    this.list = list
  }
  getIterator() {
    return new Iterator(this)
  }
}

// 测试代码
let container = new Container([1, 2, 3, 4, 5])
let iterator = container.getIterator()
while (iterator.hasNext()) {
  console.log(iterator.next())
}

// 状态（红灯、绿灯、黄灯）
class State {
  constructor(color) {
    this.color = color
  }
  handle(context) {
    console.log(`turn to ${this.color} light`)
    context.setState(this)
  }
}
// 主体
class Context {
  constructor() {
    this.state = null
  }
  getState() {
    return this.state
  }
  setState(state) {
    this.state = state
  }
}

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()) // 打印状态