JavaScript设计模式系列05_观察者模式（发布订阅）写的数据联动（类似于vue的数据绑定）

最新推荐文章于 2023-12-28 10:40:26 发布

田江

最新推荐文章于 2023-12-28 10:40:26 发布

阅读量686

点赞数 1

分类专栏： JavaScript从入门到精通设计模式文章标签： javascript web前端开发设计模式面向对象

本文链接：https://blog.csdn.net/jiang7701037/article/details/79027566

版权

JavaScript从入门到精通同时被 2 个专栏收录

147 篇文章 80 订阅

订阅专栏

设计模式

7 篇文章 0 订阅

订阅专栏

效果图：

代码：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
        *{ padding:0; margin:0}


    </style>
</head>
<body>
    <input type="text" id="txtId" ><br/>
    原始数字：<div id="d1"></div><br/>
    平方：<div id="d2"></div><br/>
    立方：<div id="d3"></div><br/>
    三个数之和：<div id="d4"></div><br/>
</body>
</html>

<script type="text/javascript" src="js/observer.js"></script>
<script type="text/javascript">

function  $(id) {
    return document.getElementById(id);
}
function  $create(tagName) {
    return document.createElement(tagName);
}

//创建一个发布订阅功能的对象
var txtObj={

}

observer.make(txtObj);

//第一个订阅对象d1
var d1 = {
    show:function(num){
        $("d1").innerHTML = num;
    }
}

var d2 = {
    show:function(num){
        $("d2").innerHTML = num*num;
    }
}


var d3 = {
    show:function(num){
        $("d3").innerHTML = num*num*num;
    }
}


var d4 = {
    show:function(num){
        $("d4").innerHTML = num+num*num+num*num*num;
    }
}

txtObj.addSubscriber(d1.show);
txtObj.addSubscriber(d2.show);
txtObj.addSubscriber(d3.show);
txtObj.addSubscriber(d4.show);

window.onload = function () {
    $("txtId").οnkeyup=function () {
        txtObj.publish(Number($("txtId").value));
    };
}

</script>

observer.js文件的内容

//1、定义观察者模式的对象（模板）
var observer = {
	//订阅
	addSubscriber:function(callback){
		this.subscribers.push(callback);
	},
	
	//退订
	removeSubscriber:function(callback){
		let index = this.subscribers.indexOf(callback);
		this.subscribers.splice(index,1);
	},
	
	//发布
	publish:function(what){
		for(let i in this.subscribers){
			if(typeof this.subscribers[i]==="function"){
				this.subscribers[i](what);
			}
		}
	},
	
	//让指定对象具备观察者的所有功能
	make:function(obj){
		for(let key in this){
			obj[key] = this[key];
		}
		obj.subscribers = [];
	}
}