前端界面

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. Git的精简用法

    作为一名开发人员,提交代码那是家常便饭,那如何有效地利用Git进行提交代码呢?在这里介绍一些常用.必要的命令,几乎够工作中使用了. (1)git pull 命令:拉取代码,这条命令没啥说的了,在提交代 ...

  2. webkit 技术内幕 笔记 三

    浏览器内核及特性 在浏览器中,一个很重要的模块,是将页面转变成可视化的图像结果,这就是浏览器的内核,通常被称作渲染引擎.渲染:就是根据描述或者定义构建数学模型,通过模型生成图像的过程.浏览器的渲染引擎 ...

  3. navicat连接mysql出现2059错误的解决方法

    安装navicat之后新建连接出现了2059的错误 网上查询过后,发现这个错误出现的原因是在mysql8之前的版本中加密规则为mysql_native_password,而在mysql8以后的加密规则 ...

  4. Conference deadlines

    1. NLP/IR/DM/ML Conference Deadlines(Updating) Two Principles of Deadlines:1. All deadlines converge ...

  5. SpringMVC简单小结

    一.MVC的的大概解释: MVC的核心思想是业务数据抽取和业务数据呈现相分离. MVC:M(Model)+V(View)+C(Controller) M(模型层):业务数据的信息表示,通常是业务实体 ...

  6. 401 WebEx会议教程一 —— 参加会议

    · WebEx会议教程一 —— 参加会议 参加他人发起的会议 1.  在邀请邮件中,接受对方的会议邀请: 2.  一般在WebEx会议开始前15分钟时,邮箱客户端会提醒您 (如下图类似提示) 3.   ...

  7. <input type="file">文件上传

    <input> type 类型为 file 时使得用户可以选择一个或多个元素以提交表单的方式上传到服务器上,或者通过 Javascript 的 File API 对文件进行操作 . 常用i ...

  8. ubuntu18.04 编译fortran出现 ‘没有f951这个文件’处理

    机器自带了gcc所以可以编译fortran文件, 使用时, gcc **.for –o ***.out 提示,没有找到f951. 然后去网上找解决方案,有的人说在其他地方找到了f951,然后把他复制到 ...

  9. No module named 'flask.ext'

    在学习flask进行web开发的时候,遇到如下报错信息: No module named 'flask.ext' 原因:新版的flask不再支持flask.ext,所以,需要换种方式导入相应第三方库 ...

  10. php 对接国外支付 ipay88支付

    ipay88支付 近期接了一个国外的项目,客户指定要这种支付,就搞搞呗,其实流程和思路都是差不多的,往下看 他的流程其实非常简单  下面的流程仔细看看,看懂了就会了 1 首先我们需要先获取下单所需要的 ...