JS实现简单的观察者模式
<!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实现简单的观察者模式的更多相关文章
- 原生JS封装简单动画效果
原生JS封装简单动画效果 一致使用各种插件,有时候对原生JS陌生了起来,所以决定封装一个简单动画效果,熟悉JS原生代码 function animate(obj, target,num){ if(ob ...
- HTML(.js) – 最简单的方式操作 DOM 的 JS 库
HTML(.js) 是一个轻量的(压缩后~2kb) JavaScript 库,简化了与 DOM 交互的方法. 这个 JavaScript 库的方法可读性很好,并具有搜索和遍历 DOM 的方法.相比 j ...
- Sea.js提供简单、极致的模块化开发体验
为什么使用 Sea.js ? Sea.js 追求简单.自然的代码书写和组织方式,具有以下核心特性: 简单友好的模块定义规范:Sea.js 遵循 CMD 规范,可以像 Node.js 一般书写模块代码. ...
- 投票系统 & js脚本简单刷票
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- JS的简单用法
JS的简单用法 参考:http://www.w3school.com.cn/js/js_switch.asp JavaScript 是网络的脚本语言 JavaScript 是可插入 HTML 页面的编 ...
- 基于vue.js的简单用户管理
功能描述:添加.修改.搜索过滤 效果图: <!DOCTYPE html> <html lang="en"> <head> <title&g ...
- JS实现简单的运行代码 & 侧边广告
/* JS实现简单的运行代码功能 */<!doctype html> <html> <head> <meta charset="utf-8" ...
- Centos7 中 Node.js安装简单方法
最近,我一直对学习Node.js比较感兴趣.下面是小编给大家带来的Centos7 中 Node.js安装简单方法,在此记录一下,方便自己也方便大家,一起看看吧! 安装node.js 登陆Centos ...
- angular4.0和angularJS、react.js、vue.js的简单比较
angularJS特性 模板功能强大丰富(数据绑定大大减少了代码量) 比较完善的前端MVC框架(只要学习这个框架,按照规定往里面填东西就可以完成前端几乎所有的的问题) 引入了Java的一些概念 ang ...
随机推荐
- MongoDB 学习手册 - 安装(windwos 环境)
- vue 中通过 ajax 获取数据时，如何避免绑定的数据中出现 property of undefined 错误
参考链接:https://segmentfault.com/q/1010000008264089?_ea=1597485
- css3基础一
1,css简介 CSS 用于控制网页的样式和布局.样式定义如何显示html元素,样式通常保存在外部的 .css 文件中.通过仅仅编辑一个简单的 CSS 文档,外部样式表使你有能力同时改变站点中所有页面 ...
- struts文件下载机制
Struts2 中使用 type="stream" 的 result 进行下载即可.只用提供一个输入流inputStream,剩下的输出工作struts帮我们做. 例子一: 1.可 ...
- Gitlab 备份迁移恢复报错gtar: .: Cannot mkdir: No such file or directory
1. 版本信息 OS: centos 6.9 Gitlab: gitlab-ce.10.7.4 gitlab-ce.10.8.0 gitlab-ce.10.8.3 gitlab-ce.10.8.4 2 ...
- Node.js的异步IO和事件轮询
想象一下,以前我们在写程序时, 如果程序在I/O上阻塞了,当有更多请求过来时,服务器会怎么处理呢?在这种情景中通常会用多线程的方式.一种常见的实现是给每个连接分配一个线程,并为那些连接设置一个线程池 ...
- 使用new data计算时间以及格式转换
1.时间计算,往后加30(默认一个月的时间),sxTime表示的是在当前时间往后加几天的之后一个月 function maxDate1(){ var nowDate = new Date(); max ...
- Jetbrain系列软件配置文件同步
https://intellij-support.jetbrains.com/hc/en-us/articles/206544519-Directories-used-by-the-IDE-to-st ...
- localstorage实现网页状态记录比如放音乐功能的实例
<div class="music"> <a href="javascript:;" onclick="playPause();&q ...
- codeforces411div.2
每日CF: 411div2 Solved A CodeForces 805A Fake NP Solved B CodeForces 805B 3-palindrome Solved C CodeFo ...