前端常见的几种设计模式
一、单例模式
核心思想:确保一个类只对应一个实例
特点:
- 只允许一个例存在,全局可访问,第一次创建后缓存下来
- 排除全局变量,防止全局变量被重写
- 全局可访问
应用:vue的安装插件,弹窗的实现(无论点击多少次,弹窗只被创建一次)
实现:
1、直接生成全局对象
const cat = {
name:"猫",
age:1
} //
Object.freeze(cat)
const声明的变量不可重新赋值,但对象中的属性可变,可以使用freeze使其不可被修改或新增属性
缺点:生成一个固定对象缺少灵活性
2、使用构造函数的静态属性
function A(name){
// 如果已存在对应的实例
if(typeof A._singleton === 'object'){
return A._singleton
}
//否则正常创建实例
this.name = name
// 缓存
A._singleton =this
return this
}
缺点:静态属性能被人为重写
3、借助闭包
当对象第一次被创建以后,重写构造函数,在重写后的构造函数里面访问私有变量
function A(name){
var instance = this
this.name = name
//重写构造函数
A = function (){
return instance
}
//重写构造函数之后,实际上原先的A指针对应的函数实际上还在内存中(因为instance变量还在被引用着),但是此时A指针已经指向了一个新的函数了
// 第一种写法,这里实际上实现了一次原型链继承,如果不想这样实现,也可以直接指向旧的原型
A.prototype = this
// 第二种写法,直接指向旧的原型
A.prototype = this.constructor.prototype
instance = new A()
// 调整构造函数指针,这里实际上实现了一次原型链继承,如果不想这样实现,也可以直接指向原来的原型
instance.constructor = A
return instance
}
4、代理模式实现单例
function singleton(name){
this.name = name
}
let proxySingleton = function(){
let instance = null
return function(name){
if(!instance){
instance = new singleton(name)
}
return instance
}
}()
let a1= new proxySingleton('a1')
let a2= new proxySingleton('a2')
console.log(123, a1===a2)
5、工厂单例
let logger = null
class Logger {
log (...args) {
console.log(...args);
}
}
function createLogger() {
if (!logger) {
logger = new Logger();
}
return logger;
}
let a = new createLogger().log('12')
let b = new createLogger().log('121')
console.log(new createLogger(), a===b)
二、工厂模式
核心思想:不暴露对象创建的内部逻辑,将其封装在一个函数中
-
简单工厂模式
又叫静态工厂模式,用一个工厂对象决定创建某一类对象的实例
只要输入正确的参数就能得到需要的对象,不需要了解其创建细节
缺点:由于函数包含所有对象的创建逻辑,修改逻辑比较麻烦(每增加新的构造函数还需要修改判断逻辑代码),适合用于创建对象数量少,创建逻辑不复杂的情况
-
工厂方法模式
将创建对象的工作放到子类中,核心类变成抽象类
父类负责定义公共接口,子类负责生成具体产品对象
-
抽象工厂模式
提供一个创建一系列相关或相互依赖对象的接口,而无须指定它们具体的类。
抽象工厂可以提供多个产品对象,而不是单一的产品对象。
三、观察者模式(或发布订阅模式)
定义了对象间的一种一对多的依赖关系,只要当一个对象的状态发生改变时,所有依赖于它的对象都得到通知并被自动更新,解决了主体对象与观察者之间功能的耦合,即一个对象状态改变给其他对象通知的问题。
应用:
- vue的双向绑定原理
- 子组件和父组件通信,emit是发布者,on监听并执行
- DOM事件绑定,addEventListener(‘click’,()=>{})监听click事件,当点击DOM就是向订阅者发布这个消息。点击DOM是发布,addEventListener是监听执行
发布订阅模式和观察者模式的思想差不多相同,但是也是有区别:
-
观察者模式中需要观察者对象自己定义事件发生时的相应方法
-
发布订阅模式者在发布对象和订阅对象之中加了一个中介对象。我们不需要在乎发布者对象和订阅者对象的内部是什么,具体响应时间细节全部由中介对象实现。
-
订阅的东西用Map或者Object类型来存储。
发布订阅模式,有个中介,也可以说是channel,但发现代码实现差不多,只不过发布订阅用来写包含有回调函数
三、代理模式
核心思想:当我们不希望对对象进行直接操作时,可以给对象找一个代替对象对原对象进行访问
原则:单一原则
- 保护代理:保护代理用于控制不同权限的对象对目标对象的访问
class Car {
drive() {
return "driving";
};
}
class CarProxy {
constructor(driver) {
this.driver = driver;
}
drive() {
// 保护代理,仅18岁才能开车
return (this.driver.age < 18) ? "too young to drive" : new Car().drive();
};
}
作者:alanyf
链接:https://juejin.cn/post/6903725783085219853
来源:掘金
-
虚拟代理
某一个花销很大的操作,可以通过虚拟代理的方式延迟到这种需要它的时候才去创建
虚拟代理可应用于:
图片懒加载
、惰性加载
、合并http请求
等图片懒加载
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>图片懒加载</title> <style> img { display: block; width: 400px; height: 300px; margin-bottom: 200px; } </style> </head> <body> <img data-src="./images/1.jpg" alt=""> <img data-src="./images/2.jpg" alt=""> <img data-src="./images/3.jpg" alt=""> <img data-src="./images/4.jpg" alt=""> </body> <script> var imgs = document.querySelectorAll('img'); //offsetTop是元素与offsetParent的距离,循环获取直到页面顶部 function getTop(e) { var T = e.offsetTop; while(e = e.offsetParent) { T += e.offsetTop; } return T; } function lazyLoad(imgs) { var H = document.documentElement.clientHeight;//获取可视区域高度 var S = document.documentElement.scrollTop || document.body.scrollTop; for (var i = 0; i < imgs.length; i++) { if (H + S > getTop(imgs[i])) { imgs[i].src = imgs[i].getAttribute('data-src'); } } } window.onload = window.onscroll = function () { //onscroll()在滚动条滚动的时候触发 lazyLoad(imgs); } </script> </html> 作者:alanyf 链接:https://juejin.cn/post/6903725783085219853 来源:掘金
-
缓存代理
缓存代理可应用于:
缓存ajax异步请求数据
、计算乘积
等
缓存ajax异步请求数据
const getData = (function() {
const cache = {};
return function(url) {
if (cache[url]) {
return Promise.resolve(cache[url]);
}
return $.ajax.get(url).then((res) => {
cache[url] = res;
return res;
}).catch(err => console.error(err))
}
})();
getData('/getData'); // 发起http请求
getData('/getData'); // 返回缓存数据
作者:alanyf
链接:https://juejin.cn/post/6903725783085219853
来源:掘金
四、装饰者模式
核心思想:在不改变对象自身的基础上,在程序运行时期给对象动态添加方法
适用场合:
- 如果你需要为类增添特性或职责,可是从类派生子类的解决方法并不太现实的情况下,就应该使用装饰者模式。
- 如果想为对象增添特性又不想改变使用该对象的代码的话,则可以采用装饰者模式。
- 原有方法维持不变,在原有方法上再挂载其他方法来满足现有需求;函数的解耦,将函数拆分成多个可复用的函数,再将拆分出来的函数挂载到某个函数上,实现相同的效果但增强了复用性。
- 对函数进行增强(节流函数or防抖函数、缓存函数返回值、构造React高阶组件,为组件增加额外的功能)
五、策略模式
核心思想::定义一系列的算法,把他们一个个封装起来,并且使他们可以相互替换
。
原则:开放-封闭原则
一个基于策略模式的程序至少由两部分组成:
- 第一个部分是一组策略类(可变),策略类封装了具体的算法,并负责具体的计算过程。
- 第二个部分是环境类Context(不变),Context接受客户的请求,随后将请求委托给某一个策略类。要做到这一点,说明Context中要维持对某个策略对象的引用。
/*策略类 A B C就是可以替换使用的算法*/
var levelOBJ = {
"A": function(money) {
return money * 4;
},
"B" : function(money) {
return money * 3;
},
"C" : function(money) {
return money * 2;
}
};
/*环境类,维持对levelOBJ策略对象的引用,拥有执行算法的能力*/
var calculateBouns =function(level,money) {
return levelOBJ[level](money);
};
console.log(calculateBouns('A',10000)); // 40000
应用:
- 表单验证
- 多种登录模式
- 不同的下拉框执行不同的函数
五、建造者模式
定义多个方法分别创建对象的各个部分,按照一定顺序按部就班地创建对象
应用场景:
- 创建时有很多必填参数需要验证。
- 创建时参数求值有先后顺序、相互依赖
- 创建有很多步骤,全部成功才能创建对象。
六、适配模式
作为两个不兼容的接口之间的桥梁,就是新增一个包装类,对新的接口进行包装以适应旧代码的调用,避免修改接口和调用代码。
场景:
1.以前开发的接口不满足需求,比如输出log存在本地盘改成存入云盘
2.使用第三方提供的组件,但组件接口定义和自己要求的接口定义不同
优点
- 将目标类和适配者类解耦,通过引入一个适配器类来重用现有的适配者类,而无须修改原有代码。
- 增加了类的透明性和复用性,将具体的实现封装在适配者类中,对于客户端类来说是透明的,而且提高了适配者的复用性。
- 灵活性和扩展性都非常好,通过使用配置文件,可以很方便地更换适配器,也可以
在不修改原有代码的基础上增加新的适配器类,符合开闭原则
。
缺点
- 过多地使用适配器,会让系统非常零乱,不易整体进行把握。
七、模板模式
在传统的面向对象语言中,一个运用了模板方法模式的程序中,子类的方法种类和执行顺序都是不变的,所以我们把 这部分逻辑抽象到父类的模板方法里面。而子类的方法具体怎么实现则是可变的,于是我们把这 部分变化的逻辑封装到子类中。通过增加新的子类,我们便能给系统增加新的功能,并不需要改 动抽象父类以及其他子类,这也是符合开放-封闭原则
的。
模板方法模式由两部分结构组成:
- 抽象父类: 通常在抽象父类中封装了子类的算法框架,包括实现一些公共方法以及封装子类中所有方法的执行方式(比如执行顺序、条件执行等)。
- 具体的实现子类: 子类通过继承这个抽象类,也继承了整个算法结构,并且可以选择重写父类的方法。
应用场合:
假如我们有一些平行的子类,各个子类之间有一些相同的行为,也有一些不同的行为。如果相同和不同的行为都混合在各个子类的实现中,说明这些相同的行为会在各个子类中重复出现。 但实际上,相同的行为可以被搬移到另外一个单一的地方,模板方法模式就是为解决这个问题而生的。在模板方法模式中,子类实现中的相同部分被上移到父类中,而将不同的部分留待子类来实现。这也很好地体现了泛化的思想。
class Tax {
calc(value) {
if (value >= 1000)
value = this.overThousand(value);
return this.complementaryFee(value);
}
complementaryFee(value) {
return value + 10;
}
}
class Tax1 extends Tax {
constructor() {
super();
}
overThousand(value) {
return value * 1.1;
}
}
作者:alanyf
链接:https://juejin.cn/post/6904794930271485965
来源:掘金
八、责任链模式
责任链模式(Chain of Responsibility Pattern)为请求创建了一个接收者对象的链。使多个对象都有机会处理请求,从而避免请求的发送者和接收者之间的耦合关系。
应用场景:
- 多个处理器 ABC 依次处理同一个请求,形成一个链条,当某个处理器能处理这个请求,就不会继续传递给后续处理器了。
- 过滤器 拦截器 处理器。
- JS 中的事件冒泡
-
- express、koa中间件洋葱模型
优点:
- 降低耦合度。它将请求的发送者和接收者解耦。
- 简化了对象。使得对象不需要知道链的结构。
- 增强给对象指派职责的灵活性。通过改变链内的成员或者调动它们的次序,允许动态地新增或者删除责任。
- 增加新的请求处理类很方便。
缺点:
- 不能保证请求一定被接收。
- 系统性能将受到一定影响,而且在进行代码调试时不太方便,可能会造成循环调用。
- 可能不容易观察运行时的特征,有碍于除错。