15分钟带你了解前端工程师必知的javascript设计模式(附详细思维导图和源码)

前言

设计模式是一个程序员进阶高级的必备技巧,也是评判一个工程师工作经验和能力的试金石.设计模式是程序员多年工作经验的凝练和总结,能更大限度的优化代码以及对已有代码的合理重构.作为一名合格的前端工程师,学习设计模式是对自己工作经验的另一种方式的总结和反思,也是开发高质量,高可维护性,可扩展性代码的重要手段.

我们所熟知的金典的几大框架,比如jquery, react, vue内部也大量应用了设计模式, 比如观察者模式, 代理模式, 单例模式等.所以作为一个架构师,设计模式是必须掌握的.

在中高级前端工程师的面试的过程中,面试官也会适当考察求职者对设计模式的了解,所以笔者结合多年的工作经验和学习探索, 总结并画出了针对javascript设计模式的思维导图和实际案例,接下来就来让我们一起来探索习吧.

你将收获

• 单例模式
• 构造器模式
• 建造者模式
• 代理模式
• 外观模式
• 观察者模式
• 策略模式
• 迭代器模式

正文

我们先来看看总览.设计模式到底可以给我们带来什么呢?

 

以上笔者主要总结了几点使用设计模式能给工程带来的好处, 如代码可解耦, 可扩展性, 可靠性, 条理性, 可复用性. 接下来来看看我们javascript的第一个设计模式.

1. 单例模式

 

1.1 概念解读

单例模式: 保证一个类只有一个实例, 一般先判断实例是否存在,如果存在直接返回, 不存在则先创建再返回,这样就可以保证一个类只有一个实例对象.

1.2 作用

• 模块间通信
• 保证某个类的对象的唯一性
• 防止变量污染

1.3 注意事项

• 正确使用this
• 闭包容易造成内存泄漏,所以要及时清除不需要的变量
• 创建一个新对象的成本较高

1.4 实际案例

单例模式广泛应用于不同程序语言中, 在实际软件应用中应用比较多的比如电脑的任务管理器,回收站, 网站的计数器, 多线程的线程池的设计等.

1.5 代码实现

(function(){
  // 养鱼游戏
  let fish = null
  function catchFish() {
    // 如果鱼存在,则直接返回
    if(fish) {
      return {
        fish,
        water: function() {
          let water = this.fish.getAttribute('weight')
          this.fish.setAttribute('weight', ++water)
        }
    }else {
      // 如果鱼不存在,则获取鱼再返回
      fish = document.querySelector('#cat')
      return {
        fish,
        water: function() {
          let water = this.fish.getAttribute('weight')
          this.fish.setAttribute('weight', ++water)
        }
      }
    }
  }

  // 每隔3小时喂一次水
  setInterval(() => {
    catchFish().water()
  }, 3*60*60*1000)
})()
复制代码

2. 构造器模式

 

概念解读

构造器模式: 用于创建特定类型的对象,以便实现业务逻辑和功能的可复用.

作用

• 创建特定类型的对象
• 逻辑和业务的封装

注意事项

• 注意划分好业务逻辑的边界
• 配合单例实现初始化等工作
• 构造函数命名规范,第一个字母大写
• new对象的成本,把公用方法放到原型链上

实际案例

构造器模式我觉得是代码的格局,也是用来考验程序员对业务代码的理解程度.它往往用于实现javascript的工具库,比如lodash等以及javascript框架.

代码展示