前端常见的几种设计模式

技术标签：前端设计模式 javascript

前端常见的几种设计模式

一、单例模式

核心思想：确保一个类只对应一个实例

特点：

只允许一个例存在，全局可访问，第一次创建后缓存下来
排除全局变量，防止全局变量被重写
全局可访问

应用：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 中的事件冒泡
1. express、koa中间件洋葱模型

优点：

降低耦合度。它将请求的发送者和接收者解耦。
简化了对象。使得对象不需要知道链的结构。
增强给对象指派职责的灵活性。通过改变链内的成员或者调动它们的次序，允许动态地新增或者删除责任。
增加新的请求处理类很方便。

缺点：

不能保证请求一定被接收。
系统性能将受到一定影响，而且在进行代码调试时不太方便，可能会造成循环调用。
可能不容易观察运行时的特征，有碍于除错。

本文链接：https://blog.csdn.net/m0_46436992/article/details/116227388

代码先锋网代码片段及技术文章聚合