命令式调用弹窗

121 阅读3分钟

1、从按钮组配置化,事件处理机制,联想到的,按钮点击触发弹窗事件,想到的,可以用命令式Modal来解决弹窗事件的配置化

2、因此想到的,还有接口请求的配置化,以及其他通用事件的配置化,比如说啥?还有啥事件?哦,路由跳转事件,然后呢,还有啥事件?

3、实现基础

  • webpack require.context,收集弹窗组件文件,本来以为还要我自己写一个工具包,但是,实际上并不需要,因为webpack会自己执行组件文件收集,直接利用现有的webpack的能力就行了,我现在的业务开发原则是,尽量不增加额外功能的引入
  • 如何暴露出来呢?vue可以挂载在全局this直接调用,如果我想在react中也实现挂载在全局,怎么挂呢?全局的Provider?但是这样会侵入项目工程的基础配置层的代码,这显然也是不合理的,如果需要做全局注入,也应该是项目初始化的时候,现在肯定是不适合了
  • 等下,我想到了,可以走状态管理流,这样只需要单独注册一个状态管理,再dispatch这个状态数据,就可以做弹窗状态管理,把弹窗事件,当成一个状态管理事件,哦,所以还有一个通用事件,是状态管理事件,
  • 而且,上一个点的依据是,message.success,也是需要在代码中引入message组件的,确实是可以在全局中注入,但是目前的基础配置,是不适合更改的,不如暂时借用这种方案,走代码引入store的方案,或者其他全局的状态管理方案
  • 而且,接口请求事件的配置,其实也是要走主组件模块引入的
  • 而且,我自己本人现在也是不太支持,什么都做成全局集成一把梭的方案,正如我之前在service配置时,意识到的一条规则:这些基础配置的源代码,应该要尽量暴露,这样可以快速直达底层代码,不建议一层一层的叠buff,像这些底层组件的引用,也最好是能平铺且直达--等下,这里我不会弹窗组件也要求暴露吧?啊啊啊,暴露也行,但是不暴露显然更好啊,但是这样就违背了我的组件平铺的原则了啊,啊啊啊,但是暴露的话,怎么处理呢?

4、弹窗内部的UI和逻辑,都是独立的,由弹窗组件自己维护的,外部wrapper,只做三件事:

1、弹窗的显隐配置

2、initData传入 -- 融入到 props中

3、config props传入,包括抛出数据方法的传入,实际上形式和2是一样的,要做成一样的,还是做成配置集成的?

实践方案: