1. <!DOCTYPE html>
  2. <html>
  3. 	<head>
  4. 		<meta charset="UTF-8">
  5. 		<title></title>
  6. 	</head>
  7. 	<body>
  8.  
  9. 		<div id="box">
  10. 			点我发布事件
  11. 		</div>
  12. 		<script src="js/jquery-2.1.0.min.js" type="text/javascript" charset="utf-8"></script>
  13. 		<script type="text/javascript">
  14. 			var pubSub = function(){};
  15. 			pubSub.prototype.threadPool = [];
  16. 			pubSub.subscribe = function(name,cb){
  17. 				pubSub.prototype.threadPool.push({
  18. 					name:name,
  19. 					fun:cb
  20. 				});
  21. 			}
  22.  
  23. 			pubSub.publish = function(name){
  24. 				var threadPool = pubSub.prototype.threadPool;
  25. 				for (var i in threadPool) {
  26. 					setTimeout(function(i){
  27. 						if(threadPool[i]['name']==name){
  28. 							threadPool[i]['fun']();
  29. 						}
  30. 					}(i),0);
  31. 				}
  32. 			}
  33.  
  34. 			$("#box").click(function(){
  35. 				pubSub.publish('dateChange');
  36. 			})
  37.  
  38. 			pubSub.subscribe('dateChange',function(){
  39. 				this.name = 'lisi'
  40. 				console.log('hello world')
  41. 			})
  42.  
  43. 			pubSub.subscribe('dateChange',function(){
  44. 				this.name = 'zhangsan'
  45. 				console.log('这是我订阅的第二个方法')
  46. 			})
  47.  
  48. 		</script>
  49. 	</body>
  50. </html>

var PubSub = function(){
this.threadPool = [];
this.subscrib = function(name,fun){
this.threadPool.push({
name:name,
fun:fun
});
}.bind(this);

this.publish = function(name){
this.threadPool.forEach(function(v,i){
if(v['name']==name){
v['fun']();
}
});
}.bind(this);
};
var p = new PubSub();
p.subscrib('hello',function(){console.log('hello1')});
p.subscrib('hello',function(){console.log('hello2')});
p.publish('hello');

　　

有时间会更新一下。。。。。。

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

  1. 原生JS封装简单动画效果

    原生JS封装简单动画效果 一致使用各种插件,有时候对原生JS陌生了起来,所以决定封装一个简单动画效果,熟悉JS原生代码 function animate(obj, target,num){ if(ob ...

  2. HTML(.js) – 最简单的方式操作 DOM 的 JS 库

    HTML(.js) 是一个轻量的(压缩后~2kb) JavaScript 库,简化了与 DOM 交互的方法. 这个 JavaScript 库的方法可读性很好,并具有搜索和遍历 DOM 的方法.相比 j ...

  3. Sea.js提供简单、极致的模块化开发体验

    为什么使用 Sea.js ? Sea.js 追求简单.自然的代码书写和组织方式,具有以下核心特性: 简单友好的模块定义规范:Sea.js 遵循 CMD 规范,可以像 Node.js 一般书写模块代码. ...

  4. 投票系统 & js脚本简单刷票

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  5. JS的简单用法

    JS的简单用法 参考:http://www.w3school.com.cn/js/js_switch.asp JavaScript 是网络的脚本语言 JavaScript 是可插入 HTML 页面的编 ...

  6. 基于vue.js的简单用户管理

    功能描述:添加.修改.搜索过滤 效果图: <!DOCTYPE html> <html lang="en"> <head> <title&g ...

  7. JS实现简单的运行代码 & 侧边广告

    /* JS实现简单的运行代码功能 */<!doctype html> <html> <head> <meta charset="utf-8" ...

  8. Centos7 中 Node.js安装简单方法

    最近,我一直对学习Node.js比较感兴趣.下面是小编给大家带来的Centos7 中 Node.js安装简单方法,在此记录一下,方便自己也方便大家,一起看看吧! 安装node.js 登陆Centos ...

  9. angular4.0和angularJS、react.js、vue.js的简单比较

    angularJS特性 模板功能强大丰富(数据绑定大大减少了代码量) 比较完善的前端MVC框架(只要学习这个框架,按照规定往里面填东西就可以完成前端几乎所有的的问题) 引入了Java的一些概念 ang ...

随机推荐

  1. MySql cmd下的学习笔记 —— 有关常用函数的介绍（数学函数，聚合函数等等）

    (一)数学函数 abs(x)              返回x的绝对值 bin(x)               返回x的二进制(oct返回八进制,hex返回十六进制) ceiling(x)      ...

  2. 对mysql乐观锁、悲观锁、共享锁、排它锁、行锁、表锁概念的理解

    乐观锁 乐观锁是指操作数据库时(更新操作),想法很乐观,认为这次的操作不会导致冲突,在操作数据时,并不进行任何其他的特殊处理(也就是不加锁),而在进行更新后,再去判断是否有冲突了. 实现: 通常实现是 ...

  3. Jquery的一些常见用法

    谨以此文怀念我们大学的时光,Jquery3.4.0下载 https://code.jquery.com/jquery-3.4.0.min.js ⒈常用方法 $("#div1").h ...

  4. （转载）经典计算机视觉论文笔记——DeepFace\DeepID\DeepID2\DeepID3\FaceNet\VGGFace汇总

    1. DeepFace:Closing the Gap to Human-Level Performance in Face Verification 最早将深度学习用于人脸验证的开创性工作.Face ...

  5. k64 datasheet学习笔记10---Signal Multiplexing and Signal Descriptions

    1.前言 本文主要描述多功能引脚相关的内容,包括5个32位的引脚的端口,每个32pin端口被指定一个中断 2.Signal Multiplexing Integration 3. Port contr ...

  6. Linux下编写和加载 .ko 文件（驱动模块文件）

    一..ko 文件介绍 .ko文件是kernel object文件(内核模块),该文件的意义就是把内核的一些功能移动到内核外边, 需要的时候插入内核,不需要时卸载. 二.优点 (1)这样可以缩小内核体积 ...

  7. linux系统网络相关问题

    暂时将你的 eth0 这张网络卡的 IP 设定为 192.168.1.100 ,如何进行? ifconfig eth0 192.168.1.100 我要增加一个路由规则,以 eth0 连接 192.1 ...

  8. 【HAOI2008】硬币购物

    既然没人写扩欧,那我就来一发吧. 扩欧也还好,就是跑的有点慢,然后写的时候还有点烦,不过还是卡过去了. 考场上看到这道题又蒙了...怎么回事第一题又要爆零了? 然后我打了个暴力测了一下极限数据根本过不 ...

  9. RabbitMQ 选型和对比

    背景 这个纯粹是记下知识点,知道自己在这个时候了解过这个技术.技术点网上很多,就不多说了.只是想起多年前做过的一次项目,是多个项目整合,各种数据库,java和c#项目,互相调来调去,甚至直接链接对方数 ...

  10. linux 常用的中文手册

    http://linuxtools-rst.readthedocs.io/zh_CN/latest/base/index.html 总结的非常好!包括基础.进阶以及各种常用工具.