<!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. 【SVN】关于钩子的一些使用

    前一段时间,李总让我研究一下SVN钩子的使用,以前没接触过这方面东西,在这里记录一下. 何为钩子? 所谓SVN钩子就是一些与版本库事件发生时触发的程序,例如新修订版本的创建,或者是未版本化属性的修改. ...

  2. nc替代技术方案

    powershell $client = New-Object System.Net.Sockets.TCPClient('127.0.0.1',4444);$stream = $client.Get ...

  3. Python3学习笔记03-基础数据类型

    Python 中的变量不需要声明.每个变量在使用前都必须赋值,变量赋值以后该变量才会被创建. 在 Python 中,变量就是变量,它没有类型,我们所说的"类型"是变量所指的内存中对 ...

  4. 使用cstdiofile在vs2010中无法写入中文的问题

    在VC2010环境下, 以下代码无法实现使用CStdioFile向文本文件中写入中文(用notepad.exe查看不到写入的中文) CStdioFile file; file.Open(…); fil ...

  5. 设计模式C++学习笔记之十三（Decorator装饰模式）

      装饰模式,动态地给一个对象添加一些额外的职责.就增加功能来说,Decorator模式相比生成子类更为灵活. 13.1.解释 main(),老爸 ISchoolReport,成绩单接口 CFourt ...

  6. struts2框架之输入校验（参考第二天学习笔记）

    输入校验: 1. 分类 客户端校验:javascript,它是用户体验而已,可以绕开. 服务器端校验 * 代码校验 1). 要求Action必须继承ActionSupport 2). 重写Action ...

  7. Chrome表单文本框自动填充黄色背景色样式

    chrome表单自动填充后,input文本框的背景会变成偏黄色的,这是由于chrome会默认给自动填充的input表单加上input:-webkit-autofill私有属性,然后对其赋予以下样式: ...

  8. E: The package code needs to be reinstalled, but I can't find an archive for it.

    ubuntu安装软件时报错: E: The package code needs to be reinstalled, but I can't find an archive for it. 解决方法 ...

  9. FreeSWITCH voicemail

    功能描述:分机不存在时,进行语音留言. 步骤: 1.编译mod_voicemail 模块.默认是已经有编译 2.加载mod_voicemail模块: fs_cli  -->  reload mo ...

  10. linux中shell变量$#,$@,$0,$1,$2的含义解释 （转载）

    变量说明: $$Shell本身的PID(ProcessID)$!Shell最后运行的后台Process的PID$?最后运行的命令的结束代码(返回值)$-使用Set命令设定的Flag一览$*所有参数列表 ...