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