JavaScript 디자인 모드 브로커 모드
24797 단어 JavaScript 디자인 모드
하나.생활의 정경.
공항에서 탑은 중개자 역할을 하기 때문에 탑이 있으면 부근에 착륙해야 하는 비행기는 서로 통신할 필요가 없다. 대신 부근에 착륙해야 하는 비행기는 정보를 탑에 보내고 탑은 비행기를 총괄적으로 스케줄링한다.
둘.정의
중개자(Mediator) 모드: 일련의 대상 간의 상호작용을 봉인하여 기존 대상 간의 결합을 느슨하게 하고 독립적으로 상호작용을 바꿀 수 있도록 중개 대상을 정의한다.중개자 모델은 조정 모델이라고도 하는데 이것은 디미트 법칙의 전형적인 응용이다.
중개자 모델은 대상 행위형 모델로 그 주요 장점은 다음과 같다.
4
4
4
주요 단점은 중개자 모델이 원래 여러 대상의 직접적인 상호 의존을 중개자와 여러 동료류의 의존 관계로 바꾸었다는 것이다.동료류가 많을수록 중개인은 비대해져 복잡하고 유지하기 어려워진다.
셋.개발 실천
1. 구매 상품 수요: 만약에 우리가 핸드폰 한 대를 구매해야 한다고 가정하면 구매 색깔과 수량을 선택할 수 있다. 사용자가 색깔을 선택하지 않거나 수량을 선택하거나 재고가 부족할 때 우리는 구매 버튼에 정보를 알려주고 클릭할 수 없다.일반 구현:
<body>
: <select id="colorSelect">
<option value=""> option>
<option value="red"> option>
<option value="blue"> option>
select>
: <input type="text" id="numberInput" />
: <div id="colorInfo">div><br />
: <div id="numberInfo">div><br />
<button id="nextBtn" disabled="true"> button>
body>
<script>
var colorSelect = document.getElementById('colorSelect'),
numberInput = document.getElementById('numberInput'),
colorInfo = document.getElementById('colorInfo'),
numberInfo = document.getElementById('numberInfo'),
nextBtn = document.getElementById('nextBtn');
var goods = {
//
"red": 3,
"blue": 6
};
colorSelect.onchange = function () {
var color = this.value, //
number = numberInput.value, //
stock = goods[color]; //
colorInfo.innerHTML = color;
if (!color) {
nextBtn.disabled = true;
nextBtn.innerHTML = ' ';
return;
}
if (((number - 0) | 0) !== number - 0) {
//
nextBtn.disabled = true;
nextBtn.innerHTML = ' ';
return;
}
if (number > stock) {
//
nextBtn.disabled = true;
nextBtn.innerHTML = ' ';
return;
}
nextBtn.disabled = false;
nextBtn.innerHTML = ' ';
};
</script>
폐단: 그 중 하나를 수정할 때마다 우리는 트리거 함수에서 다른 항목이 조건에 부합되는지 판단하고 구매 단추의 표시 내용을 제어해야 한다. 예를 들어 메모리, 저장 공간, 세트 등 옵션을 추가할 때 사람을 아프게 하는 판단 코드를 많이 추가한다.이때 우리는 중개자를 끌어들여 버튼의 표시 내용을 판단에 맡길 수 있다.
var goods = {
//
"red|32G": 3,
"red|16G": 0,
"blue|32G": 1,
"blue|16G": 6
};
var mediator = (function () {
var colorSelect = document.getElementById('colorSelect'),
memorySelect = document.getElementById('memorySelect'),
numberInput = document.getElementById('numberInput'),
colorInfo = document.getElementById('colorInfo'),
memoryInfo = document.getElementById('memoryInfo'),
numberInfo = document.getElementById('numberInfo'),
nextBtn = document.getElementById('nextBtn');
return {
changed: function (obj) {
var color = colorSelect.value, //
memory = memorySelect.value,//
number = numberInput.value, //
stock = goods[color + '|' + memory]; //
if (obj === colorSelect) {
//
colorInfo.innerHTML = color;
} else if (obj === memorySelect) {
memoryInfo.innerHTML = memory;
} else if (obj === numberInput) {
numberInfo.innerHTML = number;
}
if (!color) {
nextBtn.disabled = true;
nextBtn.innerHTML = ' ';
return;
}
if (!memory) {
nextBtn.disabled = true;
nextBtn.innerHTML = ' ';
return;
}
if (((number - 0) | 0) !== number - 0) {
//
nextBtn.disabled = true;
nextBtn.innerHTML = ' ';
return;
}
nextBtn.disabled = false;
nextBtn.innerHTML = ' ';
}
}
})();
// ：
colorSelect.onchange = function () {
mediator.changed(this);
};
memorySelect.onchange = function () {
mediator.changed(this);
};
numberInput.oninput = function () {
mediator.changed(this);
};
넷.총결산
많은 대상이 서로 인용하면 모든 대상의 삭제는 직접 또는 간접적으로 그 대상을 인용하는 데 영향을 미치고 대상이 증가함에 따라 코드는 점점 관리하고 유지하기 어려워진다.중개자 모델은 각 대상 간의 결합을 해소하고 중개자와 대상 간의 일대다 관계로 대상 간의 망상 다대다 관계를 대체한다.
좋은 웹페이지 즐겨찾기
