javascript设计模式

设计模式是我们在 解决问题的时候针对特定问题给出的简洁而优化的处理方案，这里我跟大家简单聊一下前端中常用的三个设计模式

每一个模式描述了一个在我们周围不断重复发生的问题，以及该问题的解决方案的核心。这样，你就能一次又一次地使用该方案而不必做重复劳动。 —— Christopher Alexander

设计模式的核心思想

设计模式出现的背景，是软件设计的复杂度日益飙升。软件设计越来越复杂的“罪魁祸首”，就是变化。比如我们写一个应用，这个应用以后完全不会发生迭代和优化，那么我们可以随便写，反正实现功能就行了，根本不用去考虑它的维护和升级。

但在实际开发中，不发生变化的代码可以说是不存在的。我们能做的只有将这个变化造成的影响最小化 —— 将变与不变分离，确保变化的部分灵活、不变的部分稳定。

这个过程，就叫“封装变化”；这样的代码，就是我们所谓的“健壮”的代码，它可以经得起变化的考验。而设计模式出现的意义，就是帮我们写出这样的代码。

设计模式的分类

设计模式的分类其实是非常多的，在《设计模式：可复用面向对象软件的基础》这本书中根据“创建型”、“行为型”和“结构型”将设计模式分为23种。

设计模式会有很多，但是实际项目开发中并没有那么多，本片我们先简单来看一下项目中经常用到的单例和组合模式。

📚单例模式

概念

保证一个类仅有一个实例，并提供一个访问它的全局访问点，这样的模式就叫做单例模式。
这种模式其实挺常见，其中应用最广泛的要数 Redux 和 Vuex。无论是 Redux 和 Vuex，它们都实现了一个全局的 Store 用于存储应用的所有状态。这个 Store 的实现，正是单例模式的典型应用。

简单实现

// 准备一个构造函数
// 将来要 new 的
function Person() {}

// 准备一个单例模式函数
// 这个单例模式函数要把 Person 做成一个单例模式
// 将来再想要 new Person 的时候只要执行这个 singleton 函数就可以了
function singleton () {
  let instance
  
  if (!instance) { // 如果 instance 没有内容
    // 来到这里，证明 instance 没有内容
    // 给他赋值为 new Person
      instance = new Person()
  }
  
  // 返回的永远都是第一次 new Person 的实例
  // 也就是永远都是一个实例
  return instance
}

const p1 = singleton()
const p2 = singleton()
console.log(p1 === p2) // true

单例模式的核心代码很简单,其实就是判断一下，他曾经有没有 new 出来过对象,如果有，就还继续使用之前的那个对象，如果没有，那么就给你 new 一个.

📚组合模式

概念

将对象以树形结构组织起来，以达成“部分－整体”的层次结构，使得客户端对单个对象和组合对象的使用具有一致性

class GetHome {

    init () {
        console.log('到家了')
    }
}

class OpenComputer {

    init () {
        console.log('打开电脑')
    }
}

class LookTv {

    init () {
        console.log('看夏目友人帐')
    }
}

上面几个构造函数的创造的实例化对象的 启动方式 都一致，那么我们就可以把这几个函数以组合模式的情况书写，然后统一启动

class Compose {
    constructor () {
        this.compose = []
    }
    	
    // 添加任务的方法
    add (task) {
        this.compose.push(task)
    }
    
    // 一个执行任务的方法
    execute () {
        this.compose.forEach(item => {
            item.init()
        })
    }
}

我们就用我们的组合模式构造函数来吧前面的几个功能组合起来

const c = new Compose()
// 把所有要完成的任务都放在队列里面
c.add(new GetHome())
c.add(new OpenComputer)
c.add(new PlayGame)

// 直接器动任务队列
c.execute()
// 就会按照顺序执行三个对象中的 init 函数