设计模式(ongoing)

设计模式(ongoing)

设计模式是在软件开发过程中对于问题的解决方案,也是软件开发的最佳实践。

比如如果某个接口的结构已经无法满足现在的需求,但是由于众多功能对于这个接口的依赖导致我们又不能改动这个接口,这个时候就可以使用适配器模式来解决这个问题。

适配器模式详细内容:https://www.runoob.com/design-pattern/adapter-pattern.html

常见的设计模式

  • 单例模式:保证一个类只有一个实例,只提供一个全局访问点。先判断实例是否已经存在,如果存在就直接返回该实例,不存在就先创建实例。
  • 工厂模式:工厂负责实现实例的内部逻辑。抽象产品是所有产品对象的父类,负责描述产品实例的所有公共接口。产品实例是抽象产品的实例。
  • 策略模式:定义一系列单独封装的算法,且他们可以相互替换。其中分为策略类(可变,封装具体的算法,负责具体计算)和环境类(不变,接受客户请求,将请求分配给一个策略类)。
  • 代理模式:给对象提供一个代理品或者占位符方便对它的访问。
  • 中介者模式:通过中间对象实现各个相关部分的通信。
  • 装饰者模式:不改变对象自身的基础上,运行期间动态的给对象添加方法。

单例模式

单例模式会在全局作用域下只创建一个实例对象,所有代码都只调用这一个实例。

js实现单例模式:

单例模式
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
// 单例构造函数
function CreateSingleton(name) {
this.name = name;
this.getName();
}

// 添加getName方法
CreateSingleton.prototype.getName = function() {
console.log(this.name);
}

// 创建单例对象主函数
const Singleton = (function() {
let ins;

return function(name) {
// 还未创建,创建一个实例
if (!ins) {
ins = new CreateSingleton(name);
}
// 已创建,直接返回实例
return ins;
}
})();

// new一个测试实例
let insA = new Singleton('mason');
console.log(insA);
// CreateSingleton { name: 'mason' }

// 再new一个实例,看看是否使用的是上面new的实例
let insB = new Singleton('alex');
console.log(insB);
// CreateSingleton { name: 'mason' }

console.log(insA === insB);
// true

前端使用到单例模式的场景:

  • 页面上同时一般只能最多有一个modal。

参考

  1. https://www.runoob.com/design-pattern/design-pattern-tutorial.html
  2. https://vue3js.cn/interview/design/design.html

评论