javascript 设计模式 -- 发布/订阅模式
直接上代码：
index.html :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>设计模式</title>
</head>
<body>
<div id="box">
<div>{{message}}</div>
</div>
<!--
// 全局：
// 低耦合,高内聚
// 继承：JS并没有继承这个概念(伪继承),ajax没有跨域这个概念一样
// 类式继承、原型式继承
// 代码重用高：方法解耦合高(独立性)、方法尽量独立和组合都能够使用
-->
<script src="vue.js"></script>
<script>
/*// 类式继承
var father = function() { // 爸爸干爸爸的活
this.age = 50;
this.say = function(){
console.log(11);
}
} var child = function(){ // 儿子干儿子的活
this.name = "think";
father.call(this); // call apply
} var man = new child();
man.say();*/ // 原型式继承
var father = function(){
//
} father.prototype.a = function(){
console.log(2);
} var child = function(){
//
} // 子继承父属性
child.prototype = new father();
var man = new child();
man.a(); // jquery中所有方法都是可以连缀的 $(".box").html().css({"background":"yellow"})
// new对象不能直接使用 局部对象所有对象外部都无法访问 window.jQuery = window.$ = jQuery
// 调用之后才 new new Vue({ //
el:"#box", // 元素
data:{
message:"hello",
arr:[1,2,3],
num:0
},
created: function(){ // vue构造函数
var _this = this;
setInterval(function(){ // 不屑分析
_this.arr.push("DN"+(_this.num+1));
// 操作内部数据时,不会整个渲染更新(DIFF算法：区分我们哪个地方有区别)
_this.num += 1; // 动态数据追踪,订阅者模式 // 值：更新的时候,元素是存在的,无需创建元素(document.createElement)
// 数组增加：更新的时候,元素不存在,需要创建(document)
},5000);
}
}) //订阅者模式
// 每次都会输出所有的信息
/*var shoeObj = {};
shoeObj.list = []; // 存放订阅者 shoeObj.listen = function(fn){ // 订阅一次,增加数据一次
shoeObj.list.push(fn); //订阅消息添加到缓存列表
}
// 效果性的开发,只是基础
shoeObj.trigger = function(){ // 发布消息
for(var i=0,fn;fn = this.list[i++];){
fn.apply(this,arguments); // arguments
}
} // 订阅
shoeObj.listen(function(color,size){
console.log(color);
console.log(size);
}); shoeObj.listen(function(color,size){
console.log("2" + color);
console.log("2" + size);
}); shoeObj.trigger("红色",20);
shoeObj.trigger("黄色",20);*/ // 修改后
/*var shoeObj = {};
shoeObj.list = []; // 存放订阅者 shoeObj.listen = function(key,fn){ // 订阅增加一个名字,方便区分订阅者信息
if(!this.list[key]){
shoeObj.list[key] = []; //订阅消息添加到缓存列表
}
this.list[key].push(fn);
}
// 效果性的开发,只是基础
shoeObj.trigger = function(){ //根据订阅者名字发布消息
var key = Array.prototype.shift.call(arguments); //
// arguments: 参数,取出消息类型的名称
var fns = this.list[key]; // 如果没有订阅过该消息,则返回
if(!fns || fns.length === 0){
return;
} for(var i=0,fn;fn = fns[i++];){
fn.apply(this,arguments);
}
} // 订阅
shoeObj.listen("red",function(size){
console.log(size);
}); shoeObj.listen("yellow",function(size){ // yellow改为动态参数,vuejs的动态更新出来一半
console.log("2" + size);
}); shoeObj.trigger("red",40);
shoeObj.trigger("yellow",40);*/ // 封装
var event = {
list:[], // 订阅的人数是不固定的
listen:function(key,fn){
if(!this.list[key]){
this.list[key] = [];// 清空
}
}
} var shoeObj = {};
shoeObj.list = []; // 存放订阅者 shoeObj.listen = function(key,fn){ // 订阅增加一个名字,方便区分订阅者信息
if(!this.list[key]){
shoeObj.list[key] = []; //订阅消息添加到缓存列表
}
this.list[key].push(fn);
}
// 效果性的开发,只是基础
shoeObj.trigger = function(){ //根据订阅者名字发布消息
var key = Array.prototype.shift.call(arguments); //
// arguments: 参数,取出消息类型的名称
var fns = this.list[key]; // 如果没有订阅过该消息,则返回
if(!fns || fns.length === 0){
return;
} for(var i=0,fn;fn = fns[i++];){
fn.apply(this,arguments);
}
} // 订阅
shoeObj.listen("red",function(size){
console.log(size);
}); shoeObj.listen("yellow",function(size){ // yellow改为动态参数,vuejs的动态更新出来一半
console.log("2" + size);
}); shoeObj.trigger("red",40);
shoeObj.trigger("yellow",40); var initEvent = function(){ // 让所有普通对象都具有发布订阅功能
for(var i in event){ // 对象可以是多个
obj[i] = event[i];
}
} var shoeObj = {};
initEvent(shoeObj); shoeObj.listen("red",function(size){
console.log(size);
}) shoeObj.trigger("red",40); // 取消订阅
event.remove = function(key,fn){
var fns = this.list[key];
if(!fns){
return false;
}
if(!fn){
fn && (fns.length = 0);
}else{
for(var i = fns.length-1;i>=0;i--){
//
}
}
} // RN
</script>
</body>
</html>
.
javascript 设计模式 -- 发布/订阅模式的更多相关文章
- javascript设计模式——发布订阅模式
前面的话 发布—订阅模式又叫观察者模式,它定义对象间的一对多的依赖关系,当一个对象的状态发生改变时,所有依赖于它的对象都将得到通知.在javascript开发中,一般用事件模型来替代传统的发布—订阅模 ...
- 设计模式-发布订阅模式(javaScript)
1. 前言 2. 什么是发布订阅模式 3. 发布订阅优缺点 4. 举例 4. 总结 1. 前言 发布订阅者模式是为了发布者和订阅者之间避免产生依赖关系,发布订阅者之间的订阅关系由一个中介列表来维护.发 ...
- js设计模式--发布订阅模式
前言 本系列文章主要根据<JavaScript设计模式与开发实践>整理而来,其中会加入了一些自己的思考.希望对大家有所帮助. 概念 发布-订阅模式又叫观察者模式,它定义对象间的一种一对多的 ...
- [转]js设计模式—发布订阅模式
发布—订阅模式又叫观察者模式,它定义对象间的一对多的依赖关系,当一个对象的状态发生改变时,所有依赖于它的对象都将得到通知.在javascript开发中,一般用事件模型来替代传统的发布—订阅模式.本文将 ...
- [转] 浅析JavaScript设计模式——发布-订阅/观察者模式
前一段时间一直在写CSS3的文章 一直都没写设计模式 今天来写写大名鼎鼎观察者模式 先画张图 观察者模式的理解 我觉得还是发布-订阅模式的叫法更容易我们理解 (不过也有的书上认为它们是两种模式……) ...
- js设计模式-发布/订阅模式
一.前言 发布订阅模式,基于一个主题/事件通道,希望接收通知的对象(称为subscriber)通过自定义事件订阅主题,被激活事件的对象(称为publisher)通过发布主题事件的方式被通知. 就和用户 ...
- Javascript设计模式之发布-订阅模式
简介 发布-订阅模式又叫做观察者模式,他定义了一种一对多的依赖关系,即当一个对象的状态发生改变的时候,所有依赖他的对象都会得到通知. 回忆曾经 作为一名前端开发人员,给DOM节点绑定事件可是再频繁不过 ...
- 理解JavaScript设计模式与开发应用中发布-订阅模式的最终版代码
最近拜读了曾探所著的<JavaScript设计模式与开发应用>一书,在读到发布-订阅模式一章时,作者不仅给出了基本模式的通用版本的发布-订阅模式的代码,最后还做出了扩展,给该模式增加了离线 ...
- [转] JavaScript设计模式之发布-订阅模式（观察者模式）-Part1
<JavaScript设计模式与开发实践>读书笔记. 发布-订阅模式又叫观察者模式,它定义了对象之间的一种一对多的依赖关系.当一个对象的状态发生改变时,所有依赖它的对象都将得到通知. 例如 ...
随机推荐
- webservice跨域文件，好多年前的东西，远程调用,js服务器端使用，可以远程调用
1.clientaccesspolicy.xml <?xml version="1.0" encoding="utf-8" ?> <acces ...
- Centos 多线程下载工具-axel
32位CentOS执行下面命令: wget -c http://pkgs.repoforge.org/axel/axel-2.4-1.el5.rf.i386.rpm rpm -ivh axel-2.4 ...
- shiro配置参考(一)
<?xml version="1.0" encoding="UTF-8"?> <beans xmlns:xsi="http://ww ...
- Appium+python自动化14-查看webview上元素（DevTools）【转载】
前言 app上webview的页面实际上是启用的chrome浏览器的内核加载的,如何把手机的网页加载到电脑上,电脑的chrome浏览器上有个开发模式DevTools,是可以方便调试的. 一.环境准备 ...
- 模拟【P1650】 田忌赛马
顾z 你没有发现两个字里的blog都不一样嘛 qwq 题目描述--->p1650 田忌赛马 先%dalao sto GMPotlc orz 他教给的我,征求意见后终于来水题解. 分析 我们需要知 ...
- 关于Android攻击面
先对android整个攻击面有一个体系化的认识,有助于理清思路, 对今后的学习有很大的帮助. 什么是攻击向量:从语言语法的角度来说,是一个动词,描述用来执行攻击的方法,描述了攻击者如何到达并接触任意给 ...
- 网络协议图形化分析工具EtherApe
网络协议图形化分析工具EtherApe 在对网络数据分析的时候,渗透测试人员往往只关心数据流向以及协议类型,而不关心具体数据包的内容.因为这样可以快速找到网络的关键节点或者重要的协议类型. Kal ...
- mysql增加和删除字段
时间字段: `create_time` datetime NOT NULL DEFAULT CURRENT_TIMESTAMP COMMENT '创建时间', `last_update_time` t ...
- linux 内核学习
http://www.cnblogs.com/tolimit/category/697314.html
- Proxy server got bad address from remote server
在ArcMap中,在GIS Servrvers中,打开已经设置好的服务器时,出现下面的弹窗问题. Proxy server got bad address from remote server(ver ...