옵저버 모드 (게시자-서브 스크립 더 모드라고도 함)는 가장 일반적으로 사용되는 모드 중 하나 여야합니다. 우리가 일반적으로 접촉하는 DOM 이벤트를 포함하여 많은 언어로 널리 사용됩니다. 또한 JS와 DOM간에 구현 된 관찰 모드입니다.
코드 사본은 다음과 같습니다.
div.onclick = 함수 클릭 () {
경고 ( "클릭 ')
}
DIV의 클릭 이벤트를 구독하는 한 기능 클릭이 트리거됩니다.
그렇다면 옵저버 모드는 무엇입니까? 인생의 관찰자 모드를 살펴 보겠습니다.
할리우드에는 유명한 말이 있습니다. "전화하지 마, 전화 할게." 이 문장은 관찰자 패턴의 내부를 설명합니다. 그 중 "I"는 출판사이고 "You"는 가입자입니다.
또 다른 예를 드리겠습니다. 인터뷰를 위해 회사에 왔을 때, 모든 면접관은 내가 끝난 후 나에게 말할 것입니다. "연락처 정보를 남겨 주시면 뉴스가 있으면 알려 드리겠습니다." 여기 "I"는 가입자이며 면접관은 출판사입니다. 따라서 매일 또는 시간마다 인터뷰 결과에 대해 물어볼 필요가 없으며 의사 소통의 이니셔티브는 면접관의 손에 달려 있습니다. 그리고 연락처 정보를 제공하면됩니다.
옵저버 모드는 두 모듈 사이의 분리를 매우 잘 달성 할 수 있습니다. 팀에서 HTML5 게임을 개발하고 있다면 게임이 시작되면 일부 이미지 자료를로드해야했습니다. 게임 로직은 이러한 이미지를로드 한 후에 만 실행됩니다. 이것이 여러 사람이 함께 일 해야하는 프로젝트라고 가정 해 봅시다. 게이머와 맵 모듈을 완료했고 동료 A는 이미지 로더 로더 로디메지를 썼습니다.
LoadImage 코드는 다음과 같습니다.
코드 사본은 다음과 같습니다.
loadImage (imgary, function () {
map.init ();
gamer.init ();
})
이미지가로드되면 맵이 렌더링되고 게임 로직이 실행됩니다. 글쎄, 프로그램은 잘 실행 중입니다. 갑자기 어느 날, 나는 게임에 사운드 함수를 추가해야한다는 것을 기억했다. 이미지 로더에 코드 줄을 추가해야합니다.
코드 사본은 다음과 같습니다.
loadImage (imgary, function () {
map.init ();
gamer.init ();
sount.init ();
})
그러나이 모듈을 쓴 내 동료 A는 해외 여행을 갔다. 그래서 나는 그를 불렀다. LoadImage 기능은 어디에 있습니까? 변경할 수 있습니까? 변경 후 부작용이 있습니까? 당신이 생각 하듯이, 모든 종류의 불안한 일이 일어났습니다. 처음 에이 방법을 쓸 수 있다면 :
코드 사본은 다음과 같습니다.
loadImage.listen ( "ready", function () {
map.init ();
})
loadImage.listen ( "ready", function () {
gamer.init ();
})
loadImage.listen ( "ready", function () {
sount.init ();
})
LoadImage가 완료된 후에는 작업이 완료 되었기 때문에 미래에 어떤 일이 일어날 지 신경 쓰지 않습니다. 다음으로 신호 만 게시합니다.
코드 사본은 다음과 같습니다.
loadImage.trigger ( "Ready");
그런 다음 'Ready'이벤트의 LoadImage 이벤트를 듣는 주제는 알림을받습니다. 마지막 인터뷰 예와 마찬가지로. 면접관은 면접 결과를받은 후 면접관이 어디에서 먹을지 신경 쓰지 않습니다. 그는 면접관의 이력서를 함께 수집 할 책임이 있습니다. 인터뷰 결과가 나오면 이력서의 전화 번호에 따라 하나씩 통지합니다.
많은 개념에 대해 이야기 한 후 특정 구현을 달성 할 수 있습니다. 구현 프로세스는 실제로 매우 간단합니다. 면접관은 이력서를 상자에 던지고 면접관은 하나씩 전화하여 적절한 시간에 결과를 알립니다.
코드 사본은 다음과 같습니다.
events = function () {
var listen, log, obj, one, remove, trigger, __ this;
obj = {};
__ this = this;
listen = function (key, eventfn) {// 이력서를 상자에 던지십시오. 키는 연락처 정보입니다.
var 스택, _ref; // 스택은 상자입니다
stack = (_ref = obj [key])! = null? _ref : obj [key] = [];
return stack.push (eventfn);
};
one = function (key, eventfn) {
제거 (키);
리턴 듣기 (key, eventfn);
};
제거 = 함수 (키) {
var _ref;
return (_ref = obj [key])! = null? _ref.length = 0 : void 0;
};
trigger = function () {// 면접관이 전화를 걸어 면접관에게 알립니다.
var fn, stack, _i, _len, _ref, 키;
key = array.prototype.shift.call (인수);
stack = (_ref = obj [key])! = null? _ref : obj [key] = [];
for (_i = 0, _len = stack.length; _i <_len; _i ++) {
fn = 스택 [_i];
if (fn.apply (__ this, arguments) === 거짓) {
거짓을 반환합니다.
}
}
반품 {
듣기 : 듣고,
하나 : 하나,
제거 : 제거하고
트리거 : 트리거
}
}
마지막으로, 옵저버 모드를 사용하여 성인 TV 방송국에 대한 작은 응용 프로그램을 작성하십시오.
코드 사본은 다음과 같습니다.
// 가입자
var indulttv = event ();
Adulttv .Listen ( "Play", function (data) {
Alert ( "오늘 영화는 누구의 영화" + data.name);
});
//발행자
aldictv .trigger ( "Play ', {'name ':'ki aso '})