<!DOCTYPE html>

<html>

	<head>

		<meta charset="UTF-8">

		<title></title>

	</head>

	<body>

		<div id="box">

			点我发布事件

		</div>

		<script src="js/jquery-2.1.0.min.js" type="text/javascript" charset="utf-8"></script>

		<script type="text/javascript">

			var pubSub = function(){};

			pubSub.prototype.threadPool = [];

			pubSub.subscribe = function(name,cb){

				pubSub.prototype.threadPool.push({

					name:name,

					fun:cb

				});

			}

			pubSub.publish = function(name){

				var threadPool = pubSub.prototype.threadPool;

				for (var i in threadPool) {

					setTimeout(function(i){

						if(threadPool[i]['name']==name){

							threadPool[i]['fun']();

						}

					}(i),0);

				}

			}

			$("#box").click(function(){

				pubSub.publish('dateChange');

			})

			pubSub.subscribe('dateChange',function(){

				this.name = 'lisi'

				console.log('hello world')

			})

			pubSub.subscribe('dateChange',function(){

				this.name = 'zhangsan'

				console.log('这是我订阅的第二个方法')

			})

		</script>

	</body>

</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. ARMV7-M数据手册---Part B ：System Level Architecture---B3 System Address Map

    1.前言 2.The system address map 3.System Control Space (SCS) 4.The system timer, SysTick 5. Nested Vec ...

  2. Linux动态调频系统CPUFreq之一：概述【转】

    转自:https://blog.csdn.net/zhangyongfeiyong/article/details/53506362 随着技术的发展,我们对CPU的处理能力提出了越来越高的需求,芯片厂 ...

  3. 给你的Linux系统上点stress【转】

    转自:https://blog.csdn.net/sunvince/article/details/7187768 from: http://blog.yufeng.info/archives/202 ...

  4. python下载夏目友人帳

    python下载夏目友人帐 一般情况下我们使用爬虫更多的应该是爬数据或者图片吧,今天在这里和大家分享一下关于使用爬虫技术来进行视频下载的方法,不仅可以方便的下载一些体积小的视频,针对大容量的视频下载同 ...

  5. Linux将公网ip映射到局域网ip

    测试环境如下: monitor: msc1:公网IP:103.6.164.128 eth0 内网IP:192.168.0.57 eth0内网IP:192.168.0.16 eth1 通过访问monit ...

  6. 部署openfaas

    首先必须部署Docker CE 17.05或者以上版本. 首先卸载旧版本, $ sudo yum remove docker \ docker-common \ docker-selinux \ do ...

  7. Nodejs脚手架搭建基于express的应用

    原文链接:https://www.cnblogs.com/FE-yanyi1993/p/6413042.html 这篇写的非常详细,此处只做记录. 1.安装生成器 $ npm install expr ...

  8. socket 通信 error：88

    调用函数(setsockopt)来设置 recv buffer 和send  buffer时报错: setsockopt error: Socket operation on non-socket(e ...

  9. MySQL基本语句、存储引擎

    数据库服务器中存放的是 库(文件加) 表(文件) 表里面是记录(一行数据)quit or  exit 退出客户端\s \c  \G 库(文件)    创建        create database ...

  10. groupID和artifactID填什么

    Maven的pom.xml文件中的groupID和artifactID: GroupID是项目组织唯一的标识符,实际对应JAVA的包的结构,是main目录里java的目录结构.ArtifactID就是 ...