前端设计模式 | 青训营

97 阅读5分钟

感想

在我看来,设计模式就是一种设计的框架模板,我们在此基础上,会更有逻辑更可实现性完成前端的设计与开发。想到设计模式,想到我之前学过的一种比较浅显的MVC模式,也是前后端常用的一种模式,Model-View-Controller(模型-视图-控制器)可以说是万金油架构了。说起来设计模式好像有很多种,挑起来眼花缭乱,但我觉得有点像写作文(比较擅长文科的东西哈哈哈),就是一种总分总什么的,一些套模板什么的,但要想真的写得好,肯定是自然而然学透彻了之后去运用的,不是生搬硬套要用这个模式。

1.什么是设计模式

通俗来讲,就是日常使用设计的一种惯性思维。

因为对应的这种思维,以及对具体的业务或者代码场景,

有着具体的优势,而后成为行业中的一种“设计模式”。

2.为什么使用设计模式

设计模式是各种业务场景的最佳实践,有助于我们在写日常业务中时,提高自身的思路。例如单例模式,就可以用于登陆框,模态框等场景。每种设计模式,必然有其适合应用的场景,灵活运用设计模式,可以提高代码的可维护性,还可提升自身思维能力。

3.设计模式的基本准则

优化代码第一步:单一职责原则

让程序更稳定更灵活:开闭原则

构建扩展性更好的系统:里式替换原则

让项目拥有变化的能力:依赖倒置原则

系统有更高的灵活性:接口隔离原则

更好地扩展性:迪米特原则

4.设计模式分类

23种设计模式:

  1. 创建型模式:如何创建一个对象,包括实例化对象的方式,隐藏具体实例化的细节,以及对象的复制等。例如:单例模式、工厂模式、抽象工厂模式、建造者模式和原型模式等。
  2. 结构型模式:如何灵活的将对象组装成较大的结构,通过类和对象之间的关联性来建立更大的结构。例如:适配器模式、装饰者模式、代理模式、桥接模式、组合模式、外观模式和享元模式等。
  3. 行为型模式:负责对象间的高效通信和职责划分,涉及到类和对象的职责分配和协调。例如:观察者模式、策略模式、命令模式、迭代器模式、模板方法模式、状态模式、职责链模式和访问者模式等。

5.浏览器中的设计模式

单例模式

定义:全局唯一访问对象。

应用场景:缓存、全局状态管理等等。

发布订阅模式

定义:一种订阅机制,可在被订阅对象发生变化时通知订阅者(就像订阅报纸一样)

应用场景:从系统架构之间的解耦,到业务中一些实现模式,像邮件订阅,上线订阅等等,应用广泛。

6.JavaScript中的设计模式:

原型模式:复制已有对象创建新对象,类似JavaScript中的原型链,区别于面向对象语言中的创建对象方式

代理模式:可自定义控制对原对象的访问方式和写入方式,并且允许在更新前后做额外处理,可以在监控记录、代理工具、前端框架实现等场景使用

迭代器模式:在不暴露数据类的情况下访问集合中的数据,提供访问多种数据类型的通用操作接口

前端框架中的设计模式

代理模式和组合模式

image.png

7.总结

总结出抽象的模式相对较为简单,但是想要将抽象的模式运用到场景中却非常困难。

现代编程语言的多编程范式带来更多可能性

真正优秀的开源项目学习设计模式并不断实践

前端设计模式是一种在前端开发中用于解决常见问题的可复用的解决方案。它们是从软件工程领域借鉴过来的,通过提供一套经过验证的模式来解决特定的问题,提高代码的可维护性、可扩展性和可重用性。

对于前端设计模式,我的理解:

  1. 提高代码质量:设计模式可以帮助我们编写更结构化、可读性更好的代码,使代码更易于理解和维护。
  2. 促进团队协作:设计模式提供了一种共同的语言和思维模式,可以促进团队成员之间的沟通和协作。
  3. 加速开发速度:设计模式提供了经过验证的解决方案,可以减少重复的工作和时间,加快开发速度。
  4. 提升代码的可维护性和可扩展性:设计模式通过将代码分离成独立的模块,降低了代码的耦合性,使得代码更易于维护和扩展。

一些常见的前端设计模式包括:

  1. 观察者模式:用于处理事件和消息的订阅与发布机制,常见于事件处理、组件通信等场景。
  2. 单例模式:用于保证一个类只有一个实例,常见于全局状态管理、资源共享等场景。
  3. 工厂模式:用于创建对象的统一接口,常见于组件的创建、数据模型的生成等场景。
  4. 适配器模式:用于将不同接口的对象进行适配,以便能够共同工作,常见于兼容不同浏览器、适配不同数据源等场景。
  5. 策略模式:用于封装可互换的算法,常见于表单验证、数据处理等场景。

这只是一小部分例子,实际上还有很多其他的设计模式可以应用于前端开发中。选择合适的设计模式取决于具体的问题和需求,需要根据实际情况进行选择和应用。