需求

image-20191013144734987

如圖所示琢岩，該頁面中標題處的Daisy和姓名中的Daisy都取自name字段，當(dāng)輸入框的值改變時，會同時出發(fā)上面兩處名稱的修改值漫；

發(fā)布訂閱模式

用發(fā)布訂閱模式來考慮這個問題思路如下：

訂閱內(nèi)容：name字段

訂閱者：標題改變事件、姓名改變事件

發(fā)布：當(dāng)name改變時织盼，對訂閱name字段的所有事件循環(huán)通知

代碼的實現(xiàn)

首先定義一個監(jiān)聽對象杨何，包含添加訂閱者方法（添加訂閱者和訂閱事件）和通知訂閱者方法

// 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

? }

? }

? }

//首次加載默認出發(fā)監(jiān)聽模式，將name添加到訂閱者中沥邻，并將對應(yīng)的訂閱事件添加到name對應(yīng)的數(shù)據(jù)中

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)

}

//當(dāng)input的onchange事件觸發(fā)name值改變危虱，觸發(fā)訂閱了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