【青训营】关于JS设计模式（一）

theme: channing-cyan

什么是设计模式

我们在开发中，遇到某些特定场景，在这里针对特定问题的简洁而优雅的解决方案就是设计模式，一个好的设计模式可以复用在这一类场景中，这些东西对我们前端开发尤为重要。

设计模式的五大原则

• 单一职责原则 简称SRP ：职责单一
• 开放封闭原则 简称OCP ：可以扩展，但不修改
• 里氏置换原则 简称LSP ：不破坏继承体系
• 接口独立原则 简称ISP ：设计接口要单一精简
• 依赖倒置原则 简称DIP ：要面向接口编程，不面向实现编程，高层找底层

设计模式要注意的四个特性

• 易读性
• 可拓展性
• 复用性
• 可靠性 语义化很清晰，这里不过多解释，这里想说一下易读性，我们在看很多底层源码的时候，其实它们有些是不太注重易读性的，有时候是为了快而牺牲掉一些可读性。单例模式 实现单例模式的思路是：一个类能返回对象一个引用(永远是同一个)和一个获得该实例的方法（必须是静态方法，通常使用getInstance这个名称）；当我们调用这个方法时，如果类持有的引用不为空就返回这个引用，如果类保持的引用为空就创建该类的实例并将实例的引用赋予该类保持的引用；同时我们还将该类的[构造函数]定义为私有方法，这样其他处的代码就无法通过调用该类的构造函数来实例化该类的对象，只有通过该类提供的静态方法来得到该类的唯一实例。

简单来说就是比如有一个弹窗，我们有好几次需要用到它，但是它里面所有内容是不变的。我们就没有必要让每次调用它的时候都创建实例。

我们可以在第一次用它的时候先缓存起来，第二次用的时候就不用重新创建了，直接用第一次调用的就可以。

单例模式 https://segmentfault.com/a/1190000012842251

策略模式

使用场景：比如表单验证，我们需要很多判断，如果用if else来写的话会非常不易读，如果新增还能要动之前写的代码，术语就是高耦合，我们可以利用策略模式进行解耦，把输入的内容和需要的算法分隔，并且不去修改之前的代码。

image.png

策略模式 https://refactoringguru.cn/design-patterns/strategy

代理模式

代理模式就是为一个对象提供一个代替品或者占位符，替身对象可以预先处理，等本体加载好之后再让本体渲染。

比如我们页面跳转时，可能渲染的比较慢，我们可以在渲染时用load加载来做占位，让用户不焦虑。等加载好了之后，load消失，页面显示。这里也要注意职责单一。

image.png