用js写的简单观察者模式

来源：互联网发布：华为云计算部门待遇编辑：程序博客网时间：2024/06/05 04:58
<span style="font-size:14px;"><html><head><meta Content-type="text/html" charset="utf-8"></meta></head><body><select name="change"><option value="red">红色</option><option value="yellow">黄色</option></select><div id="color" style="width:300px;height: 300px">红色</div><div id="text" style="width:300px;height: 300px">文字显示</div></body><script type="text/javascript">var sel = document.getElementsByTagName("select")[0]; sel.observers = {};//添加观察者sel.attach = function(key,obj){sel.observers[key] = obj;}//删除观察者sel.detach = function(key){delete sel.observers[key]}//被观察者改变是通知观察者sel.onchange = sel.notify = function(){for(var key in sel.observers){sel.observers[key].update(sel);}}//颜色观察者得到通知的动作document.getElementById("color").update = function(observer){if(observer.value == "red"){this.style.backgroundColor = "red";}else if(observer.value == "yellow"){this.style.backgroundColor = "yellow";}}//文字观察者得到通知后的动作document.getElementById("text").update = function(observer){if(observer.value =="red"){this.innerHTML = "我喜欢红色";}else if(observer.value = "黄色"){this.innerHTML = "我喜欢黄色";}}var color = document.getElementById("color");var text = document.getElementById("text");sel.attach("color",color);sel.attach("text",text); </script></html></span>
0 0