Observer model

Defines a one-to-many dependency between objects in which all dependent objects are notified when an object’s state changes

What is the observer model?

The publisk-subscribe pattern, also known as the observer pattern, defines a one-to-many dependency between objects. When an object’s state changes, all dependent objects are notified. In JavaScript development, we generally use the event model instead of the traditional publish-subscribe model.

Here’s an example:

Fruit sellers Zhang boss and Wang boss have to enter a batch of bananas, their fruit is called qian Duo Duo (below collectively referred to as Qian Boss) fruit wholesaler there into. When boss Zhang and boss Wang went to the money boss into the fruit, boss Zhang told boss Wang, boss zhang bananas have not arrived, a few days before the arrival of the goods. In desperation, Boss Zhang and Boss Wang have left their phone numbers in qian boss there, asked Qian boss, after the arrival of bananas, the first time to inform them.

Above qian boss acted the role of publisher, Zhang boss and Wang boss acted the role of subscribers. After the arrival of bananas, Qian boss will take the initiative to send a message to Zhang boss and Wang Lao, let the two bosses to pick up bananas. The advantage of this is that during the time when the banana does not arrive, Boss Zhang and Boss Wang can do other things without taking the initiative to contact Boss Qian and just wait for the news from Boss Qian. That is decoupling in time in program code, decoupling between objects.

Custom events

In fact, the observer mode is something that we’ve all used before, which is something that we’re familiar with but the built-in events often don’t meet our requirements so we need to customize the events

Now we want to implement this functionality. Define an event object that does the following

  • Listening events (subscription events)
  • Triggering events (event publishing)
  • Remove events (unsubscribe events)

Of course we can’t just subscribe to one event, there could be a lot of them so we have to set up different keys for different events so that we store events in a structure that looks like this

EventList = {
    evtName1: [Callback function1, the callback function2. ] .evtName2: [Callback function1, the callback function2. ] .evtName3: [Callback function1, the callback function2. ] ,}Copy the code

The following code

var createEventSys = function(){
    return {
        // Listen for eventName through the on interface
        // If eventName is raised, the callback function is executed
        on: function (eventName, callback) {
            // If the Event object does not have handles, define handles for the Event object with an initial value of {}
            // The handles attribute is used to store events and callback execution functions (i.e., events subscribed to and function methods executed after triggering events)
            if(!this.handles){
                this.handles={};
            }
            // If the event eventName does not exist in handles, the event is stored in handles and the set of callback logic functions corresponding to the event is initialized
            if(!this.handles[eventName]){
                this.handles[eventName]=[];
            }
            // Push callback to the set of callback logic functions corresponding to eventName in handles
            this.handles[eventName].push(callback);
        },
        // Trigger eventName
        emit: function (eventName) {
            // If event eventName has subscribers, the corresponding callback methods for subscribers of event eventName are executed in turn
           if(this.handles[arguments[0]]) {for(var i=0; i<this.handles[arguments[0]].length; i++){this.handles[arguments[0]][i](arguments[1]); }}},// Remove eventName
        remove: function (eventName, fn) {
            // Check whether the fn observer for eventName exists and remove the FN observer for eventName
            if(this.handles[eventName]){
                for(var i=0; i<this.handles[eventName].length; i++){
                    if(this.handles[eventName][i] === fn){
                        this.handles[eventName].splice(i,1);
                        break; }}}}}; }var Event = createEventSys();
Event.on('test'.function (result) {
    console.log(result);
});
Event.on('test'.function () {
    console.log('test');
});
Event.emit('test'.'hello world'); // Output 'hello world' and 'test'

// Object person1 and object Person2 extend reuse custom systems
var person1 = {};
var person2 = {};
Object.assign(person1, createEventSys());
Object.assign(person2, createEventSys());
person1.on('call1'.function () {
    console.log('person1');
});
person2.on('call2'.function () {
    console.log('person2');
});
person1.emit('call1'); / / output 'person1'
person1.emit('call2'); // No output
person2.emit('call1'); // No output
person2.emit('call2'); / / output 'person2'
Copy the code

As in the above code, we have implemented a basically complete custom event system using the observer pattern.

conclusion

The observer model has two obvious advantages

Time decoupling Decoupling between objects

There are many places in front end development where the observer pattern is appropriate, and where it is appropriate to use the observer pattern

Hope this article is helpful, if you like it, please follow me, I will continue to update some technical articles to my nuggets homepage, thank you for your support!