web前端：js 设计模式：观察者和发布订阅模式

作者:郭佬 更新于： 2020-03-25 21:52:52

　　为了取得技术优势，微软推出了VBScript来迎战Javascript的脚本语言。为了互用性，Ecma国际（前身为欧洲计算机制造商协会）创建了ECMA-262标准（ECMAScript）。现在两者都属于ECMAScript的实现。尽管JavaScript作为给非程序人员的脚本语言，而非是作为给程序人员的编程语言来推广和宣传，但是JavaScript具有非常丰富的特性。

　　总是把这两个当作同一个模式，但其实是不太一样的，现在重温一下。

　　观察者模式

　　观察者直接订阅目标，当目标触发事件时，通知观察者进行更新

　　简单实现

　　classObserver{

　　constructor(name){

　　this.name=name;

　　}

　　update(){

　　console.log(`${this.name}update`)

　　}

　　}

　　classsubject{

　　constructor(){

　　this.subs=[];

　　}

　　add(observer){

　　this.subs.push(observer);

　　}

　　notify(){

　　this.subs.forEach(item=>{

　　item.update();

　　});

　　}

　　}

　　constsub=newsubject();

　　constob1=newObserver('ob1');

　　constob2=newObserver('ob2');

　　//观察者订阅目标

　　sub.add(ob1);

　　sub.add(ob2);

　　//目标触发事件

　　sub.notify();

　　发布订阅模式

　　发布订阅模式通过一个调度中心进行处理，使得订阅者和发布者分离开来，互不干扰。

　　简单实现

　　classEvent{

　　constructor(){

　　this.lists=newMap();

　　}

　　on(type,fn){

　　if(!this.lists.get(type)){

　　this.lists.set(type,[]);

　　}

　　this.lists.get(type).push(fn);

　　}

　　emit(type,...args){

　　constarr=this.lists.get(type);

　　arr&&arr.forEach(fn=>{

　　fn.apply(null,args);

　　});

　　}

　　}

　　constev=newEvent();

　　//订阅

　　ev.on('msg',(msg)=>console.log(msg));

　　//发布

　　ev.emit('msg','发布');

　　不同点

　　其实这两个模式可以说是同一种设计模式的不同实现。

　　观察者模式是观察者和目标直接进行交互，有耦合性，而发布订阅模式则是通过一个调度中心进行处理，订阅者和发布者互不干扰，进行了解耦。

　　JavaScript是Sun公司的注册商标。Ecma国际以JavaScript为基础制定了ECMAScript标准。JavaScript也可以用于其他场合，如服务器端编程。完整的JavaScript实现包含三个部分：ECMAScript，文档对象模型，字节顺序记号。