需求
image-20191013144734987
如图所示，该页面中标题处的Daisy和姓名中的Daisy都取自name字段，当输入框的值改变时，会同时出发上面两处名称的修改；
发布订阅模式
用发布订阅模式来考虑这个问题思路如下：
订阅内容：name字段
订阅者：标题改变事件、姓名改变事件
发布：当name改变时，对订阅name字段的所有事件循环通知
代码的实现
首先定义一个监听对象，包含添加订阅者方法（添加订阅者和订阅事件）和通知订阅者方法
// let observe = {
map:{},
subscribe:function(key,cb){
let map = this.map;
if( !map[key] ){
map[key] = [];
}
map[key].push(cb);
},
publish:function(key,changevalue){
let mapValues = this.map[key];
for( var i=0;i<mapValues.length;i++ ){
mapValuesi
}
}
}
//首次加载默认出发监听模式，将name添加到订阅者中，并将对应的订阅事件添加到name对应的数据中
window.onload = function(){
let name = 'Daisy';
observe.subscribe('name',function(name){
document.querySelector('.name').innerHTML = name;
})
observe.subscribe('name',function(name){
document.querySelector('.title').innerHTML = name+'的简介';
})
observe.publish('name',name)
}
//当input的onchange事件触发name值改变，触发订阅了name字段的所有事件做出改变
document.querySelector('.username').onchange = function(){
name = this.value;
observe.publish('name',this.value)
}
html部分代码：
<h1 class="title"></h1>
姓名：<span class="name"></span>
年龄：<span class="">18岁</span>
<input type='text' class='username'>
运行效果
image-20191013150829829
网友评论