<!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. UVA315 Network 连通图割点

    题目大意:有向图求割点 题目思路: 一个点u为割点时当且仅当满足两个两个条件之一: 1.该点为根节点且至少有两个子节点 2.u不为树根,且满足存在(u,v)为树枝边(或称 父子边,即u为v在搜索树中的 ...

  2. MySQL报错解决方案：2013-Lost connection

    今天上课的时候,在搭建完MySQL测试环境中出现的问题,整理如下: 问题描述:搭建完MySQL,用远程连接工具(Navicat)连接时报错: 2013-Lost connection to MySQL ...

  3. Django中的csrf基础了解

    简介 django为用户实现防止跨站请求伪造的功能,通过中间件 django.middleware.csrf.CsrfViewMiddleware 来完成.而对于django中设置防跨站请求伪造功能有 ...

  4. pythonの连接MySQL数据库

    1.要确保开发环境中安装了pymsql,如果没有安装那么在控制台输入: pip3 install pymysql 安装完成后,打开编辑器: #!/usr/bin/env python import p ...

  5. poi读取Excel模板并修改模板内容与动态的增加行

    有时候我们可能遇到相当复杂的excel,比如表头的合并等操作,一种简单的方式就是直接代码合并(浪费时间),另一种就是写好模板,动态的向模板中增加行和修改指定单元格数据. 1.一个简单的根据模板shee ...

  6. BurpSuite使用笔记

    参考:Burp Suite 实战指南 Proxy模块 options--> add 设置监听地址,端口 binding 如果是作为本地浏览器代理默认(127.0.0.1:8080)就可以了. 如 ...

  7. Python-有关文件操作，函数调用几道练习：

    1.写函数,,用户传入修改的文件名,与要修改的内容,执行函数,完成批了修改操作 2.写函数,计算传入字符串中[数字].[字母].[空格] 以及 [其他]的个数 3.写函数,判断用户传入的对象(字符串. ...

  8. FAT文件系统规范v1.03学习笔记---3.根目录区之FAT目录项结构

    1.前言 本文主要是对Microsoft Extensible Firmware Initiative FAT32 File System Specification中文翻译版的学习笔记. 每个FAT ...

  9. LNMP下Nginx 中文文件名或目录404无法访问的解决方法

    貌似很多人还是会遇到中文乱码的问题,Apache可以使用mod_encoding支持中文目录和文件,LNMP下Nginx其实不需要安装额外的组件即可支持中文文件名或中文目录,下面说一下常见的CentO ...

  10. 【BZOJ 2119】股市的预测（SAM）

    SAM很好用的啊... 传送门 双倍经验:L-Gap Substrings 基本做法类似,这道题的差分改掉,map 改掉就好了QWQ noteskey 反正就是先差分一下,然后把首项丢掉(没有比较的对 ...