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设计模式与开发实践>读书笔记. 发布-订阅模式又叫观察者模式,它定义了对象之间的一种一对多的依赖关系.当一个对象的状态发生改变时,所有依赖它的对象都将得到通知. 例如 ...
随机推荐
- jQuery选择器总结(重要)
jQuery 的选择器可谓之强大无比,这里简单地总结一下常用的元素查找方法 $("#myELement") 选择id值等于myElement的元素,id值不能重复在文档中只能有一个 ...
- 自定义topo遇到的坑
错误:TypeError: __init__() got an unexpected keyword argument 'delay' 解决办法:在创建topo的地方加一个link=TCLink即可, ...
- （一）使用sklearn做各种回归
#申明,本文章参考于 https://blog.csdn.net/yeoman92/article/details/75051848 import numpy as np import matplot ...
- 远程服务器的SqlServer允许本地连接
最近做项目都是直接在阿里云买的服务器,并且SqlServer也是安装好的.但是默认的时候,这个服务器上的SqlServer并不允许直接在本地的SqlServer客户端访问,尽管服务器有公网IP. 想要 ...
- Usage of API documented as @since 1.6+
报错:即方法是Java1.6才开始有的 File ->Project Structure->Project Settings -> Modules -> Language Le ...
- Wannafly挑战赛4 A解方程【二分/set/hash求解方程】
https://www.nowcoder.com/acm/contest/35/A 题目描述 给出n个整数和x,请问这n个整数中是否存在三个数a,b,c使得ax2+bx+c=0,数字可以重复使用. 输 ...
- 消息队列集群kafka安装配置
1. 下载wget http://mirror.rise.ph/apache/kafka/0.11.0.0/kafka_2.12-0.11.0.0.tgz2. 安装tar xf kafka_2.12- ...
- Email List
题目:给几个Email的list,输出全部list的交集(在全部list中都出现过的email). 思路:用set记录前i个list中都含有的email,当进行第i+1时,检查每个email是否在该s ...
- [BZOJ 3108] 图的逆变换
Link: BZOJ 3108 传送门 Solution: 样例教你做题系列 观察第三个输出为No的样例,发现只要存在$edge(i,k),edge(j,k)$,那么$i,j$的出边一定要全部相同 于 ...
- noip2017集训测试赛（十一）Problem C: 循环移位
题面 Description 给定一个字符串 ss .现在问你有多少个本质不同的 ss 的子串 t=t1t2⋯tm(m>0)t=t1t2⋯tm(m>0) 使得将 tt 循环左移一位后变成的 ...