一、观察者模式
- 概念：又称“ 发布-订阅（Publish/Subscribe）”,发布者有了新的内容，需要向订阅者推送数据，若订阅者退订了则要对发布者中的订阅者列表进行更新。
- 功能：当一个对象发送改变时，多个对该对象依赖的其他对象也会相对应做出改变。可以根据需要增加或删除对象，解决一对多对象间的耦合关系。
- 具体代码：
//创建发布者，对发布者新增操作 获取/更新
function Publisher(obj){
this.observers = [];
let state = obj.value;
this.getState = function () {
return state;
}
this.setState = function(value){
state = value;
this.notice()
}
thi s.obj = obj;
}
//新增发布者方法：添加观察者、删除观察者、通知观察者
Publisher.prototype.addOb = function (observer) {
var flag = false;
for (i = observer.length-1;i>=0;i++){
if(this.observers[i] = observer){
flag = true;
}
}
if(!flag){
this.observers.push(observer);
}
}
Publisher.prototype.notice=function(){
var observers = this.observers;
for (var i = 0; i < observers.length; i++) {
observers[i].update(this.getState());
}
}
//创建一个订阅对象，内含修改方法
function Subscribe(obj){
this.obj = obj;
this.update = function(data){
window.console.log(data)
this.obj.value = data;
}
}
//实例化发布者与订阅者
let oba = new Publisher(document.getElementById('input'));
let obd = new Subscribe(document.getElementById('div'));
//添加订阅者
oba.addOb(obd);
//订阅者监听
obd.update = function (state) {
this.obj.innerText = state;
}
//监听键盘输入事件
oba.obj.addEventListener('keyup',function () {
oba.setState(this.value);
})
4.练习总结
- input作为发布者，实例化Publisher，div作为订阅者，实例化Subscribe
- 发布者需要的方法有:数据获取、数据设置、添加观察者、删除观察者、通知观察者监听
- 观察者需要的方法：获取数据更新 5.练习代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<input type="text" id="input">
<div id="div"></div>
</body>
</html>
<script>
//创建发布者，对发布者新增操作 获取/更新
function Publisher(obj){
this.observers = [];
let state = obj.value;
this.getState = function () {
return state;
}
this.setState = function(value){
state = value;
this.notice()
}
this.obj = obj;
}
//新增发布者方法：添加观察者、删除观察者、通知观察者
Publisher.prototype.addOb = function (observer) {
var flag = false;
for (i = observer.length-1;i>=0;i++){
if(this.observers[i] = observer){
flag = true;
}
}
if(!flag){
this.observers.push(observer);
}
}
Publisher.prototype.notice=function(){
var observers = this.observers;
for (var i = 0; i < observers.length; i++) {
observers[i].update(this.getState());
}
}
//创建一个订阅对象，内含修改方法
function Subscribe(obj){
this.obj = obj;
this.update = function(data){
window.console.log(data)
this.obj.value = data;
}
}
//实例化发布者与订阅者
let oba = new Publisher(document.getElementById('input'));
let obd = new Subscribe(document.getElementById('div'));
//添加订阅者
oba.addOb(obd);
//订阅者监听
obd.update = function (state) {
this.obj.innerText = state;
}
//监听键盘输入事件
oba.obj.addEventListener('keyup',function () {
oba.setState(this.value);
})
</script>
