HTML+JS 实现观察者模式
- JS实现两端：服务端和客户端
- HTML实现界面风格
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<h1>观察者模式</h1>
<select name="sel">
<option value="man">男人风格</option>
<option value="fel">女人风格</option>
</select>
<div id="content" style="width: 100px;height: 100px;border:1px solid gray;margin-top: 20px;">
找一个好老婆
</div>
<div id="ad" style="width: 100px;height: 100px;border:1px solid gray; margin-top: 20px;">
找一个有房子的老公
</div>
<br>
<input type="button" value="观察广告" onclick="t1()" /> <input type="button" value="不观察广告" onclick="t2()"/>
<script type="text/javascript">
//服务端（被观察者）；
var sel = document.getElementsByTagName('select')[0];
//带sel是规范对象区域
sel.observers = {};//定义对象区域;
sel.attach = function (key, obj) {
this.observers[key] = obj;
};
sel.detach = function (key) {
delete this.observers[key];
}
sel.onchange = sel.notify= function () {
for (var key in this.observers) {
this.observers[key].update(this);
}
};
//客户端（观察者）
var content = document.getElementById('content');
var ad = document.getElementById('ad');
content.update = function (observee) {
if (observee.value == 'man') {
this.style.backgroundColor = 'gray';
} else if (observee.value == 'fel') {
this.style.backgroundColor = 'pink';
}
}
ad.update = function (observee) {
if (observee.value == 'man') {
this.innerHTML = '汽车';
} else if (observee.value == 'fel') {
this.innerHTML = '化妆品';
}
}
sel.attach('1', content);
/**
*
* 后期要添加一个观察者，只需要添加一个update方法，
* 然后监听观察者即可，代码上解除代码耦合行（JS框架）
*
*/
var adarea=document.getElementById('ad');
function t1() {
sel.attach('adarea',adarea);
}
function t2() {
sel.detach('adarea',adarea);
}
</script>
</body>
</html>
