前端框架设计模式 | 青训营

38 阅读2分钟

设计模式是什么?

在软件工程中,设计模式(Design Pattern)是对软件设计中普遍存在(反复出现)的各种问题,所提出的解决方案。这个术语是由埃里希·伽玛(Erich Gamma)等人在 1990 年代从建筑设计领域引入到计算机科学的。设计模式并不是直接用来完成代码的编写,而是描述在各种不同情况下,要怎么解决问题的一种方案。

从概念来看的话,这听起来像是一套理论。理解也会比较晦涩。

如果我们将理论和实际代码结合:

设计模式 :是一套总结和方法,目的是为了提高性、可读性、可靠性、可维护性。

前端设计模式有哪些?

1. MVC(Model-View-Controller)模式:

MVC 即 Model-View-Controller 的缩写,就是 模型—视图—控制器,也就是说一个标准的Web 应用程式是由这三部分组成的:

  • Model:模型层,是应用程序中用于处理应用程序数据逻辑的部分。通常模型对象负责在数据库中存取数据。

  • View:视图层,用户界面渲染逻辑,通常视图是依据模型数据创建的。

  • Controller:控制器,数据模型和视图之间通信的桥梁,通常控制器负责从事图读取数据,控制用户输入,并向模型发送数据。

优点

  • 视图层和业务层分离
  • 重用度高
  • 可维护性高
  • 部署快

2. MVVM(Model-View-ViewModel)模式:

MVVMModel-View-ViewModel的简写,即模型-视图-视图模型。

  • Modal:模型,指的是后端传递的数据。
  • View:视图,指的是所看到的页面。
  • ViewModal:视图模型,mvvm模式的核心,它是连接view和model的桥梁。主要用来处理业务逻辑

优点

  • 可复用性
  • 低耦合
  • 双向数据绑定

总结

  • MVC模式早期主要应用在后端,在前端领域的早期也有应用。他的优点是分层清晰,缺点是数据流混乱,灵活性带来的不好维护问题
  • MVVM模式在前端领域又广泛的应用,它不仅解决了Model、View的耦合问题,还同时解决了维护两者映射关系的大量繁杂代码和DOM操作代码,在提高开发效率、可读性的同时还保持了优越的性能表现