面试|前端设计模式

111 阅读3分钟

阿里一面问我是否了解前端设计模式,比方说发布订阅,观察者模式之类的,由于之前没接触过这类问题,没有答上来,在此进行一个总结。

观察者模式

定义:当对象间存在一对多关系时,则使用观察者模式。比如,当一个对象被修改时,则会自动通知依赖它的对象。

意图: 定义对象间的一种一对多的依赖关系,当一个对象的状态发生改变时,所有依赖于它的对象都得到通知并被自动更新。

动机:将一个系统分割成一系列相互协作的类有一个副作用:需要维护相关对象间的一致性。不希望为了维持一致性而使各类紧密耦合,这样会降低可重用性。

主要解决: 一个对象状态改变给其他对象通知的问题,而且要考虑到易用和低耦合,保证高度的协作。

发布订阅模式

在软件架构中,发布订阅是一种消息范式,消息的发送者(称为发布者)不会将消息直接发送给特定的接收者(称为订阅者)。而是将发布的消息分为不同的类别,无需了解哪些订阅者(如果有的话)可能存在。同样的,订阅者可以表达对一个或多个类别的兴趣,只接收感兴趣的消息,无需了解哪些发布者(如果有的话)存在。

这里很明显了,区别就在于,不同于观察者和被观察者,发布者和订阅者是互相不知道对方的存在的,发布者只需要把消息发送到订阅器里面,订阅者只管接受自己需要订阅的内容

可以发现两种模式下的角色数量不一样:

  • 观察者模式里,只有两个角色:观察者 和 被观察者
  • 发布订阅模式里,却不仅仅只有发布者和订阅者两个角色,还有一个调度中心

从使用场景上:

  • 观察者模式比较适合在单个应用内部使用
  • 发布订阅模式则是比较适合跨应用的场景

MVVM,MVC,MVP

MVC

MVC通过分离Model、View和Controller的方式来组织代码结构。其中View负责页面的逻辑显示,Model负责存储页面的业务数据,以及相对应数据的操作。并且View和Model应用了观察者模式,当,Model层发生改变的时候它会通知有关的View层更新页面。当用户和页面产生交互的时候,Controller层中的事件触发器就开始工作了,通过调用Model,来完成对Model的修改,然后Model层再去通知View层更新

MVP

MVP模式与MVC唯一不同的在于Presenter和Controller。

在 MVC 模式中我们使用观察者模式,来实现当 Model 层数据发生变化的时候,通知 View 层的更新。这样 View 层和 Model 层耦合在一起,当项目逻辑变得复杂的时候,可能会造成代码的混乱,并且可能会对代码的复用性造成一些问题。

MVP 的模式通过使用 Presenter 来实现对 View 层和 Model 层的解耦。MVC 中的 Controller 只知道 Model 的接口,因此它没有办法控制 View 层的更新,MVP 模式中,View 层的接口暴露给了 Presenter 因此我们可以在 Presenter 中将 Model 的变化和 View 的变化绑定在一起,以此来实现 View 和 Model 的同步更新。这样就实现了对 View 和 Model 的解耦,Presenter 还包含了其他的响应逻辑。

MVVM

MVVM模式中的VM,指的是ViewModel,它和MVP的思想其实是相同的,不过它通过双向的数据绑定,将View和Model的同步更新给自动化了。当Model发生变化的时候,ViewModel的同步更新给自动化了。当Model发生变化时,ViewModel就会自动更新;ViewModel 变化了,View 也会更新。