我正在参与掘金创作者训练营第4期，点击了解活动详情，一起学习吧！

一、前言

我开始几年的开发中几乎没有使用过设计模式。前端常见的设计模式，我看过好几遍，模式名称记得很清楚，但是具体内容和原理，我印象很模糊。

之所以记不住，用不上，原因两点，大部分功能比较简单，开发时也就用简单的方案进行实现了；对设计模式的理解没有透彻，不会用。

我感觉自己最近有高效率学习的buff，所以试着重新理解这个知识点。

二、边学边用

之前学习新技术的时候，看一遍文档或者文章，记忆并不深刻，后来发现自己对新技术的掌握程度在于自己是否真实的实现过。也就是常说的“好记性不如烂笔头”。而且我不擅长过目不忘，我需要理解了才能更好的记忆。

对于前端设计模式的学习，我采用了知识点介绍+功能代码的模式，方便学习、理解和记忆。其中知识点介绍大部分来自我参考的文章，参考文章会列在文章底部。（都是很优秀的文章）

2.1 外观模式

2.1.1 介绍

外观模式为子系统中的一组接口提供一个统一的高层接口，使子系统更容易使用。简而言之外观设计模式就是把多个子系统中复杂逻辑进行抽象，从而提供一个更统一、更简洁、更易用的API。

2.1.2 应用场景

很多我们常用的框架和库基本都遵循了外观设计模式。我们在实际开发中复杂的功能处理比如将某些复杂逻辑抽离进行封装，对外仅提供一个API即可，也是对外观模式的应用

2.1.3 简单小实例

我把之前做的功能简化了一下分享出来。

1）三个私有方法分别是_userBaseInfo（获取用户基础信息）、_userAddressInfo（获取用户的订单信息）、_userOrderInfo（获取用户的收货地址）；

2）对外提供的方法是getUserInfo（获取用户的购物信息）；

3）将内部的数据处理封装成一个方法提供出来，这样一个外观模式就实现了。

/**
 * 用户-基础信息
 */
const _userBaseInfo = () => {
  const obj = {
    name: '张三',
    phone: '123456',
    sex: '男',
  };
  return obj;
};

/**
 * 用户-收货地址信息
 */
const _userAddressInfo = () => {
  const obj = {
    province: '北京市',
    city: '北京市',
    region: '昌平',
  };
  return obj;
};

/**
 * 用户-订单信息
 */
const _userOrderInfo = () => {
  const obj = {
    orderNo: '123',
    price: '129',
    goodName: '帽子',
  };
  return obj;
};

/**
 * 用户-购物信息
 */
const getUserInfo = () => {
  const baseInfo = _userBaseInfo();
  const addressInfo = _userAddressInfo();
  const orderInfo = _userOrderInfo();
  const obj = {
    ...baseInfo,
    ...addressInfo,
    ...orderInfo,
  };
  return obj;
};

const userInfo = getUserInfo();
console.log({ userInfo });
// 打印结果
// {
//   userInfo: {
//     name: '张三',
//     phone: '123456',
//     sex: '男',
//     province: '北京市',
//     city: '北京市',
//     region: '昌平',
//     orderNo: '123',
//     price: '129',
//     goodName: '帽子'
//   }
// }
复制代码

2.2 代理模式

2.2.1 介绍

代理模式给某一个对象提供一个代理对象，并由代理对象控制对原对象的引用。通俗的来讲代理模式就是我们生活中常见的中介。

2.2.2 应用场景

1）一些内部类不想或者不能直接被外部引用，可以使用代理类作为和外部的连接；

2）功能扩展，无需修改委托类，在代理类增加需要的功能就能实现功能扩展，比如增加消息通知、日志、缓存等。

2.2.3 简单小实例

1）一般二手书网站提供购买和出售书籍两种交易方式；

2）多抓鱼是我常用的二手书平台，它可以看做是一个代理服务，同时多抓鱼的配送服务使用的顺丰这种快速送货和取货的服务；

/**
 * 二手书网站 提供购买和出售两种交易方式
 */
class BookTrading {
  // 购买图书
  buyBook(props) {
    props = props ? props : {};
    let res = '购买了' + props.amount + '本' + props.name;
    console.log(res);
  }
  // 出售图书
  recoveryBook(props) {
    props = props ? props : {};
    let res = '出售了' + props.amount + '本' + props.name;
    console.log(res);
  }
}

/**
 * 多抓鱼二手书交易平台
 */
class Duozhuayu extends BookTrading {
  constructor() {
    super();
  }
  buy(props) {
    // 购买图书
    this.buyBook(props);
  }
  buyDelivery(props) {
    // 购买图书
    console.log('顺丰一日送达:');
    this.buyBook(props);
  }
  recovery(props) {
    // 出售图书
    this.buyBook(props);
  }
  recoveryPickUp(props) {
    console.log('顺丰上门取件:');
    this.recoveryBook(props);
  }
}

const duozhuayu = new Duozhuayu();
duozhuayu.buy({ name: '书店日记', amount: 2 });
duozhuayu.buyDelivery({ name: '中国地理杂志', amount: 5 });
duozhuayu.recovery({ name: '乌合之众', amount: 1 });
duozhuayu.recoveryPickUp({ name: '局外人', amount: 1 });
// 打印结果
// 购买了2本书店日记
// 顺丰一日送达:
// 购买了5本中国地理杂志
// 购买了1本乌合之众
// 顺丰上门取件:
// 出售了1本局外人
复制代码