文档章节

JS实现观察者模式

山鹰sniper
 山鹰sniper
发布于 2014/09/18 08:26
字数 278
阅读 608
收藏 3

感谢自学IT网的燕十八老师

<!DOCTYPE HTML>
<html>
<head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>观察者模式</title>
    <style type="text/css" media="all">
        #sec{
            margin:20px;
        }
        #cont,#ad,#study{
            width:400px;
            height:200px;
            margin:10px;
            border:1px solid #ccc;
        }
    </style>
    
</head>
<body>
    <div class='container'>
        <select name="" id="sec">
            <option value='male'>男性</option>
            <option value='famale'>女性</option>
        </select>
        &nbsp;
        <input type='button' value='观察尾部' onclick='t1()' />
        <input type='button' value='不观察尾部' onclick='t2()' />
        <div id='cont'>这里是内容</div>
        <div id='ad'>这里是广告</div>
        <div id='study'>这里是学习</div>
    </div>
</body>
    <script type="text/javascript" charset="utf-8">
        var sec = document.getElementById('sec');
        var ad = document.getElementById('ad');
        var cont = document.getElementById('cont');
        var study = document.getElementById('study');

        sec.observers = {};
        sec.attach = function(key,obj){
            this.observers[key] = obj;
        }

        sec.detach = function(key){
            delete sec.observers[key];
        }

        sec.onchange = sec.notify = function(){
            for(var key in this.observers){
                this.observers[key].update(this);
            }
        }

        cont.update = function(observer){
            if (observer.value=='male') 
            {
                this.style.backgroundColor = 'gray';
            }else if (observer.value=='famale'){
                this.style.backgroundColor = 'pink';
            }
        }

        ad.update = function(observer){
            if (observer.value=='male') 
            {
                this.innerHTML = '汽车';
            }else if (observer.value=='famale'){
                this.innerHTML = '减肥';
            }
        }

        study.update = function(observer){
            if (observer.value=='male') 
            {
                this.innerHTML = '电脑';
            }else if (observer.value=='famale'){
                this.innerHTML = '化妆';
            }
        }

        // 监听
        sec.attach('cont',cont);
        sec.attach('ad',ad);
        sec.attach('study',study);

        function t1(){
            // 观察尾部
            sec.attach('study',study);
        }

        function t2(){
            // 不观察尾部
            sec.detach('study');
        }
    </script>
</html>



© 著作权归作者所有

下一篇: 301跳转
山鹰sniper
粉丝 4
博文 84
码字总数 28663
作品 0
南开
程序员
私信 提问
《JavaScript设计模式与开发实践》原则篇(2)—— 最少知识原则

最少知识原则(LKP)说的是一个软件实体应当尽可能少地与其他实体发生相互作用。这 里的软件实体是一个广义的概念,不仅包括对象,还包括系统、类、模块、函数、变量等。 单一职责原则指导我们...

嗨呀豆豆呢
2018/12/30
0
0
《JavaScript设计模式与开发实践》最全知识点汇总大全

系列文章: 《JavaScript设计模式与开发实践》基础篇(1)—— this、call 和 apply 《JavaScript设计模式与开发实践》基础篇(2)—— 闭包和高阶函数 《JavaScript设计模式与开发实践》模式...

嗨呀豆豆呢
01/04
0
0
JavaScript 中常见设计模式-单例模式

     单例模式两个条件   确保只有一个实例   可以全局访问   适用   适用于弹框的实现,全局缓存   实现单例模式      JavaScript 中的单例模式   因为 JavaScript 是无...

webstack前端栈
2018/05/19
0
0
《JavaScript设计模式与开发实践》模式篇(12)—— 装饰者模式

在传统的面向对象语言中,给对象添加功能常常使用继承的方式,但是继承的方式并不灵活, 还会带来许多问题:一方面会导致超类和子类之间存在强耦合性,当超类改变时,子类也会随之 改变;另一方...

嗨呀豆豆呢
2018/12/25
0
0
《JavaScript设计模式与开发实践》模式篇(6)—— 命令模式

命令模式是最简单和优雅的模式之一,命令模式中的命令(command)指的是一个执行某些特定事情的指令。 应用场景 有时候需要向某些对象发送请求,但是并不知道请求的接收者是谁,也不知道被请求...

嗨呀豆豆呢
2018/12/15
0
0

没有更多内容

加载失败,请刷新页面

加载更多

家庭作业——苗钰婷

2 编写一个程序,发出一声警报,然后打印下面的文本: Startled by the sudden sound, Sally shouted, "By the Great Pumpkin, what was that! #include<stdio.h>int main(){......

OSC_Okruuv
11分钟前
1
0
经典系统设计面试题解析:如何设计TinyURL(一)

原文链接: https://www.educative.io/courses/grokking-the-system-design-interview/m2ygV4E81AR 编者注:本文以一道经典的系统设计面试题:《如何设计TinyURL》的参考答案和解析为例,帮助...

APEMESH
12分钟前
1
0
2.面向对象设计原则(7条)

开闭原则 开闭原则的含义是:当应用的需求改变时,在不修改软件实体的源代码或者二进制代码的前提下,可以扩展模块的功能,使其满足新的需求。 实现方法 可以通过“抽象约束、封装变化”来实...

Eappo_Geng
14分钟前
1
0
8086汇编基础 debug P命令 一步完成loop循环

    IDE : Masm for Windows 集成实验环境 2015     OS : Windows 10 x64 typesetting : Markdown    blog : my.oschina.net/zhichengjiu    gitee : gitee.com/zhichengjiu   ......

志成就
18分钟前
1
0
使用nodeJS实现前端项目自动化之项目构建和文件合并

本文转载于:专业的前端网站➜使用nodeJS实现前端项目自动化之项目构建和文件合并 前面的话   一般地,我们使用构建工具来完成项目的自动化操作。本文主要介绍如何使用nodeJS来实现简单的项...

前端老手
32分钟前
3
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部