美文网首页让前端飞程序员前端攻城狮
web前端进阶之js设计模式面试篇

web前端进阶之js设计模式面试篇

作者: jia林 | 来源:发表于2018-08-01 15:25 被阅读15次

    考察面向对象和设计能力

    题目1

    image.png
    要求:

    1、画出UML类图
    2、用ES6语法写出该示例

    解答:

    一、分析

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

    可以解读出,有个公共的父类—车,里面包括车牌号和名称属性,有2个子类快车和专车,他们可以继承父类的属性

    • 不同车价格不同,快车每公里1元,专车每公里2元

    说明子类(快车和专车)有自己的属性—价格

    • 行程开始时,显示车辆信息
    • 行程结束时,显示打车金额(假定行程5公里)

    以上两句说明,行程和车有关系,所以建立一个行程的类,引用车这个类,便具有了车的属性(车辆信息)

    1、UML类图


    image.png

    2、用ES6语法写出该示例

      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}`)
            }
            end() {
                console.log(`行程结束,车辆价格${this.car.price*5}`)
            }
        }
       let kc = new KuaiChe(666,'奔驰');
       let trip = new Trip(kc)
       trip.start()
       trip.end()
    

    题目2

    image.png
    要求:

    1、画出UML类图
    2、用ES6语法写出该示例

    解答:

    一、分析

    • 某停车场,分三层,每层100车位

    包含三个类停车场(park)、层(floor)、车位(place)

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

    车位(place)这个类里面有方法监听车辆的驶入(in)和离开(out),判读其状态(emtpy)是否为空

    • 车辆进入前,显示每层的空余车辆数量

    车辆进入前,面对的是停车场(park),所以空余车辆数量的信息是由停车场释放出来,停车场(park)里面有个方法,显示每层空余车辆数量,具体的实现方法交个层(floor)这个类,最后由停车场汇总所有层数的空余数量(emptyPlaceNum)

    • 车辆进入时,摄像头可识别车牌号和时间

    摄像头(Camera)也需要定义一个类,识别车牌号和时间,需要存储,这个信息是存储在停车场这个类里面的,在停车场里面加个车辆列表(carList)

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

    显示器(screen)也要定义类,显示车牌号,通过车牌号拿到之前的记录时间(time),用当前时间减去记录时间就是停车时长

    1、UML类图


    image.png

    2、用ES6语法写出该示例

    // 车
    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里去
            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变成字符串
            }).join('\n')
        }
    }
    
    // 层
    class Floor {
        // 层数(index)和车位(place)
        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
        }
        // 进入时,状态为false,车位是有车的
        in() {
            this.empty = false
        }
        // 驶出时,状态为true,车位是没有车的
        out() {
            this.empty = true
        }
    }
    
    // 测试代码------------------------------
    //初始化才层数,有三层,分为100个车位
    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 Park(floors)
    
    // 初始化车辆
    const car1 = new Car('A1')
    const car2 = new Car('A2')
    const car3 = new Car('A3')
    
    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)
    

    相关文章

      网友评论

        本文标题:web前端进阶之js设计模式面试篇

        本文链接:https://www.haomeiwen.com/subject/ruflvftx.html