Javascript js 23种设计模式

设计能力，是成为高级前端、成为技术负责人的基础能力，为什么后端开发可以轻而易举的成为技术带头人，因为后端语言大部分是基于面向对象，而面向对象就离不开设计和设计模式

从面向对象开始

面向对象三要素：封装、多态、继承，子类继承父类，封装对数据的权限和保密，多态，同一个接口不同的实现，不从事后台开发很难真正理解这几个概念。为什么要用面向对象，因为它可以让数据结构化，类其实相当于模板，通过这个类可以实例化出很多对象，下面的例子用到了继承，公用类people，只有学生student有学号但学生也有people的一些方法，其实就是提取公共部分做到代码的通用性。学会画UML类图，有个在线地址processon.com

class People {
    constructor(name, age) {
        this.name = name
        this.age = age
    }
    eat() {
        alert(`${this.name} eat something`)
    }
    speak() {
        alert(`My name is ${this.name}, age ${this.age}`)
    }
}

class Student extends People {     //继承关键字extends
    constructor(name, age, number) {
        super(name, age)  //super 传给父类执行
        this.number = number
    }
    study() {
        alert(`${this.name} study`)
    }
}

let xiaoming = new Student('xiaoming', 10, 'A1')
xiaoming.study()
console.log(xiaoming.number)
let xiaohong = new Student('xiaohong', 11, 'A2')
xiaohong.study()

关于封装，public完全开发、protected对子类开放、private对自己开放，目前es6还不支持。js的高级ts支持，其实jQuery也是一个类，它的源码就是面向对象的思路

class jQuery {
    constructor(selector) {
        let slice = Array.prototype.slice
        let dom = slice.call(document.querySelectorAll(selector))
        let len = dom ? dom.length : 0
        for (let i = 0; i < len; i++) {
            this[i] = dom[i]
        }
        this.length = len
        this.selector = selector || ''
    }
    append(node) {

    }
    addClass(name) {

    }
    html(data) {

    }
    // 此处省略若干 API
}
window.$ = function (selector) {
    return new jQuery(selector)
}

泛化指的就是继承，关联指的是引用，看下面的图示，A、B都有多态的行为就是它们可以灵活处理自己的事情，通过定义house与people建立关联，在people中引入

设计原则，了解五大设计原则，也就是什么是设计，设计模式从哪里来，推荐一本书UNIXLinux设计哲学，明白一个概念，设计和模式是分开的

下面是两道面试题考察设计能力

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.price}`)
    }
    end() {
        console.log('行程结束，价格: ' + (this.car.price * 5))
    }
}

let car = new Kuaiche(100, '桑塔纳')
let trip = new Trip(car)
trip.start()
trip.end()

// 车
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 (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)

工厂模式

去买汉堡直接点餐、取餐，不用自己去做只管吃「封装性」不管内部是怎么处理的。看一些源码它是采用那种设计模式

---

单例模式

一个项目再复杂它也只能有一个登录模块、jquery只有一个$符号

在class种定义方法没次初始化都会创建一个新的方法，通过在class的外面定义一个静态方法去模拟

class LoginForm {
    constructor() {
        this.state = 'hide'
    }
    show() {
        if (this.state === 'show') {
            alert('已经显示')
            return
        }
        this.state = 'show'
        console.log('登录框已显示')
    }
    hide() {
        if (this.state === 'hide') {
            alert('已经隐藏')
            return
        }
        this.state = 'hide'
        console.log('登录框已隐藏')
    }
}
LoginForm.getInstance = (function () {
    let instance
    return function () {
        if (!instance) {
            instance = new LoginForm();
        }
        return instance
    }
})()

// 一个页面中调用登录框
let login1 = LoginForm.getInstance()
login1.show()
// login1.hide()

// 另一个页面中调用登录框
let login2 = LoginForm.getInstance()
login2.show()

// 两者是否相等
console.log('login1 === login2', login1 === login2)  //true

---

适配器模式

用新方法去修改旧项目的代码不要去全部替换，而是将现有的资源转换成想要的资源，「比如：vue里面的计算属性」

比如：新买的mac没有USB那么我们只能去买一个转接头，来实现适配

---

装饰器模式

为对象添加新的功能，不改变原有的结构。原理：相当于把class在testable执行了一遍

@testable
class MyTestableClass {
  // ...
}

function testable(target) {
  target.isTestable = true;
}

alert(MyTestableClass.isTestable) // true

---

代理模式

事件代理，事件冒泡，在传统的函数中如何正确的使用this指向

---

观察者模式

click事件就是一个观察者，vue的生命周期「发布—订阅」