My Awesome Project

Appearance

设计原则 ​

1、UNIX/LINUX设计原则 ​

  • 1、小即是美
  • 2、让每个程序只做好一件事
  • 3、快速建立原型
  • 4、舍去高效率而取可移植性
  • 5、采用纯文本来存储数据---高效率与可读性
  • 6、充分利用软件的杠杆效应（可复用性）
  • 7、使用shell脚本来提高杠杆效应和可移植性
  • 8、避免强制性的用户界面
  • 9、让每个程序都成为过滤器

2、小准则 ​

  • 1、允许用户定制环境
  • 2、尽量使操作系统内核小而轻量化
  • 3、使用小写字母并尽量简短
  • 4、沉默是金
  • 5、各部分之和大于整体
  • 6、寻求90%的解决方案

3、五大设计原则 ​

  • S - 单一职责原则
  • O - 开放封闭原则
  • L - 李氏置换原则
  • I - 接口独立原则
  • D - 依赖倒置原则

S - 单一职责原则 ​

  • 1、一个程序只做好一件事
  • 2、如果功能过于复杂就拆开，每个部分保持独立

O - 开放封闭原则 ​

  • 1、对扩展开放，对修改关闭
  • 2、增加需求时，扩展新代码，而非修改已有代码
  • 3、这是软件设计的终极目标

L - 李氏置换原则 ​

  • 1、子类能覆盖父类
  • 2、父类能出现的地方子类就能出现
  • 3、JS中使用较少（弱类型 & 继承使用较少）

I - 接口独立原则 ​

  • 1、保持接口的单一独立，避免出现“胖接口”
  • 2、JS中没有接口（typescript例外），使用较少
  • 3、类似于单一职责原则，这里更关注接口

D - 依赖倒置原则 ​

  • 1、面向接口编程，依赖于抽象而不依赖于具体
  • 2、使用方只关注接口而不关注具体类的实现
  • 3、JS中使用较少（没有接口 & 弱类型）

4、设计原则总结 ​

S O 体现较多，L I D 体现较少

用Promise 演示 S O

js
function loadImg(src) {
    let promise = new Promise(function(resolve, reject) {
        let img = document.createElement('img')
        img.onload = function () {
            resolve(img)
        }
        img.onerror = function () {
            reject('图片加载失败')
        }
        img.src = src
    })
    return promise;
}

let src = 'http://img4.imgtn.bdimg.com/it/u=789770187,3900490535&fm=15&gp=0.jpg'
let result = loadImg(src)

result.then(function (img) {
    // part1
    alert(`width: ${img.width}`)
    return img
}).then(function (img) {
    // part2
    alert(`height: ${img.height}`)
}).catch(function (ex) {
    alert(ex)
})

5、从设计到模式 ​

先设计，后模式

6、23种设计模式 ​

  • 创建型

    • 工厂模式：工厂方法模式、抽象工厂模式、建造者模式
    • 单利模式
    • 原型模式

  • 组合型

    • 适配器模式
    • 装饰器模式
    • 代理模式
    • 外观模式
    • 桥接模式
    • 组合模式
    • 享元模式

  • 行为型

    • 策略模式
    • 模板方法模式
    • 观察者模式
    • 迭代器模式
    • 职责链模式
    • 命令模式
    • 备忘录模式
    • 状态模式
    • 访问者模式
    • 中介者模式
    • 解释器模式

7、面试题演示 ​

第一题是某打车公司一面

TIP

打车时，可以打专车或者快车。任何车都有车牌号和名称。

不同车价格不同，快车每公里1元，专车每公里2元。

行程开始时，显示车辆信息

行程结束时，显示打车金额（嘉定行程就5公里）

1、画出UML类图

2、用ES6语法写出该示例

js
// 车父类
class Car {
    constructor(number, name) {
        this.number = number
        this.name = name
    }
}

// 快车
class Kuaiche extends Car {
    constructor(number, name) {
        super(number, name)
        this.price = 1
    }
}

// 专车
class Zhuanche extends Car {
    constructor(number, name) {
        super(number, name)
        this.price = 2
    }
}

// 行程
class Trip {
    constructor(car) {
        this.car = car
    }
    start () {
        console.log(`行程开始，名称：${this.car.name}, 车牌号：${this.car.number}`)
    }
    end () {
        console.log(`行程结束，金额：` + this.car.price * 5)
    }
}

// 测试
let car = new Kuaiche('100', '桑塔拉')
let trip = new Trip(car)
trip.start()
trip.end()

第二题是某短视频公司三面

TIP

某停车场，分3层，每层100车位

每个车位都能监控到车辆的驶入和离开

车辆进入前，显示每层的空余车位数量

车辆进入时，摄像头可是被出车牌号和时间

车辆出来时，出口显示器显示车牌号和停车时长

画出UML类图

deign

js
// 车辆
class Car {
    constructor(num) {
        this.num = num
    }
}

// 摄像头
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 Park {
    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('\n')
    }
}

// 层
class Floor {
    constructor(index, places) {
        this.index = index
        this.places = places || []
    }
    emptyPlaceNum() {
        let num = 0
        this.places.forEach(p => {
            if (p.empty) {
                num = num + 1
            }
        })
        return num
    }
}

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


// 测试
// 初始化停车场
const floors = []
for (let i = 0; i < 3; i++) {
    const places = []
    for (var j = 0; j < 100; j++) {
        places[j] = new Place()
    }
    floors[i] = new Floor(i + 1, places)
}
const park = new Park(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)

Released under the MIT License.

Copyright © 2019-present Evan You