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

이 기사를 작성한 훌륭한 사람들이 많지만 대부분의 예제는 .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
사람이 얼마나 멀리 갈 수 있는지는 누구와 여행하느냐에 따라 다릅니다.