Common design patterns

This is the sixth day that I participated in the note creation activity of the fourth youth training camp!

1, Singleton mode

Common window objects in browsers are only guaranteed to have one instance as a global shared object in the whole browser rendering environment

2, Publish subscriber mode

The subscriber registers the callback function with the subscriber. When the state of the subscriber changes, the subscriber's callback function is called to achieve the effect of publishing

Small case:
① When the subscriber calls the subscription method, the subscriber object is passed in: {subscriber object, subscriber callback function} = > that is, Push the subscriber object into the follower in the subscriber;
② When the state of the subscriber changes, execute the callback function registered by all subscribers in the subscriber follower

type Notify = (user: User) => void

class User {
    name: string
    status: 'online' | 'offline'
    follower: {user: User, notify: Notify}[]

    constructor (name: string) {
        this.name = name
        this.status = 'offline'
        this.follower = []
    }

    subscribe (user: User, notify: Notify) {
        user.follower.push({ user, notify })
    }

    online () {
        this.status = 'online'

        this.follower.forEach(({ notify }) => {
            notify(this)
        })
    }

    offline () {
        this.status = 'offline'

        this.follower.forEach(({ notify }) => {
            notify(this)
        })
    }
}

const lzx = new User('lzx')
const xmd = new User('xmd')
const cjt = new User('cjt')

lzx.subscribe(cjt, () => {
    console.log('LZX: ')
    if (cjt.status == 'online') console.log('jt coming, hey')
    if (cjt.status == 'offline') console.log('jt be gone, Sobbing')
})
xmd.subscribe(cjt, () => {
    console.log('XMD: ')
    if (cjt.status == 'online') console.log('jt coming, hey')
    if (cjt.status == 'offline') console.log('jt be gone, Sobbing')
})

cjt.online()
console.log('-------')
cjt.offline()

3, Prototype mode

Create a new object by copying the object, and set the value on the new object

4, Agent mode

It can perform some other operations before and after becoming an object to realize some decoupling operations. The above case uses the following agents:

const CreateProxyUser = (name: string) => {
    const user = new User(name)

    const ProxyUser = new Proxy(user, {
        set: (target, prop: keyof User, value) => {
            target[prop] = value
            if (prop === 'status') {
                notifyStatusHandle(target, value)
            }
            return true
        }
    })

    const notifyStatusHandle = (user: User, status: String) => {
        if (status === 'online' || 'offline') {
            user.follower.forEach(({notify}) => {
                notify(user)
            })
        }
    }

    return ProxyUser
}

In the previous implementation, the business of state change and message publishing is coupled together, which does not reflect the principle of single responsibility (one method only does one thing). When using the proxy mode to implement status change, we can call the message publishing. In the future, we need to do other business embedding, and we only need to add our other objects to the proxy object

5, Iterator mode

In the class, there is a built-in attribute [Symbol.iterator], which, as a function, returns an object containing the next method. This operation can add an iteration attribute to the class to take values in the for... of loop

• Each time the next method is called, the structure information of the current member will be returned. Specifically, it is an object containing two attributes: value and done, where value is the value of the current member, and done indicates whether the traversal is completed

class MyItertor {
    name = 'LZX'
    pets = ['cat', 'dog', 'bird', 'fish'];

    [Symbol.iterator]() {
        let node
        return {
            next: () => {
                while(node = this.pets.shift()) {
                    return {value: node, done: false}
                }
                return {value: null, done: true}
            }
        }
    }
}

const iterator = new MyItertor()
for(let item of iterator) {
    console.log(`${iterator.name} have a ${item}.`)
}

6, Design patterns in the front-end framework

Agent mode:

• Proxy for DOM operation in front-end framework
• Before and after DOM update, onBeforeUpdate() + onAfterUpdate() is the proxy mode used

Combination mode:

• Multiple objects are combined into a single object, or a single object can be used alone
• DOM structure, front-end components, file directory