JavaScript Design pattern Observer pattern

The observer pattern, also called the Publish subscription pattern (Publish/subscribe), defines a one-to-many relationship that allows multiple observer objects to listen to a Subject object at the same time, notifying all observer objects when the state of the subject changes, so that they can automatically update themselves.

For example, when I come to the company for an interview, every interviewer will say to me, "Please leave your contact information, we will inform you." Here "I" is the Subscriber and the interviewer is the publisher. So I don't have to ask the interview results every day or every hour, the initiative of communication is in the hands of the interviewer. And I just need to provide a contact information.

In JS, Dom events are actually an observer pattern.

Document.body.addEventListener (' click ',function() {       ...   },false);

We do not know when the user will click on the body, so the registration of an event, when the body is clicked, the body node will be issued to subscribers to the message.

In addition, you can add subscribers and delete subscribers at random:

Document.body.addEventListener (' click ',function() {       console.log (1)   },  False);   Document.body.addEventListener (' click ',function() {       Console.log (2)   },  false);    Document.body.addEventListener (' click ',function() {       Console.log (3)   } ,false);

Based on the interview example above, it can be represented by the following code:

The interviewer throws the resume into a box, and the interviewer calls the results in the box with the resumes in the boxes at the right time.

Events =function() {            varListen, log, obj, one, remove, trigger, __this; Obj= {}; __this= This; Listen=function(Key, EVENTFN) {//Throw your resume in the box, key is the contact.              varStack, _ref;//Stack is a box .Stack= (_ref = Obj[key])! =NULL? _ref:obj[key] = []; returnStack.push (EVENTFN);            }; One=function(key, EVENTFN) {remove (key); returnListen (key, EVENTFN);            }; Remove=function(key) {var_ref; return(_ref = Obj[key])! =NULL? _ref.length = 0:void0;            }; Trigger=function() {//The interviewer called the interviewer and told them              varFN, Stack, _i, _len, _ref, key; Key=Array.prototype.shift.call (arguments); Stack= (_ref = obj[key])! =NULL? _ref:obj[key] = [];  for(_i = 0, _len = stack.length; _i < _len; _i++) {fn=stack[_i]; if(Fn.apply (__this, arguments) = = =false) {                  return false; }              }              return{listen:listen, One:one, Remove:remove, Trigger: Trigger}}

The observer's use situation is that when an object's change needs to change other objects at the same time, and it doesn't know how many objects need to be changed, you should consider using the observer pattern.

In the backbone framework, the change mechanism of an event is an observer pattern, and when a user changes a property, the trigger event is called to notify the Subscriber to trigger the event in turn.

The design pattern series is basically reference JavaScript design pattern and the development practice one book content, extracts inside the outline to facilitate the study.

JavaScript Design pattern Observer pattern