Javascript pattern examples Observer pattern_javascript skills-JS Tutorial-php.cn

Javascript pattern examples Observer pattern_javascript skills

WBOY

Release： 2016-05-16 18:43:35

Original

979 people have browsed it

There are many great people in the garden who have written these articles, but most of the examples are .NET. Today I want to give a usage example of JS. Friends who are interested can first learn about some awesome people, such as the observer section in Brother Li Huijun’s design pattern chapter
http://www.cnblogs.com/Terrylee/archive/2006/ 10/23/Observer_Pattern.html
Let me talk about my own understanding of this pattern. The core idea is: each observed object changes according to changes in the object data, and the observed object must There is the same change behavior to constrain, this constraint is the unified interface provided by the observed object to the observer. Observers develop behaviors that change data.

JS is a weakly typed script, and many things must be agreed upon. Unlike .NET, which has interface constraints, without further ado, let’s look at the example directly:
Observer instance

Copy code The code is as follows:

 
var ObserverObj = { /**//*Dependent object*/ 
FirstName : "Max", 
LastName: "Gan", 
Id: 1 
} 
var ObserverManager = { /**//*Observer*/ 
Observers:[], /** //*Observation object set*/ 
AddObserver: function(item){/**//*Add observation object*/ 
this.Observers.push(item); 
}, 
Change: function(obj){ /**//*Change object behavior*/ 
for(var item in obj){ 
ObserverObj[item] = obj[item]; 
}//Change the data dependent object data
for(var i = 0,len = this.Observers.length; i < len; i ){ 
var item = this.Observers[i]; 
item.Display(); //After the object changes, change the observation object The behavior of Display; is a unified interface 
} 
} 
} 
var Header = function(){ /**//*Observation object Header*/ 
this.Display = function(){ 
alert(ObserverObj.FirstName); 
} 
} 
var Content = function(){ /**//*Observe object Content*/ 
this.Display = function(){ 
alert (ObserverObj.LastName); 
} 
} 
var Foot = function(){ /**//*Observation object Foot*/ 
this.Display = function(){ 
alert(ObserverObj. Id); 
} 
} 

The above example ObserverManager only provides the binding method (AddObserver). There are other coding techniques such as unbinding. Maybe everyone Just think about it and you will know. In fact, the ultimate purpose of these codes is that when the Observers data is changed, other objects will respond accordingly according to the data changes. OK, now let's bind them.

Copy code The code is as follows:

 
/***Bind observer action***/ 
ObserverManager .AddObserver(new Header()); 
ObserverManager.AddObserver(new Content()); 
ObserverManager.AddObserver(new Foot()); 

How will we use it in the end? Woolen cloth? (An imbecile question... haha) Look at the example.
How to use

Copy the code The code is as follows:

Change FirstName
Change LastName
Change Id

I attach the entire example Now, friends who are interested can download it and take a look.
Javascript Observer Mode.rar
How far a person can go depends on who he travels with