引言
在学完前端基础的 HTML CSS JavaScript 以及框架 Vue React 之后，想更进一步时，学习了设计模式，以求得在工作中能能更好的方式实现需求，以及在后续学习开源库的源码时能够通过设计模式的思虑，了解开源工具的实现思路。
本文主要介绍前端常用的7中设计模式，包含设计原则，内容较浅，主要是用来熟悉设计模式的概念，以及帮助你了解过往开发中有遇到哪些设计模式。
设计原则
设计原则：
- S（Single Responsibility Principle） 单一职责原则
- 0（Open Closed Principle）开放封闭原则
- L（Liskov Substitution Principle）里氏置换原则
- I（Interface Segregation Principle）接口独立原则
- D（Dependence Inversion Principle）依赖导致原则
- l（Law of Demeter） 迪米特法则
单一职责原则：一个程序只做好一件事
开放封闭原则：对修改封闭，对拓展开放。
里氏置换原则：子类能覆盖父类，父类能出现的地方子类就能出现
接口独立原则：保持接口的单一独立
依赖倒置原则：面向接口编程，依赖于抽象而不依赖于具体
迪米特法则： 一个对象应该对其他对象有最少的了解
前端常用的是前两条原则：单一职责原则和开放封闭原则，
23 种设计模式
-
MVC（模型-视图-控制器）模式：
- 优点：将应用程序分为模型、视图和控制器，实现了逻辑、界面和用户输入的分离，提高了代码的可维护性和可测试性。
- 缺点：在大型应用中，模式可能会变得复杂，导致代码难以维护。
- 使用案例：AngularJS 1.x采用了MVC模式，将应用划分模型、视图和控制器，使开发人员能够更好地管理应用状态和用户界面。
-
MVVM（模型-视图-视图模型）模式：
-
优点：将视图和模型解耦，通过多个数据绑定自动更新视图，减少了样板代码，提高了开发效率。
-
缺点：对于复杂的应用，团体数据绑定可能会导致性能问题和调试困难。
-
使用案例：Vue.js使用MVVM模式，通过数据驱动视图的方式实现了快速响应的用户界面。
-
学习总结
不同的设计模式适用于不同的场景，开发人员应根据项目的需求和复杂程度选择适合的模式。同时，过度使用设计模式也可能导致代码变得过于复杂，增加了理解和维护的重要性，因此在实际应用中进行权衡和取舍。
