loading...

0

23种设计模式

javascript 设计模式读完大概需要13分钟

  • 发布时间:2018-08-12 16:31 星期日
  • 刘伟波
  • 267
  • 更新于2018-10-16 15:56 星期二

SOLID五大设计原则

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

三种类型

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

某公司面试三面题

http://images.liuweibo.cn/image/common/QQ截图20180812151620_1534058183472_278953_1534062737107.png
要求给出UML设计图
http://images.liuweibo.cn/image/common/QQ截图20180812152655_1534058820229_287737_1534062756755.png
这里也给出答案

//摄像头
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

来源:刘伟波博客

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

你可能感兴趣的文章

    发表评论

    评论支持markdown,评论内容不能超过500字符,如果内容过多或者要及时回复,建议去 segmentfault平台, 也可以来我的直播间来提问。
    关于技术问题或者有啥不懂的都可以留言, 我会定期回复答疑, 也可以来 我的直播间 提问, 推荐最新仓库 前端知识体系, 感謝支持!