js设计模式之实现观察者模式实例代码
前端界面
html代码
<body>
<select name="" id="select">
<option value="">请选择风格</option>
<option value="male">男式风格</option>
<option value="female">女士风格</option>
</select>
<button onclick="t1();">观察学习区</button>
<button onclick="t2();">不观察学习区</button>
<div id="content">内容区</div>
<div id="ad">广告区</div>
<div id="study">学习区</div>
</body>
css样式
<style>
#content,#ad,#study{
width: 498px;
height: 150px;
border:1px solid #;
margin-top: 10px;
} </style>
js代码
<script>
var sel = document.getElementById("select");
// console.log(sel)
sel.objs = {}
sel.attach = function(key,obj){
this.objs[key] = obj;
}
sel.delAttach = function(key){
delete this.objs[key];
} sel.onchange = function(){
for(var key in this.objs){
this.objs[key].update(this)
}
} // 客户端
var content = document.getElementById('content')
var ad = document.getElementById('ad')
var study = document.getElementById('study')
content.update = function(objs){
if (objs.value == 'male') {
content.style.backgroundColor = "blue";
}else if (objs.value == 'female') {
content.style.backgroundColor = "pink";
}else{
content.style.backgroundColor = "";
}
}
ad.update = function(objs){
if (objs.value == 'male') {
ad.innerHTML = "汽车";
}else if (objs.value == 'female') {
ad.innerHTML = "减肥";
}else{
ad.innerHTML = "广告区";
}
}
study.update = function(objs){
if (objs.value == 'male') {
study.innerHTML = "学习编程";
}else if (objs.value == 'female') {
study.innerHTML = "学习美工";
}else{
study.innerHTML = "学习区";
}
}
sel.attach('content',content);
sel.attach('ad',ad);
sel.attach('study',study);
function t1(){
sel.attach('study',study)
}
function t2(){
sel.delAttach('study')
}
</script>
js设计模式之实现观察者模式实例代码的更多相关文章
- BootStrap fileinput.js文件上传组件实例代码
1.首先我们下载好fileinput插件引入插件 ? 1 2 3 <span style="font-size:14px;"><link type="t ...
- JS判断不能为空实例代码
JS判断不能为空实例代码.分享在此. 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" " ...
- js的dom测试及实例代码
js的dom测试及实例代码 一.总结 一句话总结: 1.需要记得 创建 标签和创建文本节点都是document的活:document.createTextNode("Rockets的姚明&q ...
- js左侧三级菜单导航实例代码
在左侧三级菜单导航想必大家都见到过吧,它的实现过程也并不复杂,下面有个不错的示例,感兴趣的朋友可以了解下 实例代码: <!DOCTYPE html PUBLIC "-//W3C// ...
- php设计模式之观察者模式实例代码
php提供的两个接口,一个被观察者接口SplSubject,一个或多个观察者接口SPLObserver,和一个可以储存对象的类SplObjectStorage.被观察者有三个方法,需要实现这三个方法, ...
- php设计模式之工厂方法实例代码
实现不修改原代码,扩展新功能 <?php header("Content-type:text/html;charset=utf-8"); /** * db接口 * 实现连接数 ...
- php设计模式之桥接模式实例代码
<?php header("Content-type:text/html;charset=utf-8"); abstract class msg{ protected $se ...
- php设计模式之策略模式实例代码
html <html> <head> <meta charset="UTF-8"> <title>简单计算器</title&g ...
- php设计模式之单例实例代码
<?php header("Content-type:text/html;charset=utf-8"); /** * 第一步,分别实例化 */ /*class Single ...
随机推荐
- 记一次mysql的问题处理@20181225
需求:由于某种原因,导致一次分库分表的环境中ddl添加字段和索引没有完全成功,比如100个分库,只有部分修改成功,需要将没有修改成功的库和表找出来,在手动去执行. 由于线上环境,这里模拟还原一下该问题 ...
- Python循环引用的解决方案
1.延迟导入:即将 from xxx import yyy 放到函数或类的内部,从而使其作用域变成局部的,但是这样可能会对性能有些影响: 2.将 from xxx import yyy 转换成 imp ...
- source、sh、./执行脚本对变量的影响
shell脚本中的变量: local一般用于局部变量声明,多在在函数内部使用. shell脚本中定义的变量是global的,其作用域从被定义的地方开始,到shell结束或被显示删除的地方为止. she ...
- 为什么 MySQL 使用 B+ 树
为什么 MySQL 使用 B+ 树是面试中经常会出现的问题,很多人对于这个问题可能都有一些自己的理解,但是多数的回答都不够完整和准确,大多数人都只会简单说一下 B+ 树和 B 树的区别,但是都没有真正 ...
- C# LINQ学习笔记五：LINQ to XML
本笔记摘抄自:https://www.cnblogs.com/yaozhenfa/p/CSharp_Linq_For_Xml.html,记录一下学习过程以备后续查用. 一.生成xml 1.1创建简单的 ...
- SpringBoot整合WEB开发--（九）整合Servlet,Filter,Listener
简介: 如果需要整合第三方框架时,可能还是不得不使用Servlet,Filter,Listener,Springboot中也有提供支持. @WebServlet("/my") pu ...
- 在阿里云IIS服务器上安装证书
在IIS服务器上安装证书 您可将下载的阿里云SSL证书安装到IIS服务器上,使您的IIS服务器支持HTTPS安全访问. 一.前提条件 申请证书时需要选择 系统自动创建CSR. 申请证书时如果选择手动创 ...
- MySQL启动失败故障思路
1.1 查看 日志 默认路径在数据路径下,以当前主机名加上.err命名 如主机名为tz,数据路径为/mnt/mysql_data目录下 日志文件为tz.err [root@tz mysql_data] ...
- 小sun的假期【牛客】
链接:https://ac.nowcoder.com/acm/contest/1085/A来源:牛客网 应肖老师要求前来更新水一水 题目描述 小 sun 非常喜欢放假,尤其是那种连在一起的长假,在放假 ...
- mysql 基础sql语法总结 （二）DML
二.DML(增.删.改) 1)插入数据 第一种写法:INSERT INTO 表名 (列名1,列名2,,......)VALUES(列值1,列值2,......) 第二种写法:INSERT INTO 表 ...