#“可插拔”组件设计，领略组件开发奥秘

从一个Confirm组件开始，一步步写出一个可插拔组件。进行正常的支付流程（如支付宝购买资金），点击购买按钮。如果风险等级不匹配：弹出确认框（Confirm）用户确认风险后：弹出支付方式选择弹窗（Dialog）选择支付方式后：弹窗调用指纹验证（Dialog）如果指纹验证关闭：提示是否输入密码(Dialog)弹出输入密码的键盘(customkeyboard)(customkeyboard)当然也有密码超时如果密码输入错误，修改/重试提示(Confirm)会弹出...键盘又弹出了大概6个弹窗...摊主（精简版）先尝试用普通的注册组件实现Confirm，通过v-model="isShow切换显示"，通过@onConfirm和onCancel接收点击事件。组件代码使用代码内容部分然后用它来完成上面的需求openRiskConfirm(){this.isRiskConfirmShow=true;},onRiskCancel(){这个。isRiskConfirmShow=false;},onRiskConfirm(){//this.openPaymeList();},openPaymeList(){this.isPaymentListShow=true;}//...blahblah//...大约需要3*6=18只有一个方法可以完成需求（其他请求类型不算）。如果可以接受，但是：如果监管放松了，风险就不用验证了？或者一开始没有验证风险，监管突然要验证风险？还是在app上不用，就不用调用指纹？或者想增加人脸识别功能？改代码会是一场灾难，因为即使业务代码是你写的，过段时间你也不一定能记住流程，而且代码好像没有什么连续性，只能一个一个地看。流行模式（简化版）以上业务流程，尽量使用比较流行的弹窗。组件：更改接收方法位置，从props放到$data中注册到全局importconfirmfrom'./confirm.vue'exportdefault{install:function(Vue){constProfile=Vue.extend(confirm);constPortfolioMsg=(options)=>{let$ele=document.createElement("div");文档.body.appendChild($ele);新配置文件（{数据（）{返回选项；}}).$mount($ele);};Vue.prototype.$confirm=PortfolioMsg;}}Callthis.$confirm({content:'Content',confirmTxt:'OK',cancelTxt:'Cancel',onConfirm:()=>{console.log('OK')},onCancel:()=>{console.log('Cancel')}})如何使用它来完成上面的要求会发生什么？这个.$confirm({content:'风险认证',cancelTxt:'再看一遍',confirmTxt:'同意',onConfirm:()=>{//somethingthis.$dialog({content:'指纹认证',slot:`

`,onFinish:()=>{//支付成功了？失败了？//something},onCancel:()=>{//somethingthis.$confirm({content:'密码认证',cancelTxt:'Cancel',confirmTxt:'OK',onConfirm:()=>{//somethingthis.$keyboard({//somethingonFinish:(password)=>{//密码加密//somethingif(/*密码错误？*/）{//重复//这段代码可以抽象成一个方法this.$confirm({content:'密码认证',cancelTxt:'Cancel',confirmTxt:'OK',//省略})}}})},onCancel:()=>{//Cancel}})}})},onCancel:()=>{//Cancel}})这样看起来清晰多了，代码量也少了很多，不需要注册全局组件可以通过在methods中封装一个方法来实现，这样更容易维护但是：有回调地狱吗？就是简单了点，能优化一下吗？抽象版ajax的回调地狱是通过Promise实现的，那么上面的组件回调地狱是不是也可以通过Promise实现呢？importconfirmfrom'./confirm.vue'exportdefault{install:function(Vue){constProfile=Vue.extend(confirm);constPortfolioMsg=(options)=>{let$ele=document.createElement("div");文档.body.appendChild($ele);constprofile=newProfile({data(){returnoptions;}}).$mount($ele);returnnewPromise((resolve,reject)=>{profile.$on('onConfirm',resolve)profile.$on('onCancel',reject)})};Vue.prototype.$confirm=PortfolioMsg;}}使用this.$confirm({confirmTxt:'OK'}).then(res=>{console.log('clickedOK')}).catch(res=>{console.log('clickedcancel')})那么回调地狱的问题就迎刃而解了，可读性非常高，中间的增删改查逻辑变得特别方便，维护成本也大大降低。具体的代码自己抽象出来可能会更好。你有其他的包装方式吗？请留言。最后译者写了一个React+HooksUI库，方便大家学习使用。React+Hooks项目欢迎关注公众号《前端进阶教程》，认真学习前端，共同进步。