前端设计模式

单例模式singleton

class Singleton {
    constructor (){
        const instance = this.constructor.instance
        if(instance){
            return instance
        }
        this.constructor.instance = this
    }
}

monostate单态

// 不改变构造函数 但实例能共享属性
class SuperIdol {
    get name() {
        return SuperIdol._name
    }
    set name(val) {
        SuperIdol._name = val
    }
    get age() {
        return SuperIdol._age
    }
    set age(val) {
        SuperIdol._age = val
    }
    getInfo() {
        return `idol的名字是${this.name},年龄是${this.age}`
    }
}
const jessica = new SuperIdol()
jessica.name = 'Jessica Jung'
jessica.age = 18
console.log(jessica.getInfo())
// idol的名字是Jessica Jung,年龄是18
const krystal = new SuperIdol()
krystal.name = 'Krystal Jung'
krystal.age = 15
console.log(krystal.getInfo())
// idol的名字是Krystal Jung,年龄是15
console.log(jessica.getInfo())
// idol的名字是Jessica Jung,年龄是18
console.log(krystal === jessica) // false

观察者模式 observable

class Event {
    constructor() {
        // 选用map结构 便于取消订阅
        this.handlers = new Map()
        // 作为key
        this.count = 0
    }

    subscribe(handler) {
        this.handlers.set(++this.count, handler)
        return this.count
    }

    unsubscribe(idx) {
        console.log('取消订阅')
        this.handlers.delete(idx)
    }

    // 1. 谁触发了事件
    // 2. 事件参数
    fire(sender, args) {
        this.handlers.forEach((handler, index) => {
            handler(sender, args)
        })
    }
}

class FallsIllArgs {
    constructor(address) {
        this.address = address
    }
}

class Person {
    constructor(name, address) {
        this.name = name
        this.address = address
        this.fallsIll = new Event()
    }
    catchCold() {
        this.fallsIll.fire(this, new FallsIllArgs(this.address))
    }
}

let p1 = new Person('细细粒','洪兴')
let sub1 = p1.fallsIll.subscribe((sender, args) => {
    console.log(sender, args)
    console.log(`${sender.name}生病了，医生需要前往${args.address}`)
    // 细细粒生病了，医生需要前往洪兴
})
p1.catchCold()
// 取消订阅
p1.fallsIll.unsubscribe(sub1)
p1.catchCold()

• 订阅属性

class Event {
    constructor() {
        // 选用map结构 便于取消订阅
        this.handlers = new Map()
        // 作为key
        this.count = 0
    }

    subscribe(handler) {
        this.handlers.set(++this.count, handler)
        return this.count
    }

    unsubscribe(idx) {
        console.log('取消订阅')
        this.handlers.delete(idx)
    }

    // 1. 谁触发了事件
    // 2. 事件参数
    fire(sender, args) {
        this.handlers.forEach((handler, index) => {
            handler(sender, args)
        })
    }
}

class PropertyChangedArgs {
    constructor(name, newVal) {
        this.name = name
        this.newVal = newVal
    }
}
class Person {
    constructor(name, age) {
        this.name = name
        this._age = age
        this.propertyChanged = new Event()
    }
    get age() {
        return this._age
    }

    set age(value) {
        if (!value || this._age === value) {
            return
        }
        this._age = value
        this.propertyChanged.fire(this, new PropertyChangedArgs('age', value))
    }

}
class RegistrationChecker {
    constructor(person) {
        this.person = person
        this.token = person.propertyChanged.subscribe(this.handlerAgeChange.bind(this))
    }
    handlerAgeChange(sender, args) {
        if (sender === this.person && args.name === 'age') {
            if (args.newVal < 18) {
                console.log(`${sender.name}的年龄变化为${args.newVal}`)
            } else {
                sender.propertyChanged.unsubscribe(this.token)
            }
        }

    }
}

let p1 = new Person('细细粒', 15)
new RegistrationChecker(p1)
p1.age = 16 // 细细粒的年龄变化为16
p1.age = 17 // 细细粒的年龄变化为17
p1.age = 18 // 取消订阅 不再监听
p1.age = 19

、