那些你不经意间使用的设计模式(一) - 建立型模式

前言

前几天我曾分享过几张不那么严谨的思惟导图，其中便有关于设计模式的一张：

在很长的一段时间里，我只能记住某几种设计模式，并无很好的应用。

索性咱们就以该图为大纲，讲讲那些咱们不经意间使用的设计模式 --- 建立型。

1. 三种工厂模式：Factory Pattern

一般来讲三种设计模式为：

• 简单工厂模式(Simple Factory)
• 工厂方法模式(Factory method)
• 抽象工厂模式(Abstract factory)

其核心就是：

工厂起到的做用就是隐藏了建立实例的复杂度，只须要提供一个接口，简单清晰。 --- 摘自《前端面试之道》

而区别则是：

• 简单工厂模式，用来建立某一种产品对象的实例，用来建立单一对象。
• 工厂方法模式，将建立实例推迟到子类中进行。
• 抽象工厂模式，是对类的工厂抽象用来建立产品类簇，不负责建立某一类产品的实例。

其实从你会用jQuery开始，就已经在用工厂模式了：

JavaScript设计模式与实践--工厂模式

1. jQuery的$(selector)

jQuery中$('div')和new $('div')哪一个好用？很显然直接$()最方便 ,这是由于$()已是一个工厂方法了。

class jQuery {
    constructor(selector) {
        super(selector)
    }
    //  ....
}

window.$ = function(selector) {
    return new jQuery(selector)
}
复制代码

2. React的createElement()

React.createElement()方法就是一个工厂方法

React.createElement('h1', null, 'Hello World!'),
复制代码

3. Vue的异步组件

经过promise的方式resolve出来一个组件

对应源码：

export function createComponent (
  Ctor: Class<Component> | Function | Object | void,
  data: ?VNodeData,
  context: Component,
  children: ?Array<VNode>,
  tag?: string
): VNode | Array<VNode> | void {
    // ...逻辑处理
    // async component
    let asyncFactory
    const vnode = new VNode(
    `vue-component-${Ctor.cid}${name ? `-${name}` : ''}`,
    data, undefined, undefined, undefined, context,
    { Ctor, propsData, listeners, tag, children },
    asyncFactory
    )
}

复制代码

2. 单例模式：Singleton Pattern

单例模式是最简单的设计模式之一。 用一句大白话来解释就是：

实例一次后到处可用

单例模式的要点有三个:

• 某个类只能有一个实例；
• 它必须自行建立这个实例；
• 它必须自行向整个系统提供这个实例。

从具体实现角度来讲，就是如下三点：

• 单例模式的类只提供私有的构造函数
• 类定义中含有一个该类的静态私有对象
• 该类提供了一个静态的公有的函数用于建立或获取它自己的静态私有对象。

一样的，它也是咱们最先接触的一种设计模式：

1. 引用第三方库

屡次引用只会使用一个库引用，如 jQuery，lodash，moment等。

2. Vuex / Redux

全局状态管理store

Vuex和Redux数据保存在单一store中，Mobx将数据保存在分散的多个store中

const store = createStore(reducer)

render(
  <Provider store={store}>
    <App />
  </Provider>,
  document.getElementById('root')
)
复制代码

3. Vue中第三方插件的安装

首当其冲的就是Vuex安装：

let Vue // bind on install

export function install (_Vue) {
  if (Vue && _Vue === Vue) {
    // 若是发现 Vue 有值，就不从新建立实例了
    return
  }
  Vue = _Vue
  applyMixin(Vue)
}
复制代码

其它也相似，感兴趣的能够去GitHub搜索export function install (Vue)

4. 简单实现一个单例模式：

class SingletonClass {
  constructor() {
    if (!SingletonClass.instance) {
      SingletonClass.instance = this;
    }

    return SingletonClass.instance;
  }
  // other things
}

const instance = new SingletonClass();
Object.freeze(instance);

export default instance;
复制代码

3. 建造者模式:Builder Pattern

、建造者模式主要用于 “分步骤构建一个复杂的对象”

这在其中“分步骤”是一个稳定的算法，而复杂对象的各个部分则常常变化。

一句话：指挥者分配任务，建造者进行开发，各执其责，稳定在一个大的流程里面去。

建造者模式概念拟物化解读

一位女士要建造一座别墅，须要找来一位包工头，包工头再将具体的任务分配给工人作，作完以后再给女士使用。

1. jQuery中的建造者

jQuery中建造者模式体如今：

$( "<div class= "foo">bar</div>" );

$( "<p id="test">foo <em>bar</em></p>").appendTo("body" );

var newParagraph = $( "<p />" ).text( "Hello world" );

$( "<input />" )
      .attr({ "type": "text", "id":"sample"});
      .appendTo("#container");
复制代码

下面是jQuery源码内部jQuery.prototype方法的一个片断，它将从传递给jQuery()选择器的标记构建jQuery对象。

不管是否 document.createElement用于建立新元素，对元素（找到或建立）的引用都会注入到返回的对象中，所以.attr()能够在其后当即使用其余方法。

// HANDLE: $(html) -> $(array)
    if ( match[1] ) {
      context = context instanceof jQuery ? context[0] : context;
      doc = ( context ? context.ownerDocument || context : document );
      
      //若是传入的是单个字符串，而且是单个标记
      //只需执行createElement并跳过其他部分
    
      ret = rsingleTag.exec( selector );

      if ( ret ) {
        if ( jQuery.isPlainObject( context ) ) {
          selector = [ document.createElement( ret[1] ) ];
          jQuery.fn.attr.call( selector, context, true );

        } else {
          selector = [ doc.createElement( ret[1] ) ];
        }

      } else {
        ret = jQuery.buildFragment( [ match[1] ], [ doc ] );
        selector = ( ret.cacheable ? jQuery.clone(ret.fragment) 
        : ret.fragment ).childNodes;
      }

      return jQuery.merge( this, selector );
复制代码

1. 建造者模式的理想实现

本质上，建造者模式的目标是减小构造函数所用的参数数量，并提供向对象添加灵活的行为方法。

// 使用建造者模式以前
const person1 = new Person('Peter', 26, true, 40074986, 4, 2);

// 使用建造者模式以后
const person1 = new Person();
person1
  .name('Peter')
  .age(26)
  .member(true)
  .phone(40074986)
  .children(4)
  .cars(2);
复制代码

2. ES6中的建造者模式

咱们来假设一个商品录入系统的业务场景，有四个必填信息，分别是：名称，价格，分类。 该build方法将返回最终的JavaScript对象。

/书籍建造者类
class ProductBuilder {
  constructor() {
    this.name = '';
    this.price = 0;
    this.category = '';
  }

  withName(name) {
    this.name = name
    return this
  }

  withPrice(price) {
    this.price = price
    return this
  }

  withCategory(category) {
    this.category = category
    return this
  }

  build() {
    return {
      name: this.name,
      price: this.price,
      category: this.category,
    }
  }
}

console.log(
  new ProductBuilder()
    .withName('《哈利·波特》')
    .withCategory('book')
    .withPrice('29.9')
    .build()
复制代码

虽然只有三个属性，咱们的构建器已经至关大，而且须要不少withers。

构建器的大小随字段数量线性增加。咱们有太多的withxxxx方法。咱们其实能够自动建立这类withxxxx方法以简化代码。

3. 建造者模式简化

class ProductBuilder {
  constructor() {
    this.name = ''
    this.price = ''
    this.category = 'other'

    // 为每一个属性生成`wither`
    Object.keys(this).forEach(key => {
      const witherName = `with${key.substring(0, 1).toUpperCase()}${key.substring(1)}`
      this[witherName] = value => {
        this[key] = value
        return this
      }
    })
  }

  build() {
    // 获取今生成器的全部非函数属性的数组
    const keysNoWithers = Object.keys(this).filter(key => typeof this[key] !== 'function')

    return keysNoWithers.reduce((returnValue, key) => {
      return {
        ...returnValue,
        [key]: this[key],
      }
    }, {})
  }
}

console.log(
  new ProductBuilder()
    .withName('《哈利波特》')
    .withCategory('book')
    .build()
)
复制代码

咱们将全部的建造方法withxxxx在constructor调用时自动被建立，这里咱们使用了一些ES6的新语法：Object.keys获取对象属性数组，...的合并对象的语法

最终咱们获得了一种声明式（易于理解）的方法，且能够动态添加属性的建造者模式。

5. 提取公用部分，实现多个建造者

当你有许多建造者时，咱们能够轻松地将其广义部分提取到一个通用的父类中，从而能够很是轻松地建立新的建造者。

class BaseBuilder {
  init() {
    Object.keys(this).forEach((key) => {
      const witherName = `with${key.substring(0,1).toUpperCase()}${key.substring(1)}`;
      this[witherName] = (value) => {
        this[key] = value;
        return this;
      };
    });
  }

  build() {
    const keysNoWithers = Object.keys(this).filter((key) => (
      typeof this[key] !== 'function'
    ));

    return keysNoWithers.reduce((returnValue, key) => {
      return {
        ...returnValue,
        [key]: this[key]
      };
    }, {});
  }
}
复制代码

而后就能够建立多个建造者了：

class ProductBuilder extends BaseBuilder {
  constructor() {
    super();

    this.name = '《前端劝退秘诀》';
    this.price = 9.99;
    this.category = 'other';

    super.init();
  }
}
复制代码

能够看出，建造者模式的使用有且只适合建立极为复杂的对象。在前端的实际业务中，在没有这类极为复杂的对象的建立时，仍是应该直接使用对象字面或工厂模式等方式建立对象。

4. 原型模式

prototype...再讲会被砍死吧。

5. 下一篇：结构型设计模式

本来打算又双叒憋它个一万多字，把全部设计模式写个遍。

可是以为吧，这样阅读体验其实并很差（主要仍是懒，想慢慢写。）

噢对了，如今还有靠谱内推的能够联系我

• 微信：huab119
• 邮箱：454274033@qq.com

参考文章

• An Exploration of JavaScript Builders
• The Builder Pattern
• 《前端面试之道》

做者掘金文章总集

须要转载到公众号的喊我加下白名单就好了。

• 「真®全栈之路」Web前端开发的后端指南
• 「Vue实践」5分钟撸一个Vue CLI 插件
• 「Vue实践」武装你的前端项目
• 「中高级前端面试」JavaScript手写代码无敌秘籍
• 「从源码中学习」面试官都不知道的Vue题目答案
• 「从源码中学习」Vue源码中的JS骚操做
• 「从源码中学习」完全理解Vue选项Props
• 「Vue实践」项目升级vue-cli3的正确姿式
• 为什么你始终理解不了JavaScript做用域链？

公众号