直接上代码：

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 设计模式 -- 发布/订阅模式的更多相关文章

  1. javascript设计模式——发布订阅模式

    前面的话 发布—订阅模式又叫观察者模式,它定义对象间的一对多的依赖关系,当一个对象的状态发生改变时,所有依赖于它的对象都将得到通知.在javascript开发中,一般用事件模型来替代传统的发布—订阅模 ...

  2. 设计模式-发布订阅模式(javaScript)

    1. 前言 2. 什么是发布订阅模式 3. 发布订阅优缺点 4. 举例 4. 总结 1. 前言 发布订阅者模式是为了发布者和订阅者之间避免产生依赖关系,发布订阅者之间的订阅关系由一个中介列表来维护.发 ...

  3. js设计模式--发布订阅模式

    前言 本系列文章主要根据<JavaScript设计模式与开发实践>整理而来,其中会加入了一些自己的思考.希望对大家有所帮助. 概念 发布-订阅模式又叫观察者模式,它定义对象间的一种一对多的 ...

  4. [转]js设计模式—发布订阅模式

    发布—订阅模式又叫观察者模式,它定义对象间的一对多的依赖关系,当一个对象的状态发生改变时,所有依赖于它的对象都将得到通知.在javascript开发中,一般用事件模型来替代传统的发布—订阅模式.本文将 ...

  5. [转] 浅析JavaScript设计模式——发布-订阅/观察者模式

    前一段时间一直在写CSS3的文章 一直都没写设计模式 今天来写写大名鼎鼎观察者模式 先画张图 观察者模式的理解 我觉得还是发布-订阅模式的叫法更容易我们理解 (不过也有的书上认为它们是两种模式……)  ...

  6. js设计模式-发布/订阅模式

    一.前言 发布订阅模式,基于一个主题/事件通道,希望接收通知的对象(称为subscriber)通过自定义事件订阅主题,被激活事件的对象(称为publisher)通过发布主题事件的方式被通知. 就和用户 ...

  7. Javascript设计模式之发布-订阅模式

    简介 发布-订阅模式又叫做观察者模式,他定义了一种一对多的依赖关系,即当一个对象的状态发生改变的时候,所有依赖他的对象都会得到通知. 回忆曾经 作为一名前端开发人员,给DOM节点绑定事件可是再频繁不过 ...

  8. 理解JavaScript设计模式与开发应用中发布-订阅模式的最终版代码

    最近拜读了曾探所著的<JavaScript设计模式与开发应用>一书,在读到发布-订阅模式一章时,作者不仅给出了基本模式的通用版本的发布-订阅模式的代码,最后还做出了扩展,给该模式增加了离线 ...

  9. [转] JavaScript设计模式之发布-订阅模式（观察者模式）-Part1

    <JavaScript设计模式与开发实践>读书笔记. 发布-订阅模式又叫观察者模式,它定义了对象之间的一种一对多的依赖关系.当一个对象的状态发生改变时,所有依赖它的对象都将得到通知. 例如 ...

随机推荐

  1. 我们曾经心碎的C#之 第一章.我的第一个C#程序

    第一章．      C#入门 1.1        .NET与C#            001．.NET是Microsoft.NET的简称,是基于Windows平台的一种技术            ...

  2. [Oracle] DataGuard switchover

    Oracle DataGuard switchover 2013/07/11 Tag.Data Guard,primary,standby,switchover 切换前primary site和sta ...

  3. 【原创】SSAS-引用维度与多数据源、多数据源视图引发分区错误

    背景: 最近有个项目,有32家分公司,集团总部需要取这个32家分公司数据做分析,由于每个分公司的数据都比较庞大,所以最终方案是每个分公司一个DW,在cube搭建过程中将每个公司数据作为一个分区数据的来 ...

  4. Logstash 最佳实践

    https://doc.yonyoucloud.com/doc/logstash-best-practice-cn/index.html

  5. AC日记——Sliding Window poj 2823

    2823 思路: 单调队列: 以前遇到都是用线段树水过: 现在为了优化dp不得不学习单调队列了: 代码: #include <cstdio> #include <cstring> ...

  6. ActiveMQ StartUp

    从http://activemq.apache.org/activemq-5132-release.html 下载 解压 从apache-activemq-5.13.2\bin\win64\wrapp ...

  7. HDU 4034 Graph Floyd最短路

    原题链接:http://acm.hdu.edu.cn/showproblem.php?pid=4034 题意: 给你一个最短路的表,让你还原整个图,并使得边最少 题解: 这样想..这个表示通过floy ...

  8. Unique Word Abbreviation -- LeetCode

    An abbreviation of a word follows the form <first letter><number><last letter>. Be ...

  9. [COCI2015]FUNGHI

    题目大意: 一个环上有8个数,从中选取连续的4个数使得和最大,求最大的和. 思路: 模拟. #include<cstdio> #include<cctype> #include ...

  10. lor实践

    1.启动一个nginx监听8888端口, -p 指定工作目录 -c 指定加载配置文件 在nginx.conf中,写一个server,进入lor项目的入口文件main.lua 2.main.lua执行r ...