자바스크립트 패턴 예시 관찰자 패턴_자바스크립트 기술

이 기사를 작성한 훌륭한 사람들이 많지만 대부분의 예제는 .NET입니다. 오늘은 JS의 사용 예제를 제공하고 싶습니다. 관심 있는 친구들은 먼저 Li Huijun 형제의 디자인 패턴 챕터의 관찰자 섹션과 같은 멋진 사람들에 대해 알아볼 수 있습니다.
http://www.cnblogs.com/Terrylee/archive/2006/ 10 /23/Observer_Pattern.html
이 패턴에 대한 내 자신의 이해에 대해 이야기하겠습니다. 핵심 아이디어는: 관찰된 각 객체는 객체 데이터의 변화에 ​​따라 변하며, 관찰된 객체는 반드시 있어야 한다는 것입니다. 동일한 변경 동작을 제한하는 이 제약은 관찰된 개체가 관찰자에게 제공하는 통합 인터페이스입니다. 관찰자는 데이터를 변경하는 행동을 개발합니다.

JS는 약한 형식의 스크립트이므로 많은 사항에 동의해야 합니다. 인터페이스 제약이 있는 .NET과 달리 더 이상 고민하지 말고 직접 예제를 살펴보겠습니다.
Observer 인스턴스

코드 복사 코드는 다음과 같습니다.

var ObserverObj = { /**//*종속 객체*/
FirstName : "Max",
LastName: "Gan",
Id: 1
}
var ObserverManager = { /**//*관찰자*/
Observers:[], /** //*관찰 객체 세트*/
AddObserver: function(item){/**//*관찰 객체 추가*/
this.Observers.push(item)
},
변경: function( obj){ /**//*객체 동작 변경*/
for(var item in obj){
ObserverObj[item] = obj[item]
}//데이터 종속 객체 데이터 변경
for(var i = 0,len = this.Observers.length; i < len; i ){
var item = this.Observers[i]
item.Display(); 관찰 객체 변경 Display의 동작은 통합 인터페이스입니다
}
}
}
var Header = function(){ /**//*관찰 객체 헤더*/
이것입니다. Display = function(){
alert(ObserverObj.FirstName);
}
}
var Content = function(){ /**//*객체 내용 관찰*/
this.Display = function (){
alert(ObserverObj.LastName);
}
}
var Foot = function(){ /**//*관찰 객체 발*/
this.Display = function(){
alert(ObserverObj.Id);
}
}

위 예제 ObserverManager는 바인딩 방법(AddObserver)만 제공합니다. 다들 생각해보면 알 것이다. 실제로 이러한 코드의 궁극적인 목적은 Observer의 데이터가 변경될 때 다른 개체가 데이터 변경에 따라 그에 따라 응답하는 것입니다. 좋아, 이제 묶어보자.

코드 복사 코드는 다음과 같습니다.

/***관찰자 작업 바인딩***/
ObserverManager .AddObserver(new Header());
ObserverManager.AddObserver(new Content());
ObserverManager.AddObserver(new Foot())

결국 모직물을 쓰나요? (멍청한 질문... ㅎㅎ) 예시를 보세요.
사용방법

코드를 복사하세요 다음과 같습니다:

이름 변경
성 변경< ;/a>
ID 변경

전체 예제를 첨부합니다. 이제 관심 있는 친구들은 다운로드해서 살펴보세요.
Javascript Observer Mode.rar
사람이 얼마나 멀리 갈 수 있는지는 누구와 함께 여행하는지에 따라 다릅니다.