前端界面

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. open()和with open()的区别

    open 1,打开文件 file=open("文件名",“读写模式”) 2,操作文件 *** 3,关闭文件 file.close() 注意事项: 使用open方法,文件操作完毕之后 ...

  2. gulp常用插件之gulp-load-plugins使用

    更多gulp常用插件使用请访问:gulp常用插件汇总 gulp-load-plugins这是一款批量引入package.json文件中的依赖项工具. 更多使用文档请点击访问gulp-load-plug ...

  3. ubuntu16.04更换成国内源

    一.首先使用自带的vi编辑器 安装完ubuntu后没有默认的root密码,如果要设置root密码需要进行如下步骤: 1 sudo passwd 2 连续输入两次新密码 二.vi编辑器下使用[backs ...

  4. PAT (Basic Level) Practice （中文）1022 D进制的A+B (20 分)

    输入两个非负 10 进制整数 A 和 B (≤),输出 A+B 的 D (1)进制数. 输入格式: 输入在一行中依次给出 3 个整数 A.B 和 D. 输出格式: 输出 A+B 的 D 进制数. 输入 ...

  5. R语言函数化编程笔记2

    R语言函数化编程笔记2 我学过很多的编程语言,可以我写的代码很啰嗦,一定是我太懒了.或许是基础不牢地动山摇 1.为什么要学函数 函数可以简化编程语言,减少重复代码或者说面向对象的作用 2.函数 2.1 ...

  6. [Python]pyhon去除txt文件重复行 python 2020.2.10

    代码如下: import shutil readPath='E:/word4.txt' #要处理的文件 writePath='E:/word5.txt' #要写入的文件 lines_seen=set( ...

  7. D - Three Integers

    https://codeforces.com/contest/1311/problem/D 本题题意:给出a,b,c三个数,a<=b<=c: 可以对三个数中任意一个进行+1或-1的操作: ...

  8. js获取URL里的参数

    第一种 通过正则获取URL中指定的参数 /** * 获取指定的URL参数值 * URL:http://www.xxx.com/index?name=123 * 参数:param URL参数 * 调用方 ...

  9. 理解 Oracle 多租户体系中（12c,18c,19c）创建角色作用域范围

    本篇探讨以下几个问题:你可提前猜测下面6个场景语句中,哪几个可以成功创建角色? 1. 在CDB级别中创建公共角色,不带 container 子句的效果: 2. 在CDB级别中创建公共角色,带 cont ...

  10. 155.XSS攻击原理

    XSS攻击: XSS(Cross Site Script)攻击叫做跨站脚本攻击,他的原理是用户使用具有XSS漏洞的网站的时候,向这个网站提交一些恶意代码,当用户在访问这个网站的某个页面的时候,这个恶意 ...