关于js的设计模式

Z^x

已于 2023-04-28 09:48:52 修改

阅读量79

点赞数

分类专栏： JavaScript碎片式总结文章标签：设计模式

于 2023-03-26 16:28:17 首次发布

本文链接：https://blog.csdn.net/m0_63219422/article/details/129780262

版权

JavaScript碎片式总结专栏收录该内容

17 篇文章 0 订阅

订阅专栏

本文探讨了JavaScript中的常见设计模式，包括工厂模式（用于封装对象创建）、单例模式（确保类只有一个实例）、发布-订阅模式（用于事件传递）以及装饰器模式（动态添加功能）和策略模式（定义算法族，按需选择）。这些模式有助于提高代码的灵活性、可维护性和扩展性。

摘要由CSDN通过智能技术生成

在复习前端基础知识的过程中总要追求一下js这个语言的本质此文讨论一下常见的几种设计模式

首先我们要知道什么是设计模式？

举个例子假如现在我们有一个房子还有一堆杂七杂八的衣服裤子那我们如果想把衣物保存在这个房子里面方法有很多最简单的就是直接放在地上这样是最简单的方式但是从另一个维护层面来讲它又太杂乱了不好梳理那么我们可以选择买一个柜子来对这些衣物进行分类处理虽然会多出买衣柜的钱但是整理起来更加方便看起来也更加整洁优雅这就是两种设计模式

所谓设计模式，是前辈们总结下来的，在软件设计、开发过程中，针对特定场景、特定问题的较优解决方案。

常见的设计模式

1.工厂模式

工厂模式是一种用来创建对象的设计模式

我们知道创建对象实例是通过new关键字来调用的

那么工厂模式就是在不暴露创建对象的逻辑的情况下也就是将创建对象的逻辑封装在函数内那么这个函数就成为了工厂

那么这样有什么意义呢？

就是把一些复杂的逻辑和创建对象封装在一起对外只要输入不同的参数那么这个函数就会给你返回不同的对象省去了繁杂的步骤而且方便使用

如下：

function createPerson(name) {
  var people= new Object();
  people.name = name;
  people.age = "0"
  if (name === "zzz") {
    people.age= "18";
  }
  if (name === "xxx") {
    people.age= "180";
  }
  if (name === "lll") {
    people.age= "999";
  }
  return people;
}
var people1 = createPerson("zzz")
var people2 = createPerson("xxx")
var people3 = createPerson("lll")
console.log(people1);
console.log(people2);
console.log(people3);

可以看到我们传入不同的参数返回对象的属性值都不相同当然这只是简单的测试实际可以封装更多更复杂的逻辑工厂模式就显得尤为重要了

优缺点：

优点：

良好的封装，访问者无需了解创建过程，代码结构清晰。

扩展性良好，通过工厂方法隔离了用户和创建流程，符合开闭原则。

解耦了高层逻辑和底层产品类，符合最少知识原则，不需要的就不要去交流；

缺点：

给系统增加了抽象性，带来了额外的系统复杂度，不能滥用。（合理抽象能提高系统维护性，但可能会提高阅读难度，还是需要合理看待）

2.单例模式

单例模式就是保证一个类只有一个实例实现的方法一般是先判断是否当前存在实例如果存在就直接返回不在重新创造实例如果不存在就创建了再返回保证一个实例的好处是可以减少不必要内存的开销

具体实现是创建函数判断实例是否存在如果存在直接返回实例并在实例上执行逻辑这里借用一段代码如下：

class Singleton {
    let _instance = null;
    static getInstance() {
        if (!Singleton._instance) {
          Singleton.instance = new Singleton()
        }
        // 如果这个唯一的实例已经存在，则直接返回
        return Singleton._instance
    }
}

const s1 = Singleton.getInstance()
const s2 = Singleton.getInstance()

console.log(s1 === s2)  // true

例如vue中vuex的原理就是单例模式的应用通过Vue.use(Vuex)安装Vuex插件 Vuex插件本质上是一个对象，内部实现了一个install方法，这个方法在插件安装时被调用，从而把Store注入到Vue实例中。

let Vue // instance 实例

export function install (_Vue) {
  // 判断传入的Vue实例对象是否已经被install过（是否有了唯一的state）
  if (Vue && _Vue === Vue) {
    if (process.env.NODE_ENV !== 'production') {
      console.error(
        '[vuex] already installed. Vue.use(Vuex) should be called only once.'
      )
    }
    return
  }
  // 若没有，则为这个Vue实例对象install一个唯一的Vuex
  Vue = _Vue
  // 将Vuex的初始化逻辑写进Vue的钩子函数里
  applyMixin(Vue)
}

通过这种方式可以保证每个vue实例对象都只会被安装一次vuex插件每一个vue实例只会拥有一个全局的store

优缺点

优点： 节约资源，保证访问的一致性。

缺点： 扩展性不友好，因为单例模式一般自行实例化，没有接口。

3.发布-订阅模式&观察者模式

我总认为这两个模式是相同的这里来解释一下他们的区别

首先：实现二者所需的角色数量有着明显的区别。观察者模式本身只需要2个角色便可成型，即观察者和被观察者，其中被观察者是重点。而发布订阅需要至少3个角色来组成，包括发布者、订阅者、发布订阅中心，其中发布订阅中心是重点。

3.1观察者模式

类似于响应式被观察者发生改变那么观察者也可以发生改变

优缺点

优点：目标变化就会通知观察者，这是观察者模式最大的优点。

缺点：不灵活。目标和观察者是耦合在一起的，要实现观察者模式，必须同时引入被观察者和观察者才能达到响应式的效果。

3.2发布-订阅模式

发布订阅模式使用了一位中间人也就是发布订阅中心发布者和订阅者之间并没有直接联系当发布者发布了新状态那么发布订阅中心就会提醒订阅者

vue的双向数据绑定就是基于此实现的

通过DefineProperty劫持各个数据的setter和getter，并为每个数据添加一个订阅者列表，这个列表将会记录所有依赖这个数据的组件。响应式后的数据相当于消息的发布者。

每个组件都对应一个Watcher订阅者，当组件渲染函数执行时，会将本组件的Watcher加入到所依赖的响应式数据的订阅者列表中。相当于完成了一次订阅，这个过程叫做“依赖收集”。

当响应式数据发生变化时，会出setter，setter负责通知数据的订阅者列表中的Watcher，Watcher触发组件重新渲染来更新视图。视图层相当于消息的订阅者。

4.装饰器模式

就是在不改变原对象的基础上新增属性/方法一层一层包裹

优点：

对象的核心职责和装饰功能区分开，可以通过动态增删装饰去除目标对象中的装饰逻辑。

5.策略模式

定义一系列算法根据输入的参数选择使用哪个算法

例如：双十一满减活动。满200-20、满300-50、满500-100

可以使用if-else直接判断但是如果逻辑多了就会很臃肿不够优雅而且👇

策略模式的重点是算法的实现和算法的使用分开

最开始我还不明白这句话什么意思使用和实现不是一个意思吗？？？难道这不是策略模式吗？？

后来看到大佬们优化的代码才知道👇

// 算法的实现
const discountMap = {
    'discount200-20': function(price) {
        return price - Math.floor(price / 200) * 20;
    },
    'discount300-50': function(price) {
        return price - Math.floor(price/300) * 50;
    },
    'discount500-100': function(price) {
        return price - Math.floor(price/500) * 100;
    },
}

// 算法的使用
function priceCalculate(discountType,price){
    return discountMap[discountType] && discountMap[discountType](price);
}

这样才叫策略模式我的理解是先定义好算法根据输入去查询这个算法是否存在如果存在就调用这个算法如果不存在我们还可以设置方法选择是否向其中添加算法