怎么在JavaScript中实现一个适配器功能

  介绍

这篇文章主要介绍了怎么在JavaScript中实现一个适配器功能,此处通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考价值,需要的朋友可以参考下:

JavaScript是什么

JavaScript是一种直译式的脚本语言,其解释器被称为JavaScript引擎,是浏览器的一部分,JavaScript是被广泛用于客户端的脚本语言,最早是在HTML网页上使用,用来给HTML网页增加动态功能。

<强>接入多个第三方SDK

举个日常开发中的例子,我们在做一个微信公众号开发,里边用到了微信的支付模块,经过长时间的联调,终于跑通了整个流程,正当你准备开心的打包上线代码的时候,得到了一个新需求:
我们需要接入支付宝公众号的SDK,也要有支付的流程

为了复用代码,我们可能会在脚本中写下这样的逻辑:

if  (platform ===, & # 39; wechat& # 39;), {   ,wx.pay(配置)   },else  if  (platform ===, & # 39;支付宝# 39;),{   ,alipay.pay(配置)   }//,做一些后续的逻辑处理

但是一般来说,各厂的SDK所提供的接口调用方式都会多多少少有些区别,虽说有些时候文档可能用的是同一份,致敬友商。

所以针对上述的代码可能是这样的:

//,并不是真实的参数配置,仅仅举例使用   const  config =, {   ,价格:10   ,goodsId: 1   }//,还有可能返回值的处理方式也不相同   if  (platform ===, & # 39; wechat& # 39;), {=,config.appId  & # 39; xxx # 39;=,config.secretKey  & # 39; xxx # 39;   ,wx.pay(配置),然后((呃,,数据),=祝辞,{   ,if (错),//错误   ,//成功   ,})   },else  if  (platform ===, & # 39;支付宝# 39;),{=,config.token  & # 39; xxx # 39;   ,alipay.pay(配置,data =祝辞,{   ,//成功   ,},err =祝辞,{   ,//错误   ,})   }

就目前来说,代码接口还算是清晰,只要我们写好注释,这也不是一个太糟糕的代码。

但是生活总是充满了意外,我们又接到了需求需要添加QQ的SDK,美团的SDK,小米的SDK,或者某些银行的SDK。

此时你的代码可能是这样的:

switch (平台),{   ,case  & # 39; wechat& # 39;:   ,//微信的处理逻辑   ,打破   ,case  & # 39; qq # 39;:   ,//QQ的处理逻辑   ,打破   ,case  & # 39;支付宝# 39;:   ,//支付宝的处理逻辑   ,打破   ,case  & # 39; meituan # 39;:   ,//美团的处理逻辑   ,打破   ,case  & # 39;小觅# 39;:   ,//小米的处理逻辑   ,打破   }

这已经不是一些注释能够弥补的问题了,这样的代码会变得越来越难维护,各种SDK千奇百怪的调用方式,如果其他人也要做类似的需求,还需要重新写一遍这样的代码,那肯定是很浪费资源的一件事儿。

所以为了保证我们业务逻辑的清晰,同时也为了避免后人重复的踩这个坑,我们会将它进行拆分出来作为一个公共的函数来存在:

找到其中某一个SDK的调用方式或者一个我们约定好的规则作为基准。

我们来告诉调用方,你要怎么怎么做,你能怎样获取返回数据,然后我们在函数内部进行这些各种肮脏的判断:

function  pay  ({   ,价格,   ,goodsId   }),{   ,return  new 承诺((解决,,拒绝),=祝辞,{   ,const  config =, {}   ,   ,switch (平台),{   case 才能;& # 39;wechat& # 39;://才能,微信的处理逻辑   config.price 才能=价格   config.goodsId 才能=goodsId   时间=config.appId 才能;& # 39;xxx # 39;   时间=config.secretKey 才能;& # 39;xxx # 39;   wx.pay才能(配置),然后((呃,,数据),=祝辞,{   ,,if  (err), return 拒绝(err)   ,   ,才能解决(数据)   })才能   ,打破   case 才能;& # 39;qq # 39;://才能,QQ的处理逻辑   时间=config.price 才能;price  *, 100   config.gid 才能=goodsId   时间=config.appId 才能;& # 39;xxx # 39;   时间=config.secretKey 才能;& # 39;xxx # 39;   config.success =,才能解决   config.error 才能=拒绝   qq.pay才能(配置)   ,打破   case 才能;& # 39;支付宝# 39;://,才能支付宝的处理逻辑   config.payment 才能=价格   config.id 才能=goodsId   时间=config.token 才能;& # 39;xxx # 39;   alipay.pay才能(配置,解决,,拒绝)   ,打破   ,}   ,})   }

怎么在JavaScript中实现一个适配器功能