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设计模式与开发实践>读书笔记. 发布-订阅模式又叫观察者模式,它定义了对象之间的一种一对多的依赖关系.当一个对象的状态发生改变时,所有依赖它的对象都将得到通知. 例如 ...
随机推荐
- WPF中的URI
在 Windows Presentation Foundation (WPF) 中,使用统一资源标识符 (URI) 标识和加载文件的方式有很多,包括: 指定当应用程序第一次启动时显示的用户界面 (UI ...
- Oracle clob 操作
--Oracle clob 操作 -- Created on 2015/4/8 by TianPing declare -- Local variables here v_clob1 Clob; v_ ...
- JS或jsp获取Session中保存的值
JS是不能读取Session中的值的 . session是服务器对象, javascript是客户端脚本,你能做的操作就是把这个值用 <%=%>输出到页面的javascript中参与运算, ...
- python mysql创建表
表设计 表:student 字段名 类型 是否为空 主键 描述 StdID int 否 是 学生ID StdName varchar(100) 否 学生姓名 Gender enum('M','F') ...
- 【bugfree】安装
我用的是WIN8系统 首先要安装XAMPP,开始里面的Apache和MySQL服务. 在运行Apache服务时报错: ----------------------------------------- ...
- Appium+python自动化5-Appium Inspector【转载】
前言 appium Inspector从入门到放弃!反正你都打开了,那就看下为什么要放弃吧! Appium Inspector是appium自带的一个元素定位工具,上一篇介绍了如何使用uiaut ...
- Java笔记：JDK安装小问题
昨天在实验室的Windows机器上安JDK,环境变量什么的都配好了,Java -version也没有问题,但是一运行Javac编译就会出现java/lang/NoClassDefFoundError: ...
- [COCI2015]ZGODAN
题目大意: 给你一个数$n(n\leq10^1000)$,定义一个数是“美丽数”当且仅当这个数各个数位上的数奇偶性不同. 求最接近$n$的“美丽数”,若有多个,则依次输出. 思路: 贪心+高精度. 首 ...
- CentOS 6与CentOS 7的区别收集
说明: 1.CentOS与Ubuntu没有什么可比性,底层都是Linux,并且Ubuntu在YY广泛的使用,这些并不能说明那个强大哪个不行,只要能解决问题的都是好家伙. 2.市面上教程基本都是基于6, ...
- 设计模式之组合模式（PHP实现）
github地址:https://github.com/ZQCard/design_pattern /** 组合模式(Composite Pattern),又叫部分整体模式,是用于把一组相似的对象当作 ...