项目中的配置文件的实现逻辑

103 阅读2分钟

参与一个可视化低代码的项目,项目有自身的配置文件,页面内部是有各个组件拼成,组件也有自己的配置文件。

项目的配置文件

通常用来配置各个客户之间显示异常的部分,如:项目的名称、某些数据刷新间隔、是否开启https等,在初始时将这配置写入localstorage,在项目模板页中引入此js。

组件的配置文件

组件有自己的配置的文件,export default {//固定对象},编译时将配置文件的数据一起打包进去的。 需求:某地图组件echarts实现,区域数据为引入的geoJson,要求可动态添加其区域(省份城市)。

此前组件配置文件都是静态,现在要处理此为动态配置的情况。

  1. 组件的配置文件动态读取的内容应该从接口获取,毕竟去服务器改dist中文件配置的操作不合理。 组件的配置导出为一个function, 在可视化编辑页或展示页加载时,执行这些func,将组件的配置文件存到models/global.js.

  2. 考虑一下非要实现怎么做? 地图的json文件会有很多个,想要一下将json列表全部引入,使用js的导入导出,创建配置文件js(内部 import xx from '.json', 将导入结果生成的对象挂到window上,组件配置导出方法,编辑或预览时执行方法来动态取配置)可以初始时头部引入type="module"的js, 但是, ES Module默认异步加载,无法保证加载时间,执行方法时会读不到! 所以可修改json文件的引入时机。 配置的js中可只保存城市json的文件名和非json信息,以便随时使用,将文件名配置写入到window.mapConfig,中同步引入此js。在组建内部fetch加载地图json.

组件配置文件导出格式

如果组件配置文件导出的是个promise,那么由于promise的传染性,后续引入后必须一层一层的.then,需要多次导入导出时不便处理,故配置文件导出内部有异步的函数。

延伸

组件的配置文件可都通过接口取到。