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设计模式与开发实践>读书笔记. 发布-订阅模式又叫观察者模式,它定义了对象之间的一种一对多的依赖关系.当一个对象的状态发生改变时,所有依赖它的对象都将得到通知. 例如 ...
随机推荐
- 将GDB中的输出定向到文件
1 set args >output.log 三种方法,一种通过tee在启动时重定向: 1 gdb |tee -a file 第二种在run时加入: 1 run <input.txt &g ...
- 关于"implicit declaration of function 'gettimeofday' is invalid in c99"的解决
http://blog.csdn.net/macmini/article/details/10503799 当我们使用 gettimeofday(&time, NULL);时,会出现这样一个W ...
- This Android SDK requires Android Developer Toolkit version 20.0.0 or above
本人最近在操作更新ANDROID SDK时出现类似于题目中的错误,是一启动ECLIPSE时.但是,我现在只是想恢复到原先的开发环境.于是找到本文,方法有效!!! windows 下面安装Android ...
- ubuntu 更换系统源和pip源
1 . 备份 cd /etc/apt sudo cp sources-list sources-list.bak 2 . 编辑 这里用了阿里云的源 sudo vi sources-list 将文件内容 ...
- (2)ASP.NET 页面指令
页面指令 一共有12个指令,这些指令用来控制APS.NET页面的行为. Assembly,Control,Implements,Import,Master,MasterTpye,OutputCache ...
- （3）PHP环境搭建和使用
一.php开发环境 php开发的环境组件一般需要 apache(iis)+mysql+php 可以自己搭建环境或者用别人把这几项集成好的软件,自己搭建的环境配置起来麻烦但可以选择任意版本,集成的软件安 ...
- Mysql 通用二进制包安装
通用二进制包安装 注意:这里有严格的平台问题: 使用时:centos5.5版本 (类似Windows下的绿色包) 下载(mirrors.sohu.com/mysql) 直接使用tar 解压到指 ...
- 代码编辑器[0] -> Vim/gVim[2] -> Vim 的相关知识
相关知识 / Relevant Knowledge 1 _vimrc编程 / _vimrc Program 1. 注释符", 用于注释 2. 关键词set, 用于设置功能等 3. 关键词im ...
- ReactiveCocoa(二)
前言 通过ReactiveCocoa(一)的学习,相信大家对ReactiveCocoa有了一些基本认识吧.下面就让我们来学习ReactiveCocoa的一些基本使用吧! ReactiveCocoa基本 ...
- andriod 剪贴板操作
<?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android=&quo ...