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 ...
随机推荐
- 深入理解Java内存模型中的虚拟机栈
深入理解Java内存模型中的虚拟机栈 Java虚拟机在执行Java程序的过程中会把它所管理的内存划分为若干个不同的数据区域,这些区域都会有各自的用途,以及创建和销毁的时间,有的区域会随着虚拟机进程的启 ...
- web做题记录
2020.1.19 南邮ctf 签到题 题目:key在哪里? 在火狐浏览器中右键选择打开查看源代码,在源代码可以看到如下 因为是第一次做这个题,不知道提交啥,我先提交了“admiaanaaaaaaaa ...
- Windows Server多用户同时远程登录
因为工作需要,需要使用windwos作为一个远程登录跳板机,管理员对登录windwos机器再windwos的基础上连接别的机器,普通用户也可以连接windwos机器再连接别的机器,关于管理员普通用户连 ...
- yii2 环境切换(开发，正式)
方式一,在web中index修改 开发环境配置 web目录index.php defined('YII_DEBUG') or define('YII_DEBUG', true); defined('Y ...
- 885-螺旋矩阵 - III
885-螺旋矩阵 - III 在 R 行 C 列的矩阵上,我们从 (r0, c0) 面朝东面开始 这里,网格的西北角位于第一行第一列,网格的东南角位于最后一行最后一列. 现在,我们以顺时针按螺旋状行走 ...
- IDEA全局搜索
搜索文件名:连续按两下Shift键 搜索字符串:Ctrl + Shift +F
- idea修改忽视文件产生得bug
为了提交代码方便,在idea中增加了忽视文件选项. 这一修改可把自己坑惨了,更改代码运行代码得时候,连打印都没出来,对照了半天代码 也没发现是哪里得错误,后来想到某次修改代码后class文件并没改变, ...
- Codeforces1295D. Same GCDs （欧拉函数）
https://codeforces.com/contest/1295/problem/D 设gcd(a,m)= n,那么找gcd(a +x ,m)= n个数,其实就等于找gcd((a+x)/n,m/ ...
- ubuntu系统定时运行 crontab
1,crontab是个啥? ubuntu系统自带cron工具,cron是一个系统上的定时工具,用它的好处在于,不同的程序可以用同一个计时器,这样就省得不同程序各自sleep了,另外它还支持比较多的个性 ...
- 虚拟机中CentOS 6.5 添加扩展分区
此扩展方法要求支持LVM 1.更改虚拟机配置 虚拟机->设置->硬盘->扩展磁盘容量 fdisk -l 查看,发现硬盘空间变大了 [root@thj Desktop]# fdisk ...