设计模式 | 青训营笔记

51 阅读3分钟

这是我参与「第四届青训营 」笔记创作活动的的第5天,本次课堂中我学习了相关的设计模式。

概述

设计模式是指在软件设计中,被反复使用的一种代码组织经验,它并不是一种直接的帮我们生产源码的设计,而是一种能够让应用在不同场景下解决问题的模板描述。使用设计模式的目的是为了更好的,更高效的重用代码,提高代码的可扩展性和可维护性。

前端中的设计模式

设计模式按照分类分为三个大类共23种。

  • 创建型模式
  • 结构性模式
  • 行为性模式

其中对于前端来说,自然不是全部都用到了,这里经过我的理解,分享几种前端常见的设计模式。

工厂模式

工厂模式是用来创建对象的一种最常用的设计模式。我们对外不需要暴露创建对象的具体逻辑,而是将其封装在一个”工厂“里,这个工厂就是指的我们封装的函数。我们不用关心里面的逻辑,每次调用它就可以直接拿到工厂的”产品“,也就是新创建的对象。

其实就如其名字一样,就是像工厂一样,输入一些参数,就能不断地产生类似的产品;举个生活中的例子:汽车厂。我们买车,不需要知道汽车厂里面的生产流水线是如何规划的,也不需要知道汽车工厂需要怎么样的技术,才能生产这样一台车,我们只需要拿钱(参数),提出购买需求(调用),就能够获得汽车(产物)。

在前端中一个比较典型的例子就是Vue2.x框架中的data选项,它的书写方式官方文档上要求你需要写一个函数返回对象而不是直接返回对象:

data() {
  return {
    //
  }
}
// 错误写法
data: {
  //
}

这是为了多次生产组件的时候,避免多个组件共用同一个data对象,造成数据混乱,这里的data函数,其实就是工厂模式。每次组件创建的时候,都返回一份全新的data对象供数据使用。

工厂模式自然还有很多其它高级用法,这里就不一一列举了。

单例模式

单例模式就是保证让一个对象只实例化一次,只在全局存在一份。比如最简单的例子,浏览器中的window对象,全局只有一份,也只会实例化一次。

单例模式通常用来处理那些特殊的对象,他们只需要存在全局存在一份,只需要被实例化一次,通常他们拥有很多的方法和属性,自身占用的内存比较多,如果在runtime存在很多份,或者实例化很多次,会占用很多内存和性能。这个时候就可以使用单例模式来控制实例的数量来达到节约资源的目的。

一个比较常见的单例模式写法就是通过闭包cache来保证对象的唯一性:

let instanceFunction = (function(){
  let instance = null
  
  return function() {
    if (instance) {
      return instance
    } else {
      instance = new Instance()
      return instance
    }
  }
})()

这样调用的时候就只会在第一次实例化,后续再调用都会拿到第一次的结果。

总结

设计模式并不是单一的某种方法也没有固定的适用场景。很多时候可能我们自己在写代码的时候可能已经在使用某种设计模式的思想但是我们自己却不知道。我觉得学习设计模式只是单纯的去看相关的书籍和博客并不能够深入的去理解,在学习的过程中结合自己的项目经验能够感悟到其中的精髓才能够掌握这个思想。设计的再厉害,性能很差,也是一个很差的设计。所以最适合的就是最好的。