SOLID五大设计原则
- S - 单一职责原则 (一个程序只做一件事)
- O - 开放封闭原则 (对扩展开放,对修改封闭)
- L - 李氏置换原则(子类覆盖父类,js使用较少,弱语言)
- I - 接口独立原则 (接口的独立单一)
- D - 依赖导致原则 (依赖于抽象不依赖于具体,只关注接口,不管实现)
三种类型
- 创建型
- 结构型
- 行为型
某公司面试三面题
要求给出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
来源:刘伟波博客
本文原创版权属于刘伟波 ,转载请注明出处,谢谢合作
发表评论: