<!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. Rasterization 学习笔记

    ======================Barycentric interpolation====================================== <1>2d/3d ...

  2. 浅谈Linux下CPU利用率和CPU负载【转】

    转自:https://blog.csdn.net/Alisa_xf/article/details/71430406 在Linux/Unix下,CPU利用率(CPU utilization)分为用户态 ...

  3. C++ 类中特殊的成员变量（常变量、引用、静态）的初始化方法

    有些成员变量的数据类型比较特别,它们的初始化方式也和普通数据类型的成员变量有所不同.这些特殊的类型的成员变量包括: a.引用 b.常量 c.静态 d.静态常量(整型) e.静态常量(非整型) 常量和引 ...

  4. 题解-CodeForces700E Cool Slogans

    Problem 题目链接 题目大意:给定一个字符串,每次取出出现至少两次的子串替换原串,问最多能替换多少次,输出答案加一(字符串长为\(2×10^5\)) Solution 前置技能:SAM.线段树合 ...

  5. office xml 方式

    office2007以上版本(2003需要增加2007插件)可以采用xml方式操作生成excel,效率高,无并发问题,比传统com组件方式更方便

  6. hostapd中扫描的调用过程

    扫描结果获取supplicant_event(EVENT_SCAN_RESULTS)wpa_supplicant_event_scan_results_wpa_supplicant_event_sca ...

  7. $Django orm增删改字段、建表 ，单表增删改查，Django请求生命周期

    1 orm介绍  ORM是什么   ORM 是 python编程语言后端web框架 Django的核心思想,“Object Relational Mapping”,即对象-关系映射,简称ORM.  一 ...

  8. (并发编程）RLock（与死锁现象），Semaphore，Even事件,线程Queue

    一.死锁现象与递归锁所谓死锁: 是指两个或两个以上的进程或线程在执行过程中,因争夺资源而造成的一种互相等待的现象,若无外力作用,它们都将无法推进下去.此时称系统处于死锁状态或系统产生了死锁,这些永远在 ...

  9. Mac 系统重新安装的几种方法

    转:https://blog.csdn.net/feibozhulang/article/details/43734109 苹果官网说明: https://support.apple.com/en-u ...

  10. 前端 ---BOM的介绍

    BOM的介绍 JavaScript基础分为三个部分: ECMAScript:JavaScript的语法标准.包括变量.表达式.运算符.函数.if语句.for语句等. DOM:文档对象模型,操作网页上的 ...