自定义博客皮肤VIP专享

*博客头图:

格式为PNG、JPG,宽度*高度大于1920*100像素,不超过2MB,主视觉建议放在右侧,请参照线上博客头图

请上传大于1920*100像素的图片!

博客底图:

图片格式为PNG、JPG,不超过1MB,可上下左右平铺至整个背景

栏目图:

图片格式为PNG、JPG,图片宽度*高度为300*38像素,不超过0.5MB

主标题颜色:

RGB颜色,例如:#AFAFAF

Hover:

RGB颜色,例如:#AFAFAF

副标题颜色:

RGB颜色,例如:#AFAFAF

自定义博客皮肤

-+
  • 博客(15)
  • 收藏
  • 关注

原创 微前端框架SingleSpa Vue实践

一、主应用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) => {

2021-12-30 11:18:08 1457

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

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

2021-12-14 15:12:08 4070

原创 node批量处理大量图片

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

2021-09-18 10:54:57 1518

原创 Vue Angular框架接口调用管理

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

2021-01-23 16:19:41 1866

原创 Echarts饼图实现与引导线间的间隔

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

2020-12-18 15:05:59 4089 2

原创 JQ实现Ant Design 全局提示message效果

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

2020-07-18 15:25:00 1160

原创 JQ借鉴实现Ant Design loading效果

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

2020-07-18 14:53:40 505

原创 js判断多个时间段是否重叠(非嵌套循环)

考虑到性能问题,未采用嵌套循环判断的方式。主要思想是:对每组时间进行标记,然后转换为时间戳后排序,排序后的数组,步长为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

2020-06-15 19:44:45 3165 4

原创 JS解析判断表达式(AST方式)

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

2020-06-06 16:59:20 2829

原创 Ant Design DatePicker组件DisabledDate传参设置开始日期和结束日期禁用

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

2020-06-06 16:08:14 3999

原创 js实现从服务端获取word并预览

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

2020-05-11 09:24:55 1525

原创 Angular实现数字向上滚动效果组件

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

2020-03-28 14:47:06 1756 4

原创 Css实现带阴影的箭头框

通过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, ...

2019-12-09 20:39:48 1617

原创 父级页面监听iframe点击事件

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

2019-12-09 16:21:59 5468

原创 canvas动态绘制渐变色环形百分比

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

2019-11-13 17:30:26 2594 1

空空如也

空空如也

TA创建的收藏夹 TA关注的收藏夹

TA关注的人

提示
确定要删除当前文章?
取消 删除