react/vue中的设计模式

前言

程序员修行一途乃内外兼修，耗尽大半生时间，用头发以及健康换取通往自由的钥匙。程序员和武功一样也分为内功和外功。内功主要是提高武学修为，包括一些经法和心法，比如小无相功，吐纳法等等，这些在武学上应该算是至高的内功心法。外功是一些武术招式，比如“降龙十八掌”等。
现在程序员都特别注重外功的修炼，会把所有的技能点都加在了不同的武功上了。殊不知，内功才是可以让你的修行事半功倍。

内功心法

• 确保代码在离开你的时候比来之前更健康。（重构）
• 理解多种程序设计方法并知道何时使用（架构）

• 一些原则的自律（

  • Think as a Tester 像测试者一样思考
  • **Demeter Principle 一个实体应当尽量少地与其他实体之间发生相互作用，使得系统功能模块相对独立
  • Stop complaining 停止抱怨
  • Composite Reuse Principle 尽量使用合成/聚合的方式，而不是使用继承

内功无法短时间让你的简历加分，却可以提升你的核心竞争力。学习能力，动手能力，产品能力等等

外功秘籍

• 必要的知识树
• 通用的业务解决方案
• 前端工具的开发和使用

我们平时99%的时间可能都是在积累外功秘籍毕竟前端工具太多。 毕竟光一个状态关系常用的就用4,5种。而且大都是通过业务功能不断积累修行来的。想练成绝世武功，除了需要天赋、勤奋、方法、师承外，还需要花时间沉淀自己的方法论。

设计模式

那首先需要花功夫学习的是设计模式。设计模式是不受语言限制的。是一种具有迁移能力的知识，学会后可以受益整个职业生涯。而语言、框架则不具备迁移性，前端许多同学都把精力花在学习框架特性上，遇到前端技术迭代时期就尴尬了，这就是为什么大公司面试要问框架原理，就是看看你能否抓住一些不变的东西，所以洋洋洒洒的说上下文相关的细节也不是面试官想要的，真正想听到的是你抽象后对框架原理共性的总结。

GOF23种设计模式

那首先通过我们最熟悉的react||vue来了解一下GOF.
GOF是设计模式的经典名著《设计模式——可复用面向对象软件的基础》，在书本总结了23个设计模式。我来罗列一下哪些设计模式是我们见过的。

• 单例（Singleton）模式
  定义：某个类只能生成一个实例，该类提供了一个全局访问点供外部获取该实例，其拓展是有限多例模式。
  例子：Vuex 保证唯一 Store,以及单例组件
• 工厂（Factory Method）模式
  定义：一个用于创建产品的接口，由子类决定生产什么产品。
  例子：将new操作单独封装，遇到new时，就要考虑是否该用工厂模式。 在组件中传入实参，返回出不同的组件**

• 抽象工厂（Abstract Factory）模式
  定义：提供一个创建产品族的接口，其每个子类可以生产一系列相关的产品。
  例子：
  比如说有个案例有不同的订单状态对应不同的操作按钮。我们是不是一般会写出如下的代码

      switch (status){
          case '待付款':
              setState({status:1})
              break;
  }

  如果我们把订单状态的一些判断与业务代码掺杂在一块，不利于我们做扩展和复用。那对比一下下面的代码

      export default class OrderStatusFactory {
          createStatusObjWith (status) {
              let obj = undifined
              switch (status) {
                  case '待付款':
                      obj = new StatusWaitToPay()
                      break;
                  case '待发货':
                      obj = new StatusWaitToShip()
                      break;
                  ...
          }
          return obj
      }
      //拿到数据使用
      let orderStatusFactory = new OrderStatusFactory()
      let status = orderStatusFactory.createStatusObjWith(data.status)
      this.setState({ status: status })

组合（Composite）模式

定义：将对象组合成树状层次结构，使用户对单个对象和组合对象具有一致的访问性。

例子：组件

组合模式给我们的启示，组件接口设计三原则

1. 保持接口小，props 数量要少
2. 根据数据边界来划分组件，利用组合（composition）
3. 把 state 尽量往上层组件提取

同时，我们也接触了这样一些最佳实践：

1. 避免 renderXXXX 函数，直接使用独立的纯函数组件
2. 给回调函数类型的 props 加统一前缀，比如 on 或者 handle
3. 使用 propTypes 来定义组件的 props

观察者（Observer）模式
定义当一个变量值被修改时，可以自动通知所有关注这个变量的其他对象，自动重新更新获取这个变量的新值
例子：vue的双向监听就是基于观察者模式实现的

参考
GOF的23种设计模式