三分钟学JS设计模式（七）外观模式

外观模式

一、什么是外观模式

外观模式（Facade Pattern）隐藏系统、接口复杂复杂性，并向客户端提供了一个客户端可以访问系统的接口。

举个栗子：小王是个小孩子，想学骑自行车。但是普通自行车在前进的过程中还要保持左右平衡（系统、接口复杂），老王给装了辅助小轮（外观模式加持），这样加装的自行车就更容易使用了，小王就只管前进，再也不怕摔倒了。

二、 优缺点

• 优点：
  • 1、简化复杂接口；
  • 2、解耦，屏蔽对原系统的直接访问，提高了安全性。
• 缺点：
  • 1、不够灵活
    需要新功能的时候需要对原有的外观模式代码改造使其适配新功能。原来的自行车虽然不好骑，但是熟练的自行车手可以任意左右压弯，儿童自行车则需要拆掉辅助轮或升高辅助轮才能实现压弯功能。
    

三、场景例子、代码实现

• 场景一：fetch适配

总所周知，ES6的原生fetch功能强大，但是非常难用，因此我们可以适配ajax接口风格的fetch。

// 使得ajaxFetch 跟ajax一样支持 success和fail回调
export const ajaxFetch = ({ method, path, data, headers, success, fail }) => {
  const { url, fetchInfo } = getFetchInfo({ method, path, data ,headers});
  const fetchPromise = fetch(url, fetchInfo).then((res) => {
    if (res && res.status == '401') {
      return { success: false, message: '登陆超时', status: 401 };
    }
    // 404之类的请求对于fetch也是成功的情况，所以我们需要转成错误的情况
    if (!res.ok) {
      return { success: false, message: res.statusText, ...res };
    }
    return res.json();
  }).then((result) => {
    if (result.success) {
      return result;
    }
  }).catch(error => {
    return { success: false, ...error, message: error.message };
  });
  fetchPromise.then(data =>{
    if(success){
      success(data)
    }else{
      fail(data)
    }
  })
  return fetchPromise;
}

ajaxFetch({
	path:'https://www.baidu.com/api/getUser',
	method:'post',
	data:{id:1},
	onSuccess:(data) =>{
	}
})