- 博客(14)
- 收藏
- 关注
RSS订阅原创 Graph设置node的ranker
问题表现最近在做一个流程图，绘图部分使用antd/x6,node的位置信息使用Graph生成，在完成基本功能开发后发现一个小问题，本来预期node是向上对齐的，但是Graph没有让本该处于同一ranker的node处于同一个ranker而是尽可能地提升node的ranker,造成了node向下对齐的效果， 问题如下图所示:4号node逻辑上应该处于ranker1,Graph却让它处于ranker2解决方案Graph不支持直接设置node的ranker,但是可以设置edge的minlen,..
2021-09-04 11:04:19
261
原创 webpack优化打包速度
let config = { externals: { react: 'window.React', 'react-dom': 'window.ReactDOM', }, scripts: [ 'https://gw.alipayobjects.com/os/lib/react/16.13.1/umd/react.production.min.js', 'https://gw.alipayobjects.com/os/lib/react-dom/16.13...
2021-08-01 18:42:21
237
原创 window.open无法打开新窗口
为什么要做这个东西最近做一个需求，前端请求一个接口，后台生成文件以后返回文件名，前端再通过window.open下载这个文件。发现window.open有时生效有时不生效，后来查阅资料后发现浏览器出安全方面的考量，会把用户操作完页面后一段时间内的window.open视为非法操作屏蔽掉，这个时间后来经过测试大概是五秒；如果接口请求比较耗时就会导致open被屏蔽。这里封装一个函数，用户操作完页面4.5秒后请求没有完成时先执行window.open，接口请求完成后替换新窗口的url完成文件下载。如果在4.5秒
2021-07-10 10:03:06
4341
原创 js缓存接口数据并设置有效时间
为什么要做这个东西？项目中一个组件会在useEffect中请求Options数据，最近做了一个新需求，一个页面中会复用这个组件好几次，就导致一个接口会重复请求好几次，入参也不尽相同，所以封装了一个函数用来处理这种情况。函数缓存每一个请求的返回的数据，并且在遇到相同路径相同入参的请求时直接返回缓存的数据而不请求接口，否则请求接口更新缓存数据。缓存有效期到了以后清除整个缓存池。代码xport function CreateCachePool(cacheControl = 5000) { const p
2021-07-10 09:33:22
1228
原创 通过keys数组更新复杂对象的值
最近在做一个复杂表单，表单通过后台返回的一个对象渲染，用户操作表单的同时更新此对象的值，用户提交表单时把对象传回，由于这个对象嵌套比较深，更新里面的一些value比较麻烦，于是封装了一个函数用来更新对象。函数接受三个参数，keys:作为寻址路径的key集合，key按照嵌套的由浅到深依次写入该数组中。value:要写入的值target：要修改的对象举个例子，有个对象object,现在要把它c属性对应的value改为2.const object={a:{b:{c:1}}方法调用updateOb
2021-05-18 21:44:42
111
原创 Umi中使用非npm库
1.将第三方库放入到public目录下2.在page目录下的document.ejs引入第三方库<script type="text/JavaScript" src="/iceEditor.min.js" defer="defer"></script>3.在packge.json修改lint-staged规则lint-staged": { "**/*.less": "stylelint --syntax less", "**/!(*min).{js,jsx,ts,t
2020-10-10 22:15:27
1046
原创 umi配置gzip
配置项目1.项目安装pluginyarn add compression-webpack-plugin -D2.config/config.js文件中添加配置 const CompressionWebpackPlugin = require('compression-webpack-plugin');const prodGzipList = ['js', 'css'];chainWebpack: config => { if (process.env.NODE_ENV === 'p
2020-08-26 22:21:47
2523
3
原创 sourceTree使用脚本一键push代码到gerrit
问题在gerrit,我们无法直接把代码push到对应的分支。需要把代码push到 HEAD:refs/for/brach,review通过后再submit到分支。所以无法直接使用sourceTree上的推送按钮来push代码。但是可以通过自定义操作和脚本来实现这一功能。脚本编写新建文本文档写入以下内容：# 获取当前分支名branch=`git symbolic-ref --short -q HEAD`# push reviewecho ${branch} git push origin HE
2020-08-26 22:01:40
2171
1
原创 js获取一段时间内工作日的天数
代码function workday_count(start, end) { let count = 0; let current = start; while (start < end) { const day = current.day(); if (day > 0 && day < 6) { count += 1; } current = current.add(1, 'd'); } return co
2020-07-26 10:34:04
2691
原创 AtndPro项目WebStorm配置stylelInt--AutoFix
问题背景项目是用的AntdPro的框架，自带stylelint,每次写完样式后都会检查样式的顺序结构，不对开发工具做配置需要自己手动调整样式顺序，劳神耗时。开始配置1.全局安装stylelintnpm i stylelint -g2.配置WebStorm打开settings找到File Watchers 点击右上的+号 选择 custom3.具体配置参数解释：Name:自己取一个就可以了。File Type:选择要校验的文件类型.Scope:需要校验的文件范围Program:
2020-07-19 10:09:13
1129
原创 yarn install 报错: python is not set from command line or npm configuration
问题表现：yarn install 中 提示环境中缺少python，手动安装之后提示缺少c运行环境，有点没完没了的感觉。解决方案：新建一个批处理脚本 保存命令 npm install --global --production windows-build-tools右键以管理员身份运行，接下来会自动安装Visual Studio Build Tools和 Python2.7文档地址：https://github.com/nodejs/node-gyp#on-windows...
2020-06-21 10:39:06
9024
原创 js中的异步
天生同步js一开始是被设计出来用于表单的校验的，早期的页面客户端功能单一，表单的校验需要由服务器来处理，为了提高效率和减小服务器的压力，js就被设计出来了。由于设计的目标比较低，js也被设计得比较简单：js被设计成了单线程，这样就避免了复杂的线程操作，但是js就没有办法做多线程的操作了。如何异步...
2020-05-19 21:22:31
279
原创 react使用高阶组件的方式封装一个remoteInput组件
1.什么是高阶组件？参照高阶函数的定义：高阶函数是一个接受一个函数作为参数的，可以操作其他函数的函数,我们可以把高阶组件做这样一个定义：高阶组件是一个接受一个组件作为参数的，可以操作其他其他组件的组件。2.如何实现一个高阶组件?我们往往把高阶组件定义为一个函数组件，因为通过使用函数我们可以很方便接受一个组件作为原始组件，然后返回一个新的组件，在这个新组件中挂载渲染原始组件，同时传入所有的pr...
2020-04-18 21:06:05
864
原创 通过reduce实现redux中的compose
通过reduce实现redux中的compose在es6中,我们可以使用promise来解决‘回调地狱’的问题，但是在一些应用场景中我们还会遇到另一种‘地狱’：函数的深度嵌套调用，此时我们就可以用compose函数来扁平化这种调用，提升代码可读性。提出问题假设有这么一段代码：function f1(data) { console.log('f1执行') return data+...
2020-04-07 19:30:59
657
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人