javascript 设计模式 -- 发布/订阅模式

Posted 每天都要进步一点点

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了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 设计模式 -- 发布/订阅模式的主要内容,如果未能解决你的问题,请参考以下文章

EventBus发布-订阅模式 ( 使用代码实现发布-订阅模式 )

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

设计模式Javascript设计模式——订阅发布模式

javascript设计模式---发布订阅模式

JavaScript设计模式之----原生JS实现简单的发布订阅模式

观察者模式——JavaScript