观察者模式 也叫通知 监听者模式
如果没有设计模式我们只能一个一个改，新加一个就要改一次方法
<html> <title>观察者模式</title> <style> div{ width: 200px;height: 50px; border: 1px solid #ccc;} </style> <body> <select name="sel" id="sel"> <option value="0">男式风格</option> <option value="1">女式风格</option> </select> <input type="button" onclick="drop()" value="不引起广告的变化"> <div id="test1">11</div> <div id="test2">22</div> <div id="test3">广告</div> </body> <script> /*var t=[]; console.log(t.length); //打印长度为0 t[t.length]='1'; //相当于 t[0]='1' console.log(t.length);//打印长度为0 console.log(t);//打印 出数组 */ var sel = document.getElementById('sel'); sel.observes = []; //添加一个观察者 sel.attach = function(obj) { this.observes[this.observes.length] = obj; //把对象放到数组里 数组的下标从0开始 数组为空时也就是 this.observes[0]=obj } //删除一个观察者 sel.detach = function(obj) { for (var i = 0; i < this.observes.length; i+=1) { if (this.observes[i] === obj) { delete this.observes[i]; } } } //onchange 改变的时候通知 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'); 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 = 'test3的女 口红'; } else if (sel.value == '0') { this.innerHTML = 'test3的男0 足球'; } } sel.attach(test2); //调用改变 sel.attach(test3); //删除监听 function drop(){ sel.detach(test3); } </script> </html>
原理就是注册一个数组，把需要监听的放到数组里面 然后for循环调用改变 这样就灵活了
/****/
理解 
