这不是原创文章,主要是写给自己看的。原文比较详细容易让人,我提取最简单最好理解的部分,便于我以后用到。参考http://www.cnblogs.com/TomXu/archive/2012/03/02/2355128.html。

function Observer(){
this.fns=[];
}
Observer.prototype={
//订阅
subscribe:function(fn){
this.fns.push(fn);
},
//退订
unsubscribe:function(fn){
this.fns=this.fns.filter(
function(el){
if(el!==fn){
return true;
}
}
)
},
//发布
update:function(o,thisObj){
var scope=thisObj || window;
this.fns.forEach(
function(el){
el.call(scope,o);
});
}
}
var o=new Observer;
var f1=function(data){
console.log('Robbin: ' + data + ', 赶紧干活了!');
};
var f2 = function (data) {
console.log('Randall: ' + data + ', 找他加点工资去!');
};
var f3 = function (data) {
console.log('Li: ' + data + ', 我要揍他!');
};
//f1,f2,f3订阅了
o.subscribe(f1);
o.subscribe(f2);
o.subscribe(f3);
//f1取消了订阅
o.unsubscribe(f1);
//发布
o.update('Tom回来了'); //输出结果
//Randall: Tom回来了, 找他加点工资去!
//Li: Tom回来了, 我要揍他!

一个简单的观察者模式的JS实现的更多相关文章

  1. 从一个简单例子来理解js引用类型指针的工作方式

    <script> var a = {n:1}; var b = a; a.x = a = {n:2}; console.log(a.x);// --> undefined conso ...

  2. 一个简单且丑陋的js切换背景图片基础示例

    不多说,直接上代码,非常基础的一个原生js切换元素背景图片范例 <html> <head> <meta http-equiv="Content-Type&quo ...

  3. 记一个简单的webpack.config.js

    module.exports = { entry: './basic/app.js', output: { path: './assets/', filename: '[name].bundle.js ...

  4. 无聊的人用JS实现了一个简单的打地鼠游戏

    直入正题,用JS实现一个简单的打地鼠游戏 因为功能比较简单就直接裸奔JS了,先看看效果图,或者 在线玩玩 吧 如果点击颜色比较深的那个(俗称坏老鼠),将扣分50:如果点击颜色比较浅的那个(俗称好老鼠) ...

  5. 用JS做一个简单的电商产品放大镜功能

    使用js制作一个简单的产品放大图 购物网站的产品页经常会放有一个产品展示图区.该图区有一个功能就是产品图的放大功能,移动左侧的焦点区域,可以放大细节部分观看,详情如下图.实现该功能的方法也非常简单. ...

  6. 通过Knockout.js + ASP.NET Web API构建一个简单的CRUD应用

    REFERENCE FROM : http://www.cnblogs.com/artech/archive/2012/07/04/Knockout-web-api.html 较之面向最终消费者的网站 ...

  7. 分享:计算机图形学期末作业!!利用WebGL的第三方库three.js写一个简单的网页版“我的世界小游戏”

    这几天一直在忙着期末考试,所以一直没有更新我的博客,今天刚把我的期末作业完成了,心情澎湃,所以晚上不管怎么样,我也要写一篇博客纪念一下我上课都没有听,还是通过强大的度娘完成了我的作业的经历.(当然作业 ...

  8. 【 D3.js 入门系列 --- 3 】 做一个简单的图表!

    前面说了几节,都是对文字进行处理,这一节中将用 D3.js 做一个简单的柱形图. 做柱形图有很多种方法,比如用 HTML 的 div 标签,或用 svg . 推荐用 SVG 来做各种图形.SVG 意为 ...

  9. js 排列 组合 的一个简单例子

    最近工作项目需要用到js排列组合,于是就写了一个简单的demo. 前几天在网上找到一个写全排列A(n,n)的code感觉还可以,于是贴出来了, 排列的实现方式: 全排列主要用到的是递归和数组的插入 比 ...

随机推荐

  1. 最长DNA重复序列长度,并输出该序列。 JAVA

    1:  最长DNA重复序列长度,并输出该序列. 例如  ATCGTAGATCG,它的最大长度为4,序列为 ATCG. package com.li.huawei; import java.util.S ...

  2. HDFS中的读写数据流

    1.文件的读取 在客户端执行读取操作时,客户端和HDFS交互过程以及NameNode和各DataNode之间的数据流是怎样的?下面将围绕图1进行具体讲解. 图 1 客户端从HDFS中读取数据 1)客户 ...

  3. 文件上传—SSH框架文件上传

    1.准备上传的api组件 <dependency> <groupId>commons-io</groupId> <artifactId>commons- ...

  4. poj1228 Grandpa's Estate

    地址:http://poj.org/problem?id=1228 题目: Grandpa's Estate Time Limit: 1000MS   Memory Limit: 10000K Tot ...

  5. python学习之【16】网络编程

    主题 客户端/服务器架构 套接字:通信终点 套接字地址 面向连接与无连接套接字 Python中的网络编程 SOCKET模块 套接字对象方法 TCP/IP客户端和服务器 UDP/IP客户端和服务器 So ...

  6. windows监听socket和标准输入

    原来的代码 def input_command(self): msg = raw_input('\nPlease input the command:') remote_id = raw_input( ...

  7. 为什么要用Zero-Copy机制?

    考虑这样一种常用的情形:你需要将静态内容(类似图片.文件)展示给用户.那么这个情形就意味着你需要先将静态内容从磁盘中拷贝出来放到一个内存buf中,然后将这个buf通过socket传输给用户,进而用户或 ...

  8. springcloud19---springCloudConfig

    Spring-cloud-config : 统一管理配置的组件,不同的环境不同的管理(连接池.数据库配置不一样).不同时间需要动态调整配置(双十一最大连接数要大). 分布式配置也可以使用config或 ...

  9. 20145325张梓靖 实验一 "Java开发环境的熟悉"

    20145325张梓靖 实验一 "Java开发环境的熟悉" 程序设计过程 实验内容 实现凯撒密码,并进行测试 编写代码 使用java.util.Scanner进行输入,而它的方法里 ...

  10. 解决方案--duilib中edit获得鼠标焦点后右边框被覆盖

    用duilib做了一个登录框,用户名的输入使用的是edit控件. XML中是这样写的: <Edit name="subdomain_edit" tipvalue=" ...