JAVACRIPT Design Pattern-----Observer pattern

The observer pattern is highlighted in design mode because it uses a lot of scenarios and plays a very important role in modular design. The bottom of the MVC pattern is the observer pattern, and the current popular JavaScript framework backbone is one of the best frameworks for using this pattern. The Observer pattern gives us some ideas that we can use to write code in order to reduce the coupling between modules or components when dealing with the relationship between them. In a nutshell, the basic principle of observing patterns is that when a goal needs to tell the observer what is going on, it broadcasts a notification to the viewer. Here's a simple code to illustrate the pattern.

Next we start to write the JS code:

var Guangcha = (function () {//method with module mode return value var g = {}, U = 0,//The index of the registration method AFN = {};g.sub = function (n, FN) {//Register event (Afn[n] | | | (Afn[n] = = [])). Push ({i: (u++). ToString (),//can register multiple events with the same name FUNC:FN}); return u;//returns u as the unique identifier for the registered function}g.pub = function (n, params) {//Publish event if (! Afn[n]) return False;var f = Afn[n],len = f? F.length:0;while (len--) {//Traverse all event F[len].func (params) registered with the same name;}} G.unsub = function (f) {//Logoff event for (var m in AFN) {if (!afn[m].length) continue;for (var i=0; i<afn[m].length; i++) {if (afn[ M][i] = = = f) {Afn[m].slice (I, 1); return f;}}}} return g;}) ();

In the above code we can see that an observer of the most basic three methods: Register, publish, logoff. Here we introduce the index U and store them with the AFN object as storage space so that we can register multiple events with the same name without overwriting them and can be called at the time of publication. Now let's start by registering an event:

var bonjour = function (p) {      console.log (' Bonjour MONSIEUR JE ME APPLE ' +p);  } var hello = function (p) {    console.log (' Hello SIR MY NAME is ' + P);} Start registering var sbpn = guangcha.sub (' B ', bonjour);//b Event Append the first method var sbpn1 = guangcha.sub (' b ', hello); Add a second method to the//b event

We have registered two methods above, each attached to B, and when you publish B, two methods will be executed. They return SBPN and SBPN1 as indexes, which are required for subsequent logoff.

Guangcha.pub (' B ', ' John ');//Publish this event

At this point, the ' BONJOUR MONSIEUR JE ME APPLE John ' and ' HELLO SIR MY NAME is John ' are output in the browser's control panel, so a completed subscription/release process is gone. If you need to unregister an event for a subscription, we can pass the index into the Unsub method.

Guangcha.unsub (SBPN);//Logout of the first subscriber

If this issue B again, then there will only be a second sentence to appear, the first inning will not appear. Decoupling between modules can be achieved using the Observer subscriber pattern. Help us deal with the tension between modules and components.

Javacript Design Mode-----Observer pattern