PGD_607的博客

一、主应用1、npm i single-spa 安装single-spa；2、增加single-spa的配置文件single-spa-config.js：// single-spa-config.jsimport * as singleSpa from 'single-spa'; //导入single-spa/** runScript：一个promise同步方法。可以代替创建一个script标签，然后加载服务* */const runScript = async (url) => {

前端兼容处理接口返回的文件流或json数据

因为瓦片地图的颜色问题，需要对大量地图图片进行颜色处理。前端处理可以利用canvas，然后转为Base64，调用接口保存，但是需要前后端配合，递归读取文件，处理后进行保存，由于chrome对同一server的http请求数量最多只有6个，限制执行效率，所以采取纯服务的方式。 图片处理依赖node-canvas库，最开始采用异步IO的方式，导致程序启动后读取所有文件，程序崩溃，后面改为同步方式，并采用多进程单线程负载均衡。工程包括 config.js配置文件，master.js主进程文件，worker..

在vue项目中，避免接口调用混乱，难以维护，采用接口配置的方式统一管理。主体思想为：调用接口时使用统一入口，通过配置进行调用。实现如下：项目中新增interfaceService文件夹，新增接口配置文件interfaceConfig.js：export default { basePath: '/', mockBasePath: './static/mockData/', // 前端独立分离开发配置 FEIndependence: false, data: { getIntro: {

目标效果（连接线与饼图存在间隔）：Echarts饼图label配置为outside时，默认连接线与图形直接相连：实现方案：绘制时，同时绘制两个半径不同的饼图。一个只显示饼图（半径较小），不显示label；另一个饼图（半径较大），设置为透明，只显示label和连接线。Echarts series的配置：option.series = [ // 只显示饼图，不显示label和连接线 { type: 'pie', startAngle: 180, minAngle: 15, rad

效果：js代码：/** 操作提示框： 成功、失败、提示* imgSrc: 对应图片* message: 提示文本* $parent: 父级容器* css: 样式*/function message(imgSrc, message, $parent, css) { var $exTips = $('<div class="exTips autoHide">' + '<img src="' + imgSrc + '" class="tipImg"&g

新老项目统一，但是旧的项目无法引入ant-design，所以封装与ant-design loading样式一致的方法。js代码： /** * 数据loading加载效果 * @param: {[string]} container [加载loading的容器，如".box","#box"] * @param: {[string]} display [show:显示loading，hide隐藏loading] * @param: {[number]} top

考虑到性能问题，未采用嵌套循环判断的方式。主要思想是：对每组时间进行标记，然后转换为时间戳后排序，排序后的数组，步长为2循环，如果每两个的标记不同，或者存在相同时间，则说明重叠。// 预计时段数组const data = [{ startTime: new Date("2020-6-15 00:12:00), endTime: new Date("2020-6-15 09:12:00),}, { startTime: new Date("2020-6-15 06:12:00), endTime

项目中需要解析表达式，如 ( A > ( B ) ) || (C > (D + E * F - 2) ) 。 公式存在一定规则： 为了确保公式的正确性，在生成公式中每一项时会使用括号进行包裹，如( A > ( B ) ) 和 (C > (D + E * F - 2) )， 同样内部比较符的右侧公式也会进行包裹如： ( B ) 、 (D + E * F - 2) 。 并且公式中条件全为||或者全为&&。第一想到的是抽象语法树（AST），使用到的类库：esprima，

在项目中使用Ant Design（of Angular）的DatePicker组件实现开始时间和结束时间功能时，希望通过nzDisabledDate限制开始和结束时间的选择，查阅API后发现该参数类型是一个默认入参，返回boolean值的函数。就存在一个问题，存在多组开始和结束日期时，点击开始时间，怎么把对应结束时间传递给函数，从而限制开始日期<结束日期，禁用不符合条件的日期。于是想通过 (nzOnOpenChange) 弹出日历和关闭日历的回调事件来获取开始 | 结束日期。<div *

word转为html依赖mammoth.js（缺点是只能保留基础样式，word的复杂样式会丢失。复杂文件还是交给接口处理比较好）预览本地文件Demo： https://jstool.gitlab.io/zh-cn/demo/preview-ms-word-docx-document-in-browser从服务端获取word并实现预览： function preView(url) { var _this = this; var xhr = new XMLHttpRequest() xhr.o

大屏中数据刷新要求像电表一样滚动更新效果。 由于大屏中使用较多，选择封装为一个可复用组件。主要思想： 将宿主组件传入的值，分解为独立的数字和小数点，每个数字Dom由宿主css样式决定宽度，并生成一个子级的滑块，通过数字的大小设置transition进行滚动。效果如下：html部分：为了满足数字滚动时先滚动一圈，然后在滚动到对应值的需求（避免0值无动画），numberSlider滑块中重复了一...

通过html + css实现带阴影的三角箭头框，如下：html<div id="tips"></div>css#tips{ position: relative; width: 165px; background-color: #FFFFFF; box-shadow: 0px 0px 8px 0px rgba(0, 0, 0, ...

通过contentDocument属性定义和用法：contentDocument 属性以 HTML 对象返回框架容纳的文档。语法：frameObject.contentDocumenthtml:<iframe id="iframe" frameborder=0 scrolling="no"></iframe>父级页面js:document.getEleme...

canvas动态绘制渐变色环形百分比项目中需要根据数据动态绘制渐变环形百分比（非线性渐变和放射渐变），代码基于Vue。将100%的渐变环形图设置为Pattern，进行绘制。// 注册环形百分比组件Vue.component("v-ratechart", { props: { rate: Number, count: Number, imgsrc: String }, dat...