- 博客(14)
- 资源 (1)
- 收藏
- 关注
RSS订阅原创 compression-webpack-plugin压缩前端代码&服务器nginx代理相关配置
compression-webpack-plugin压缩前端代码&服务器nginx代理相关配置
2022-12-02 19:39:06
1045
原创 前端导出word文件—包含canvas(echarts图表)
一、使用的插件html-docx-js二、整体思路因为canvas是运行在内存中的，所以不能简单的通过dom获取canvas图片，需要手动的先将canvas转为image。三、实现因为canvas是运行在内存中的，所以也不能通过cloneNode方法克隆下来（克隆下来是空的），所以先克隆再在克隆的dom上进行操作是不可取的。所以需要在原DOM上生成img，设置display: none从而使图片不影响页面展示，并插入到对应canvas元素之前（为了保证顺序不变）。此时，我们就可以使用clone
2022-05-16 15:41:46
2353
原创 代码分割（Code Splitting）
代码分割（Code Splitting）为什么要分割代码？代码分割有什么作用呢？答：两个方面。1、项目包含第三方依赖库以及自己写的代码，打包出的文件会比较大，在用户访问系统的时候，由于请求的资源比较大，所以会响应的比较慢，造成页面渲染缓慢，影响用户体验。代码分割以后，chunk会相应的变小，用户访问时，只需返回此页面相关chunk，再加上浏览器的并行请求策略，从而加快系统响应速度，优化用户体验。2、由于将第三方依赖库和自己写的代码打包到了一起，一旦我们修改了其中的一部分代码，整个chunk（包
2021-10-28 10:20:40
2001
原创 vue代码提交规范（commitizen/commitlint/husky）
第一步：安装commitizen使用commitizen提交时，会提示你在commit时填写所有必需的提交字段，无需再等待git commit 钩子运行就可以拒绝你的commit。全局安装commitizennpm install commitizen -g如果命令行直接输入cz没有出现如下内容的话，需要再运行下面的命令// npm使用如下命令commitizen init cz-conventional-changelog --save-dev --save-exact// ya
2021-10-20 14:57:12
1990
1
原创 柯里化（curry）
概念柯里化（Currying）是把接受多个参数的函数变换成接受一个单一参数(最初函数的第一个参数)的函数，并且返回接受余下的参数且返回结果的新函数的技术。比如函数 _f(a,b,c,d) 经过柯里化后可以使用以下方式调用：f( a )( b )( c )( d )f( a, b )( c )( d )f( a, b )( c, d )f( a, b, c )( d )…实现function curry (f) { const g = (...args) => { if (arg
2021-07-01 17:34:50
81
原创 切片上传（秒传、断点续传）
切片上传1. 文件切片将文件分割成指定大小的chunk，存储到数组中createFileChunk(file, size=CHUNK_SIZE) { const chunks = [] let cur = 0 while (cur < this.file.size) { chunks.push({index: cur, file: this.file.slice(cur, cur+size)})
2021-06-04 00:26:20
2061
原创 el-table span-method合并行后hover样式异常问题解决方案
思路：为表格新增字段myRowIndex，合并在一起的行myRowIndex值相同，添加方法监测鼠标所在行的myRowIndex值，动态将所有myRowIndex值为此值的行设置相同背景色。一、为合并行设置相同的myRowIndex将合并在一起的行（row）添加相同的myRowIndex，为后续根据myRowIndex动态设置类名做准备。此步骤可以在合并行的时候设置，由于合并行的业务代码不易理解，所以就不贴代码了。二、获取当前鼠标所在行的indexel-table有监测鼠标移入/移除单元格的事
2021-05-06 17:31:13
1595
原创 js实现深拷贝
function deepCopy (target) { if (target) { if (Array.isArray(target)) { return copyArray(target) } else if (target.toString() === '[object Object]') { return copyObj(target) } } return target}function copyArray (arr) { ret
2021-04-21 16:20:35
89
原创 数组扁平化（展开多层嵌套数组）
方法一arr.join(',').split(',');方法二const flatten = (arr) => { return arr.reduce( (prev, cur) => prev.concat(cur instanceof Array ? flatten(cur) : cur), [] )}
2021-03-04 17:33:14
491
2
原创 el-table使用v-if/v-show导致表格列不更新/更新异常
1、不更新问题解决方案：明确v-show使用的位置是否正确。v-show不能使用到template上，v-if则可以。注：v-show为什么不可以用到template上？因为template并不是真正的html元素，而v-show是控制的css样式（display）只能作用在html元素上，所以在template上使用v-show不生效。2、更新异常解决方案：为el-table-column添加key。如果不添加key可能会导致表格在使用v-if/v-show更新异常，所以请给每一列都添加key。
2021-01-09 16:19:48
1759
原创 get/post请求导出文件及各自的优缺点
一、get请求导出文件1、window.open(url)会自动打开一个标签页，下载完后会自动关闭这个标签页。Safair 是否会自动关闭标签页有待验证。2、window.location(url) 或 location.href = url在当前标签页下载3、< a href=“url” download=“filename”>点击链接下载< /a>在当前标签页下载...
2020-10-09 16:52:32
3626
原创 防抖和节流—应用场景及实现
防抖和节流防抖概念假定时间间隔为200ms，如果触发事件后的200ms内再次触发事件，则重新等待200ms，否则将成功执行指定函数。应用场景数据查询、监控用户输入代码实现function search() { var t = null; // 使用闭包 return function () { if (t) { clearTimeout(t); t = null } t = setTimeout(() => { console.log('执行
2020-09-05 15:25:23
259
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人