tian~

Appearance

Return to top
on this page

扫码联系

编程学习&& IT

tian

外观(门面)模式

概念

概念

为了一个相对复杂的接口或者结构提供了一个上层接口供用户使用 通过们门面模式除了简化我们的应用，可将底层调用封装起来，未来如果底层需要变化，将复杂调用包装了一层使其变得更加简单

案例

下面列举一个外观(门面)模式的案例

js
axios.get('/api/user',{
  params:{id:"102"}
}).then((res)=>{
  console.log(res)
}).catch((err)=>{
  console.log(err)
})

axios.post('/api/users',{firstName:'tina',lastName:'xiao'},
{
  headers:{"Content-Type":"application/json"}
}).then((res)=>{
  console.log('res')
}).catch((err)=>{
  console.log(err)
})

// get post 传参并不相同，使用起来会比较麻烦，post还需要手动更新header
// 为了解决上述问题 ==> 门面模式

//  ----------------------------------------------------------------
// 优化后 

//request.js
import axios from 'axios';
export const get = ((url,params)=>{
 return axios.get(url,{params}) 
})

export const post = ((url,params)=>{
  return axios.post(url,{...params}),
  {headers:{"Content-Type":"application/json"}}
})


// ComponetB.js
import {get,post} from 'request.js'
get('/api/users',{
  id:"0001"
}).then((res)=>{
  console.log(res);
}).catch((err)=>{
  console.log(err);
});

post('/api/users',{
  edu:"本科",
  nations:"china"
}).then((res)=>{
  console.log(res)
}).catch((err)=>{
  console.log(err)
});

应用场景

    1. 简化复杂接口
    1. 降低耦合度
    1. 优化性能
    1. 提高代码复用率
    1. 可维护性

特点

  • 将某个用起来麻烦且繁琐的功能进行封装，方便使用，其在未来能够更好的应对底层的变化