SOLID五大设计原则

1. S - 单一职责原则 （一个程序只做一件事）
2. O - 开放封闭原则 （对扩展开放，对修改封闭）
3. L - 李氏置换原则（子类覆盖父类，js使用较少，弱语言）
4. I - 接口独立原则 （接口的独立单一）
5. D - 依赖导致原则 （依赖于抽象不依赖于具体，只关注接口，不管实现）

三种类型

1. 创建型
2. 结构型
3. 行为型

某公司面试三面题

要求给出UML设计图

这里也给出答案

//摄像头
class Camera {
  shot(car) {
    return {
      num: car.num,
      inTime: Date.now()
    };
  }
}

//显示器
class Screen {
  show(car, inTime) {
    console.log('车牌号', car.num)
    console.log('停车时间', Date.now() - inTime)
  }
}

//停车场
class Part {
  constructor(floors) {
    this.floors = floors || []
    this.camera = new Camera()
    this.screen = new Screen()
    this.carList = {} //存储摄像头返回的车辆信息
  }

  in(car) {
    //通过摄像头获取信息
    const info = this.camera.shot(car)
    //停到某个车位
    const i = parseInt(Math.random() * 100 % 100)
    const place = this.floors[0].places[i]
    place.in()
    info.place = place
    //记录信息
    this.carList[car.num] = info
  }

  out(car) {
    //获取信息
    const info = this.carList[car.num]
    //将停车位清空
    const place = info.place
    place.out()
    //显示时间
    this.screen.show(car, info.inTime)
    delete this.carList[car.num]
  }

  emptyNum() {
    return this.floors.map(floor => {
      return `${floor.index}层还有${floor.emptyPlaceNum()}个空闲车位`;
    }).join('');
  }
}

//层
class Floor {
  constructor(index, places) {
    this.index = index
    this.places = places || []
  }

  emptyPlaceNum() {
    let num = 0;
    this.places.forEach(p => {
      if (p.empty) {
        num++
      }
    })
    return num;
  }
}

//车位
class Place {
  constructor() {
    this.empty = true
  }

  in() {
    this.empty = false
  }

  out() {
    this.empty = true
  }
}
class Car {
  constructor(num) {
    this.num=num
  }
}
//测试
//初始化停车场
const floors = [];
for (let i = 0; i <3; i++  ) {
  const places=[];
  for (let j = 0; j < 100; j ++ ) {
    places[j]=new Place()
  }
  floors[i]=new Floor(i+1,places)
}
const park = new Part(floors)
//初始化车辆
const car1 = new Car(100);
const car2 = new Car(200);
const car3 = new Car(300);

console.log('第一辆车进入')
console.log(park.emptyNum())
park.in(car1)
console.log('第二辆车进入')
console.log(park.emptyNum())
park.in(car2)
console.log('第一辆车离开')
park.out(car1)
console.log('第二辆车离开')
park.out(car2)
console.log('第三辆车进入')
console.log(park.emptyNum())
park.in(car3)
console.log('第三辆车离开')
park.out(car3)

工厂模式

• jq

• React.createElement

• vue异步

  class Jquery {
  append(){
  
  }
  html(){
  
  }
  }
  window.$=()=>{
  return new Jquery();
  }         

  单例模式

• 登录框

• 购物车

• vuex和redux的store

  适配器模式

  什么是适配器模式？举个例子，我们用的电源是220v，需要给手机充电，name需要一个手机充电器，这个手机充电器就是适配器，做一个转换的作用。

• 封装旧的接口

• vue.computed

//自己封装的ajax
ajax({
  url:''
})
//因为历史原因，不用了，要做兼容
// $.ajax({})
//做一层适配器
window.$={
  ajax=(options)=>{
    return ajax({options});
  }
}

##装饰器模式
作者：刘伟波

链接：http://www.liuweibo.cn/p/209

来源：刘伟波博客

本文原创版权属于刘伟波 ，转载请注明出处，谢谢合作