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设计模式与开发实践>读书笔记. 发布-订阅模式又叫观察者模式,它定义了对象之间的一种一对多的依赖关系.当一个对象的状态发生改变时,所有依赖它的对象都将得到通知. 例如 ...
随机推荐
- [模板]大步小步算法——BSGS算法
大步小步算法用于解决:已知A, B, C,求X使得 A^x = B (mod C) 成立. 我们令x = im - j | m = ceil(sqrt(C)), i = [1, m], j = [0, ...
- switch与if 性能测试
测试结果:switch性能更高. 测试过程:新建一个Win32 Console Application, 在cpp文件中添加下面代码 #include "stdafx.h" #in ...
- Cocoa Pods 'No such file or Directory' Error
http://stackoverflow.com/questions/27727998/cocoa-pods-no-such-file-or-directory-error 0down votefav ...
- hdu 3371(启发式合并的最小生成树)
Connect the Cities Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 32768/32768 K (Java/Other ...
- IE常见兼容问题
图片有边框 CSS 增加 border:0; border,在IE 模式下不算在宽度内;
- 关于asp.net中gridview的问题，关于footer，16aspx上下的英语交流网程序，管理员的添加和修改有问题
css部分 这是添加用户的方法 但是A.AdminName 和后面的A.取到的都是空值protected void GridView1_RowCommand(object sender,GridVie ...
- 51nod 1087 1 10 100 1000【打表】
题目来源: Ural 1209 基准时间限制:1 秒 空间限制:131072 KB 分值: 5 难度:1级算法题 收藏 关注 1,10,100,1000...组成序列1101001000...,求 ...
- LCA【bzoj3364】 [Usaco2004 Feb]Distance Queries 距离咨询
Description 奶牛们拒绝跑马拉松,因为她们悠闲的生活无法承受约翰选择的如此长的赛道．因此约翰决心找一条更合理的赛道,他打算咨询你．此题的地图形式与前两题相同．但读入地图之后,会有K个问题． ...
- Redis(二)linux下redis安装
上篇讲解了redis在windows下的安装,接下来看看在linux下如何安装redis(纯菜鸟入门级别)? (1)redis的下载及编译 这里,首先进入存放文件目录(我的云服务器的是:cd /jel ...
- 关于spring.net的面向切面编程 (Aspect Oriented Programming with Spring.NET)-简介
本文翻译自Spring.NET官方文档Version 1.3.2. 受限于个人知识水平,有些地方翻译可能不准确,但是我还是希望我的这些微薄的努力能为他人提供帮助. 侵删. 简介 Aspect-Orie ...