前端界面

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设计模式之实现观察者模式实例代码的更多相关文章

  1. BootStrap fileinput.js文件上传组件实例代码

    1.首先我们下载好fileinput插件引入插件 ? 1 2 3 <span style="font-size:14px;"><link type="t ...

  2. JS判断不能为空实例代码

    JS判断不能为空实例代码.分享在此. 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" " ...

  3. js的dom测试及实例代码

    js的dom测试及实例代码 一.总结 一句话总结: 1.需要记得 创建 标签和创建文本节点都是document的活:document.createTextNode("Rockets的姚明&q ...

  4. js左侧三级菜单导航实例代码

    在左侧三级菜单导航想必大家都见到过吧,它的实现过程也并不复杂,下面有个不错的示例,感兴趣的朋友可以了解下 实例代码:   <!DOCTYPE html PUBLIC "-//W3C// ...

  5. php设计模式之观察者模式实例代码

    php提供的两个接口,一个被观察者接口SplSubject,一个或多个观察者接口SPLObserver,和一个可以储存对象的类SplObjectStorage.被观察者有三个方法,需要实现这三个方法, ...

  6. php设计模式之工厂方法实例代码

    实现不修改原代码,扩展新功能 <?php header("Content-type:text/html;charset=utf-8"); /** * db接口 * 实现连接数 ...

  7. php设计模式之桥接模式实例代码

    <?php header("Content-type:text/html;charset=utf-8"); abstract class msg{ protected $se ...

  8. php设计模式之策略模式实例代码

    html <html> <head> <meta charset="UTF-8"> <title>简单计算器</title&g ...

  9. php设计模式之单例实例代码

    <?php header("Content-type:text/html;charset=utf-8"); /** * 第一步,分别实例化 */ /*class Single ...

随机推荐

  1. Educational Codeforces Round 79 (Rated for Div. 2) Finished （A-D）

    如果最大值比剩余两个加起来的总和+1还大,就是NO,否则是YES #include<bits/stdc++.h> using namespace std; int main(){ int ...

  2. Linux网络课程学习第六天

    本节课程主要内容:针对第四章节进行了收尾,以及对第五章的用户身份与文件权限进行了详细讲解. 学习心得:干货很多,收获满满.

  3. V-Box

    Not ) (VERR_NEM_NOT_AVAILABLE). VT-x is disabled in the BIOS for all CPU modes (VERR_VMX_MSR_ALL_VMX ...

  4. 关于全球唯一标识GUID的生成

    1.c#生成GUID的几种方式 (1)生成标准的标志符 (36位标准) var strguid = Guid.NewGuid().ToString(); 结果:B2A5AB40-EE29-4791-9 ...

  5. 2019.2.21 T2题解

    meet 大概思路就是 , 找出相交的路径 , 判断方向 , 分类讨论.. 假设已经找出了相交路径 ... 若方向相同 , 则找到相交路径上边权的最大值 , 若最大值>出发时间差 , 则可行. ...

  6. 零基础入门 Kubernetes，你需要知道这些

    Kubernetes是什么? 大概很多人对此都有疑问,不过在容器领域,Kubernetes却无人不晓. 阿里.字节跳动.腾讯.百度等中国互联网行业巨擘们,近年来都在深耕容器领域,而Kubernetes ...

  7. VMware安装CentOS系统与配置全过程

    1.需要哪些安装包 VMware Workstation 15 Pro CentOS-7-x86_64-DVD-1810 hadoop-2.7.3 apache-hive-3.1.1 jdk-8u18 ...

  8. linux-crond_计划任务

    定时计划任务 主要文件介绍: [root@nginx ~]# ll /etc/cron* -d drwxr-xr-x. 2 root root 21 7月 11 20:28 /etc/cron.d d ...

  9. mysql 表中数据不存在则插入，否则更新数据

    在很多时候我们会操作数据库表,但是在向表中插入数据时,会遇到表中已经存在该id的数据或者没有该id的数据的情况,没有该id的数据的情况时直接插入就OK,遇到已经存在该id的数据的情况则更新该id的数据 ...

  10. windows10（家庭版）+ laradock 安装踩坑记一记

    Docker 安装: 首先我们需要在系统安装 Docker 的免费社区版,官方提供 Windows.Mac 及 Linux 等版本下载:下载地址.下载操作系统对应版本后,按照引导流程安装,最后打开 D ...