console
var sel = document.getElementById('sel');
sel.observes = [];
sel.attach = function (obj) {
this.observes[this.observes.length] = obj;
}
sel.detach = function (obj) {
for (var i = 0; i < this.observes.length; i += 1) {
if (this.observes[i] === obj) {
delete this.observes[i];
}
}
}
sel.onchange = sel.notify = function () {
for (var i = 0; i < this.observes.length; i += 1) {
this.observes[i].update(this);
}
}
var test2 = document.getElementById('test2');
var test3 = document.getElementById('test3');
test2.update = function (sel) {
if (sel.value == '1') {
this.innerHTML = '足球新闻';
} else if (sel.value == '0') {
this.innerHTML = '宋明星来了';
}
}
test3.update = function (sel) {
if (sel.value == '1') {
this.innerHTML = '大众汽车';
} else if (sel.value == '0') {
this.innerHTML = '化妆品好好好';
}
}
sel.attach(test2);
sel.attach(test3);
function drop() {
sel.detach(test3);
}
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>js设计模式</title>
<link rel="stylesheet" href="./css/app.css">
</head>
<body>
<select name="sel" id="sel">
<option value="0">女式风格</option>
<option value="1">男式风格</option>
</select>
<input type="button" onclick="drop();" value="不引起广告的变化了">
<br><br><br><br>
<div id="test2">新闻</div>
<div id="test3">广告</div>
</body>
<script src="js/app.js"></script>
</html>
div {
width: 80%;
height: 200px;
border: 1px solid blue;
margin: 10px;
}