- 博客(53)
- 收藏
- 关注
RSS订阅原创 使用 intersectionObserver 实现图片懒加载
这样我们就实现了图片懒加载的功能，也证明了 intersectionObserver 的强大，是时候抛弃掉传统的 监听 scroll 事件来实现懒加载功能了~intersectionObserver确实是个很实用的 api ，我们可以基于它很方便的实现图片懒加载功能，如果没了解过的童鞋可以看看阮一峰大佬的文章。实现其实很简单，主要就是要通过单例模式来减少多次实例化，优化性能。PS：如果需要考虑兼容性问题的话可以使用官方的 polyfill。接下来废话不多说，直接上代码。
2024-12-08 22:43:44
317
原创 解决文件名超出时中间显示省略号，中文名与英文名长度显示不一致问题
通过判断当原本的文本 dom 高于右侧高度时，说明发生了换行，这时候不需要显示原本文本，所以进行隐藏，反之则显示。实现原理可以参考这里~
2024-12-08 21:20:08
258
原创 electron-builder 首次执行报错问题解决
假日想研究一下 react + electron 的使用，结果发现首次打包疯狂报错，研究了一下之后才发现是第一次的话 electron-builder 会从外面下载依赖包到我们系统中，由于某种力量导致压缩包无法下载或者是下载过慢导致失败，要解决其实也简单，给我们的 npm 加上。使用的端口，这样子就能正常下载了，不行的话可能就得自己去下载对应的压缩包放在对应的位置了（不展开细说，网上有很多）最后，关于初始项目的搭建，我推荐从这里直接拿一个，可以减少手动搭建的步骤，确实还是有点麻烦的hh。
2024-10-04 18:38:19
752
原创 leetcode算法题之 K 个一组翻转链表
pre变量保存上一个节点，初始值为null，cur变量保存当前节点，初始值为我们传进去的节点，每次遍历时用next变量保存下一个节点，然后把当前节点的next值指向上一个节点即可，直到cur变量为null，我们返回pre，即是最后一个节点。end为结束节点，当遍历到时，停止遍历返回即可，如果刚好是链表最后一个，那end为null，就和我们上面的代码一致。有了这个方法接下来的事情就简单了，我们只需要遍历链表，当节点到k时，传进去反转即可。你不能只是单纯的改变节点内部的值，而是需要实际进行节点交换。
2024-08-31 16:35:43
500
原创 LogicFlow实现使用vue组件进行自定义节点
LogicFlow是一款很好用的流程图编辑框架，也支持根据html来自定义节点，但是当我们的节点比较复杂时，我们可能更倾向于用vue组件来实现这个功能，现在LogicFlow官方使用vue3的Teleport组件实现了类似的效果，有兴趣的可以先去看看。PS: 这个方法是早期基于官方只有html节点的实现方法，随着官方的迭代更新，后面还是推荐用官方的哈。这样我们就可以愉快的在NewComponent组件中进行各种操作啦。vue2没有Teleport组件，需要额外的插件来实现类似的功能。
2024-08-31 13:14:20
1345
原创 使用html-docx-js + fileSaver实现前端导出word
PS：如果遇到样式问题的话，比如图片宽高（需要使用img标签的width和height属性），字体大小（需要使用pt）不生效的话，可以先把对应的docx模板转成html查看样式后再对应进行修改。因为html-docx-js是16年的老库了，它代码里面用到的with语法现在严格模式不允许，用npm直接引入会报错，所以我们需要用其它方式引入。代码里面几个with的用法需要改一下，因为现在都是默认严格模式了。接下来到项目的html文件中，使用script标签引入。，然后把涉及到的都改成类似如下的即可。
2024-08-18 21:24:48
819
原创 leetcode算法题之N皇后
接下来的问题就是我们要怎么判断当前位置可不可以放置皇后，有的童鞋可能想着所有方向都遍历一下，其实不用这么麻烦，因为我们是由上往下放置，所以只需要判断左上，上，右上的方向就可以啦。既然说到回溯，那肯定涉及到剪枝问题了，其实也不用做啥，当我们发现某一行无法放置任何皇后时，我们什么都不做，直接回溯到上一行即可。，不然不会有满足题目的解，所以可以把每一列当作一层，把皇后放置后再到下一层继续放置，基本代码如下。按照国际象棋的规则，皇后可以攻击与之处在同一行或同一列或同一斜线上的棋子。的棋子放置方案，该方案中。
2024-08-17 17:14:31
416
原创 leetcode算法题之接雨水
而x轴上每一块区域能承载多少雨水取决于它左边和右边的最大高度值以及它的自身高度，所以我们可以先维护两个数组leftMaxArr和rightMaxArr。知道了x轴上每一块区域的左右高度最大值后那这个子问题就很简单了，我们先定义一个子问题的结果数组result，那么公式可以这么写。最后将这个result数组的值加起来，就是本道题的结果了，当然，我们不需要使用到result数组，用一个变量维护即可，代码如下。的柱子的高度图，计算按此排列的柱子，下雨之后能接多少雨水。个非负整数表示每个宽度为。
2024-07-23 20:54:55
602
原创 源码解析之p-limit（限制异步任务并发数量）
p-limit是一个用于限制异步任务并发数量的javascript库，可以有效地管理资源并避免系统负载过高。源码实现其实也不复杂，主要使用了队列 + 变量来控制。
2024-05-28 22:17:01
461
原创 vue3 + vite 实现一个动态路由加载功能
它能通过我们提供的路径动态引入相关的组件，如果我们传入了../views/**/**.vue，它返回的相关格式是这样子，这样的话就可以用过路径获取相关异步导入组件的函数了。PS: 如果退出登录需要清除动态路由的话，因为现在vue-router没有提供可以直接清空的方法，所以可以考虑返回登录页后刷新一下界面来解决~最后在main.js里调用一下setupPermission方法就行~在vite里主要使用到的方法是。假设后端返回的格式是这样子。
2024-03-20 01:51:01
839
原创 el-table出现cannot read property ‘key‘ of undefined
起因：线上项目突然反馈说有列表卡死的情况，紧急排查了一下，发现是返回了重复的列表id了，而且我们使用了rowKey属性，所以卡死了。这是后端迁移的数据，是正常的，所以得我们解决…解决方案：获取数据时我们手动给列表设置一个不重复的id// 假如table数据是data，页数是page，数量是limitdata.forEach(item => { item._id = `${item.id + (page * limit)}`})这样子就能保证每个id不重复并且翻页时id都能对得上了~
2022-01-23 22:00:55
1897
原创 2021-10-07 算法题学习01
1.给定一个整数数组，判断是否存在重复元素。如果存在一值在数组中出现至少两次，函数返回 true 。如果数组中每个元素都不相同，则返回 false 。解法1.ES6var containsDuplicate = function(nums) { return new Set(nums).size !== nums.length};2.哈希表（空间换时间）var containsDuplicate = function(nums) { const set = new Set()
2021-10-08 00:43:32
67
原创 2021-10-04 前端性能优化方法
文章目录前言1、GZIP1.1、使用步骤2、CDN2.1、使用步骤2.读入数据总结前言随着代码数量越来越多，如何加快项目浏览器中的运行速度，减少用户的等待时间便成为了很重要的一个方面，以下是我经过实践后的几个方法1、GZIPGZIP可以对文件进行压缩，压缩比例到3到10左右，是很实用的压缩方法1.1、使用步骤因为我们目前的项目比较老，使用的是vue-cli2.x的版本，所以只需要在vue-cli2的config.js文件中进行如下配置并安装compression-webpack-plugi.
2021-10-04 03:24:55
101
原创 vue+element+vue-cropper实现上传裁剪功能
在用户上传前在before-upload钩子获取files文件，然后中断上传操作beforeAvatarUpload (files) { this.filename = files.name this.openCropper(files) return false}然后在openCropper方法中用FileReader对读取文件并打开自己的cropper组件openCropper (file) { var _this = this var reader = new FileR
2021-03-10 10:11:54
658
2
原创 文本节点超过父元素 解决办法
当我们的文本节点内容是英文或者数字时，它默认是不会换行的，如下图有两种解决办法1.省略号三件套text-overflow: ellipsis;overflow: hidden;white-space: nowrap；2.css设置word-wrap： break-word这样就会在达到父元素的宽度后进行换行了！注:在网上看到有个break-all属性，但是chrome浏览器试过后并没有...
2020-09-24 14:57:58
535
原创 VSCode：设置格式化不加分号，使用单引号以及函数和括号之间有一个空格
首先安装Prettier插件，不过格式化文档还是要选择Vetur在VSCode的settings.json添加如下配置“vetur.format.defaultFormatterOptions”: {“prettier”: {“semi”: false,“singleQuote”: true}},“vetur.format.defaultFormatter.js”: “vscode-typescript”,“javascript.format.insertSpaceBeforeFuncti
2020-06-26 17:18:24
5671
转载 element-ui el-table翻页不丢失选中状态
https://blog.youkuaiyun.com/Ms_alinda/article/details/102861781?utm_medium=distribute.pc_relevant_t0.none-task-blog-BlogCommendFromMachineLearnPai2-1.nonecase&depth_1-utm_source=distribute.pc_relevant_t0.none-task-blog-BlogCommendFromMachineLearnPai2-1.none.
2020-06-17 15:15:14
1629
原创 Blog: 用element-ui表格实现可在表格内编辑，修改数据
实现效果如下：更改完数据也改变了<template> <el-table :data="tableData" @cell-dblclick="handle" style="width: 100%"> <el-table-column prop="date" label="日期" width="180"> <template slot-scope="scope"> <div v-if="!scope.row
2020-06-16 23:10:01
7489
12
原创 Blog： 做了个简单的h5列表拖动demo(2)
<template> <div class="wrap"> <div class="list-wrap"> <div id="list" class="list"> <div :id="item" class="list-item" draggable="true" v-for="item of list" :key="item"> {{ item }} </div&
2020-06-14 18:30:37
274
原创 Blog： 做了个简单的h5拖动demo
<template> <div class="wrap"> <div class="list-wrap"> <div class="list"> <div class="list-item" draggable="true" v-for="item of list" :key="item"> {{ item }} </div> </div>
2020-06-14 12:39:28
184
原创 学习blog：Vue实现路由懒加载以及将组件打包到一个模块中
目前Vue Router官方推荐的懒加载形式是这样const Foo = () => import('./Foo.vue')const router = new VueRouter({ routes: [ { path: '/foo', component: Foo } ]})当然你也可以直接这么写const router = new VueRouter({ routes: [ { path: '/foo', component: () => impor
2020-06-05 18:38:12
363
原创 学习ts blog：对ts学习过程中的一些记录
1.函数的重载function getInfo(name: string):string;function getInfo(name: string, age: number):string;// 不符合上面两种格式会报错function getInfo(name: any, age?: any):any { /* code... */}2.抽象类// 抽象类不允许实例化，只能extends继承abstract class Animal { public name: string
2020-05-28 00:35:00
161
原创 对原型链、prototype和__proto__的一些理解
之前看到原型链虽然大致上会有些理解，但是还是会有些凌乱，不能很好的总结，今天深入地去做了一下了解，并做一个小总结。1.原型链和__proto__原型链实际上是通过__proto__这个属性去实现的，当我们调用一个方法时，如果没有，它就会向__proto__指向的位置去找，直到__proto__指向的值为null的时候还没有找到，就会返回错误，这也就是我们所说的原型链。比如我们定义一个对象A：let A = {}当我们调用A.valueOf()时，在A对象里并没有这个方法，它就会去A.__prot
2020-05-25 20:32:28
178
原创 前端开发--SEO优化
SEO优化是我们前端开发中非常需要着重了解的一个方面，因为很多公司都会有这个需求就是提升网站在搜索引擎中的排行，所以一定要在开发前先询问一下是否需要这点，这对我们后面框架的选择很重要！SEO优化的方法如下：1.也是非常重要的一点，一定不要使用单页面应用，如Vue，React，它们在SEO方面是非常非常差的，这也是单页面应用最大的缺点，不过有基于它们的两个框架可以解决这样的问题，如Vue的Nuxt.js，React的Next.js2.在每个页面的Head标签下的Meta标签进行设置合理的title、de
2020-05-13 13:28:14
442
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人