<!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. 调试 - Visual Studio调试

    Visual Studio - 调试 异常处理机制 windows预定义了一系列的异常错误码,每种程序异常都有一个对应的错误码,windows系统将这些类似键值对关系的数据存储在异常处理表中(称为SE ...

  2. C语言中用于计算数组长度的函数 “strlen（） ”。

    de>#include<stdio.h>#include<stdlib.h>#define MAX_LEN 255int my_strlen1(const char* s ...

  3. python异常处理的两种写法

    (1)第一种写法 需要注意的是 在抛出异常的时候,HTTPError必须写在URLError之前,因为只有这样前者才能抛出异常,不然的话就会被后者拦截,提前抛出异常. from urllib.requ ...

  4. 析构函数 声明为protected

    1.如果一个类被继承,同时定义了基类以外的成员对象,且基类析构函数不是virtual修饰的, 那么当基类指针或引用指向派生类对象并析构(例如自动对象在函数作用域结束时:或者通过delete)时,会调用 ...

  5. [转] 浅谈Trie树（字典树）

    原文地址:https://www.cnblogs.com/TheRoadToTheGold/p/6290732.html Trie树(字典树) 一.引入 字典是干啥的?查找字的. 字典树自然也是起查找 ...

  6. CF1091F New Year and the Mallard Expedition

    题目地址:CF1091F New Year and the Mallard Expedition 题意比较复杂,整理一下: \(n\) 段,每段有两个属性:长度,地形(G,W,L) 有三种运动方式: ...

  7. Linux查看压缩文件内容【转】

    查看一个归档或者压缩文件的内容而无需解压它 得益于 Linux 社区,有很多命令行工具可以来达成上面的目标.下面就让我们来看看使用它们的一些示例. 1.使用 vim 编辑器 vim 不只是一个编辑器, ...

  8. redis启动异常

    在官网上下载redis包,解压后启动. 启动redis报下面的错误! *** FATAL CONFIG FILE ERROR *** Reading the configuration file, a ...

  9. 一个漂亮的php验证码类

    一个漂亮的php验证码类(分享)   作者: 字体:[增加 减小] 类型:转载 下面小编就为大家分享一个漂亮的php验证码类.需要的朋友可以过来参考下   直接上代码: 复制代码 代码如下: //验证 ...

  10. FTP服务器基础设定

    1.安装vsftpd文件服务器 sudo apt-get install vsftpd 2.配置文件:/etc/vsftpd/vsftpd.conf 严格来说,整个 vsftpd 的配置文件就只有这个 ...