changjingli
commented
4 years ago
- vueRouter减少数据加载的具体做法？是否还有改进空间？能否抽出一个小工具复用？如果可以抽出来，请附上github与npm包
做法： 在router发生变化的时候，检查vuex里是否存在数据。没有的话dispatch action发出请求，并返回一个promise，等数据获取完毕后调用next()跳转到相应页面；数据存在时直接调用next()跳转到相应页面。
改进空间： 将该操作提取为一个公共函数，公共函数返回一个Promise，通过监听then、catch判断值是否符合预期。
- 移动端如果要看数据会新做一套吗？代码需要哪些改动？
移动端如果要看数据，需要新做一套。 因为现在的UI、产品都是基于PC端设计的。尽管如此，目前通过在head里动态设置viewport，使得移动端暂时也可以正常访问。
目前的代码如需适配移动端过程中，个人感觉主要是产品上的修改、其次是CSS方面的调整。比如数十列的表格、复杂的组合下拉筛选、通过模态框自定义导出数据等较为繁琐的功能，在移动端在操作起来比较费力。
如果基于现有代码进行适配，前端工作量在UI适配方面，可以通过js给公共容器添加desktop、mobile等类名或通过link媒体查询加载不同平台样式表；如果需要重做一套，答案参考问题4。
将公共的组件的样式抽离，使组件样式可以动态设置，通过复用减少额外的组件维护负担。
- 为什么echarts移动端和pc端在一个库里，而antv会选择将pc端和移动端拆分做？
由于项目没有移动端需求，加上自己从2016年开始使用echarts，所以项目选择echarts进行图表渲染。
项目开始之前，粗略看过AntV官网。AntV在流畅度、细粒程度、图像细腻程度等均优于echarts，但可能由于细粒度高的原因，同样显示一个柱状图，AntV的代码要比echarts多很多。
在回答该问题的过程中，看到了G2Plot图表，继承了AntV所有优点同时使用上更加简洁，后续项目会根据情况考虑入手。
- 图表组件库如何抽离，组件化思路是怎样的？
同一种类型图表的在渲染过程中，绝大部分的代码都是重复的，我把这些重复的代码提取成一个组件，将变化的部分提取为props。整个渲染过程交给图表组件、父组件仅需提供相应参数即可，无需关心渲染过程。
目前图表组件库是根据 业务 拆分的，如趋势折线图、离职原因占比等，里面的配置项也是根据业务情况写死的。组件渲染流程如下：
- 为组件内根容器样式
height: 100%，使父级可以控制其尺寸； - created：为组件根元素生成唯一id，供echarts初始化使用。
- mounted：初始化echarts实例，
data值有效的情况下绘制图表 - watch
data：数据发生变化时重新绘制图表
未来图表组件将会更详细抽离，通过封装类似<bi-pie>, <bi-line>, <bi-bar>等组件，使业务代码不依赖具体具体图表库，提高灵活性。使用逻辑如下 view -> component(可选) -> <bi-pie> -> (ECharts || AntV || Ohter)
- 整个BI项目的前后端技术架构是怎样设计的？
简易架构图如下：
vianvio
问题列表：