发布订阅的精髓

很多小伙伴都知道这么一个模式，最常见的解释就是这样一个例子。一个小区里的人订阅报纸，订阅者是小区里的大爷大妈（年轻人谁看报纸啊），发布者是中国邮政的大爷。大爷大妈从中国邮政那里报名订阅报纸，每天送报的就顺着小区的单元一栋一栋的去送报纸。

函数举例

// 首先，发布订阅者模式，前提是你要有一个产品拿得出来，这样才能被人家订阅，生产商也才能发布
//第一步就是创造一个产品，也就是一个基础的数据
let products  ={
  key1:"号外号外，万和小区五万元一套啦",
  key2:'广告位置'
}

// 其实，这个产品就是相当于我们项目中那些定义的初始化数据。
// 好的，产品这个时候就已经做出来了。
// 第二部就是那些大爷大妈出场啦，每个用户都是一个订阅者
function  men(key,val){
  console.log(‘大爷有新消息啦’，key,val)
}
function women(key,val){
  console.log(‘大妈有新消息啦’，key,val)
}

//当然现实中大爷大妈就不是一个两个的，肯定是几十上百的。
//所以为了方便管理也为了在送报的时候不丢失某一个人，我们就将这些人放进一个数组中，当新报纸出来的时候，顺着大爷大妈的名字去一个个的发报纸

let nameList = [];
nameList.push(men);
nameList.push(women)

//这个是时候，产品和订阅者已经有了，那么就剩下订阅了，其实就是产生一种联系，也就是产品和用户之间绑定上关系
//第三部，通过Obeject.defineproperty使得数据变成珂响应式的，每当我们的产品发生变化时，用户都能被通知到
function update(nameList,products){
  // 通过object.keys对产品中的所有板块进行遍历
   Object.keys(products).forEach(key=>{
     Object.defineProperty(products, key,{
       get(val){
         return val
       },
       set(val){
         // 通过set函数对每个订阅者进行下发通知
         nameList.forEach((item,index)=>{
           nameList[index](key,val);
           // console.log('当初始化的对象发生改变时，这样每个订阅者都能通过遍历对其发起通知');
         })
       }
     })
   })
}

最后一步启动：

update(nameList,products)

我们来测试下：

products.key1='好消息好消息，万和小区的房子一元一套啦';
products.key1= '好消息好消息，股市逐渐回暖了'
products.key2='清扬，新清扬，心飞扬';

打印效果如下：

截屏2024-03-02 16.14.58.png

这样一个简单的发布订阅者模式就形成了。

逐字逐句写一个简单的发布订阅者模式函数

发布订阅的精髓

函数举例