这篇文章主要介绍了怎么在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中实现一个适配器功能