- 博客(55)
- 收藏
- 关注
RSS订阅原创 理解vue2中的响应式数据
通过首次渲染组件中将数据处理成响应式数据的逻辑来理解vue2中的响应式数据，主要是使用了Object.defineProperty()数据劫持，Dep类进行依赖收集与订阅通知，Watcher类进行视图更新与依赖更新等。
2024-03-31 22:13:30
507
原创 理解vue中mounted生命周期函数一定会拿到挂载的DOM
所以mounted生命周期钩子函数的执行一定是在DOM挂载完成之后，在此函数中可以获取到DOM对象。
2024-03-30 10:08:15
259
原创 video/pdf文件预览与进度上传
视频文件直接使用video标签预览，和后端设定的是学员在观看视频时，前端会5秒钟上传一次进度，记录学员当前视频所学的进度，当视频观看完成时会立即触发一次进度上报接口。pdf/word/excel等文件，后端会统一处理返回pdf文件格式，前端使用pdfjs库进行文件预览。在翻页时进行进度上传，对于频繁的滚动翻页会进行防抖处理。
2024-03-24 21:58:19
380
原创 前端实现生成图片并批量下载，下载成果物是zip包
项目上有个需求，需要根据表单填写一些信息，来生成定制的二维码图片，并且支持批量下载二维码图片。之前的实现方式是直接后端生成二维码图片，点击下载时后端直接返回一个zip包即可。但是项目经理说后端实现方式每次改个东西都要改大半天，所以让前端来实现。
2024-03-08 15:47:45
606
原创 vscode的扩展商店使用时报错 XHR failed
这几天使用vscode扩展商店安装插件时发现一搜索就报错，网上搜了一些解决方法，看起来不大靠谱。而且用了好几年了vscode都没出现过这个问题，感觉是网络问题。
2024-01-28 17:31:01
557
原创 使用fabric.js实现对图片涂鸦、文字编辑、平移缩放与保存功能
项目中有个需求，需要对图片附件进行简单的编辑操作，如涂鸦、添加文字、拖动与缩放图片、旋转图片、保存图片、上传图片等。经过技术选型对比，决定使用fabric.js开源库
2024-01-04 18:56:43
2140
原创 使用fetch封装get与post方法
网上看了一些对fetch的封装，有点看不伶清。如在request中配置timeout与responseType字段等，在文档上找根本找不到。于是自己封装个简单版的fetch，方便拿到项目中改造一下就可以使用。
2023-11-25 21:42:52
466
原创 高德地图JS API升级到2.0版本
项目上反馈高德地图底图信息更新不及时，不利于进行点位规划。经研究发现高德地图JS API 1.4.15版本相对于2.0版本，确实地图切片上的标注信息较少。通过工单的形式询问高德的技术工程师认识到1.4.15版本数据更新有延迟，1.4.15版本地图的数据以季度为周期更新，2.0版本的按月更新。于是将产品中的高德地图从1.4.15版本升级到2.0版本，但是在地图版本升级时碰到了一系列的问题，将碰到的问题以及问题的解决措施记录下来，方面后期的维护工作。
2023-07-28 15:57:25
908
原创 电脑正常连网却打不开浏览器网页
某天晚上下班回家突然发现我的华为笔记本电脑的浏览器打不开网页了，以为连接的wifi有问题，换到自己的手机热点还是打不开网页，但是能登陆微信等，百思不得其解。
2023-07-01 23:14:36
383
原创 使用resize属性实现元素拖拉改变宽度
地图页面左侧全量树新需求，想要实现左侧树的拖拉效果，方便用户使用。查阅资料发现使用js逻辑，通过监听鼠标按下、移动、抬起事件等进行处理可以实现，但是考虑到地图页面的性能已经吃不消了，于是不使用此方法实现。之前看过相关css中的resize属性使用的文章，查看有关博客感觉可以实现元素的拖拉效果，于是使用resize属性进行功能实现。
2023-06-14 19:41:28
741
原创 js实现复制二维码
项目中有一个二维码复制功能，首先是根据所选择的组织与邀请成为的角色，后端返回一个二维码数据链接，将二维码渲染展示在页面上；然后在点击复制按钮时可以复制二维码，在其它的地方可以直接粘贴使用。复制二维码还不是简单的复制二维码图片，而是还要加上一些其它的描述西信息，如邀请进行的项目、邀请到的组织、邀请成为的角色等，这些信息和二维码一起转成一个图片进行复制。
2023-06-08 23:24:59
699
1
原创 dom-to-image的图片跨域等问题解决
在项目开发中用到了将相关dom元素转为一个base64格式的图片链接，进行后续预览功能。本地开发时一切正常，放到线上环境中发现了2个问题，一个是线上加载http链接资源的问题，一个是图片的跨域问题。
2023-06-02 16:24:08
2271
原创 基于canvas的平移缩放进行面的绘制
首先是先创建一个canvas元素，让canvas元素的宽高与父容器的宽高一样，并支持响应式。还有给canvas元素添加一些监听事件。// HTML部分 < div class = "canvas-container w-full h-full relative" > < canvas。
2023-03-05 23:56:24
857
1
原创 pnpm的浅了解
没学过相关的计算机基础，对于一直火热pnpm很好奇，但是对其中的硬链接与软链接等专业词不怎么理解。看了王老师讲的pnpm，理解了一些，记录一下。
2022-11-12 12:34:27
814
原创 基于高德引擎的天地图切片加载
高德地图坐标系是火星坐标系，而天地图是84坐标系，两种不同的坐标系地图是无法直接使用切片加载的方式共同使用的。已实现的地图相关功能都是高德地图引擎进行开发的，怎样引入天地图，同时又可以直接使用已有的地图功能成为了设计难题。初始设计方案是引入天地图引擎，进行天地图切片的加载。对于基于高德引擎提供的JSAPI实现的地图相关功能，使用天地图引擎提供的API重新实现一遍即可。但是此方案的成本有点高，开发周期不可控，而且以后地图新增功能点时都要使用这两种地图引擎分别实现功能点，维护成本高。
2022-11-07 00:55:41
2159
原创 CommonJs与ES6的导入导出细节
之前看过一篇CJS与ES6的导入导出文章，发现自己看不懂，平时项目上都是基础的导入导出使用，根本没考虑其中的细节，导致有没有写过bug自己也不知道。此文记录一下使用时的注意点。
2022-10-21 00:51:42
1097
原创 高德地图JSAPI点位相关操作
点位渲染分为聚合点位渲染与非聚合点位渲染，聚合点位只需要绘制在地图上即可，非聚合点位在绘制在地图上后还需要监听点击等事件，进行后续需求梳理。点位的渲染采用自定义点位内容content的形式，根据不同的点位图标渲染成不同的点位样式。自定义点位内容content// 方式一，css中自己写content的样式 marker = new window . AMap . Marker({
2022-09-28 17:12:58
1054
原创 地图经纬度坐标转换
本篇的坐标系转换主要是GCJ02坐标经纬度与WGS84坐标经纬度的相互转换，为了追求转换后的精准度，使用了gcoord开源库，此开源库转换后的精准度非常高，推荐使用。此开源库官网地址： https://github.com/hujiulong/gcoord由于此库提供的方法中入参只支持数组，于是基于高德地图引擎，自己封装了两个公用的方法，返回值是高德地图点位经纬度的格式。// 使用方式 // GCJ02坐标转WGS84坐标 GCJ02ToWGS84(arr) {return {
2022-09-28 08:35:43
782
原创 高德地图JSAPI测距功能优化
高德提供了一个距离测量插件可直接使用，但是没有完全满足需求。在测距过程中只会显示新增节点到起始点的总长度，而不会在鼠标移动过程中显示此时鼠标放置的位置到起始点的总长度，也不会给出继续和如何结束测距的提示。但是高德地图自己是有这个总长度与如何操作提示的，所以基于高德提供的距离测量插件，进行了一些小的改动实现这个总长度提示，本篇主要讲述如何获取总长度。
2022-09-28 00:08:22
1089
2
原创 vis-network节点展开收缩问题(大坑)
同事开发拓扑组件时，碰到一个谜题，让我解决一下。在拓扑节点展开收缩时，收缩是正常的，而在节点展开时，拓扑节点渲染的不正常，节点的label不更新。节点收缩前的lable值各不相同。
2022-07-22 16:00:09
938
4
原创 vis-network升级功能一(线条流动效果)
我不负责拓扑组件是对的，就应该给大佬去维护，大佬参考github上issue中的讨论与代码思路，实现了线条上的流动效果，牛的牛的，我赶紧学习一波，下面代码实现都是初步思路，没有进行实现优化，如防抖优化、定时器优化等，根据项目需求自行优化即可。vis-network中没有提供流动的配置，这个功能需要自己去实现。思路是需要自己绘制一个canvas图层，和地图功能类似，在自定义canvas上实现流动功能。但是简单的实现流动功能还是不行的，拓扑图是支持平移、缩放等操作的，所以自定义canvas也是适配这些操作，在拓
2022-07-13 14:11:16
1193
2
原创 富文本编辑器的选择
文章目录前言优质的文章不推荐使用的编辑器推荐使用的编辑器wangEditortinymcequilleditor.js前言前端新手，看了两天各大富文本编辑器的使用，记录一下自己对富文本编辑器的理解与选择。此文章自我感觉质量较低，图一乐。优质的文章有很多大牛都写过富文本编辑器的发展史与推荐编辑器等文章，写的很好。开源富文本编辑器技术的演进：https://zhuanlan.zhihu.com/p/268366406编辑器文档合集：https://github.com/xjh22222228/a
2022-05-09 01:21:35
861
原创 ora figlet logSymbols day.js data-fns开源库
文章目录前言orafigletlogSymbolsday.jsdata-fns前言使用nodeJs进行脚手架开发时可能会用到这些开源库，还有时间格式化开源库，记录一下。ora# 作用用于在控制台显示加载中的效果，类似于前端页面的loading效果。# 下载npm install [email protected]# 基础用法const ora = require('ora');const spinner = ora('Loading unicorns').start();spinner.start(
2022-05-09 00:44:06
236
原创 canvas实现pdf的展示与生成pdf
文章目录前言pdf.js引入项目使用构建包构建包的使用jsPDF前言这里主要使用到了两个库，pdf的展示是开源库pdf.js，和canvas结合使用；生成pdf的开源库是jsPDF。pdf展示的demo: http://121.4.85.237/pdf.js这个开源库很牛的，详细内容看官网就行了，我这里就简单的贴一些例子和pdf.js的两种使用方式。官网：https://github.com/mozilla/pdf.js这个pdf.js还是有一个官网demo的可以玩一下。http
2022-04-27 01:24:28
6051
原创 canvas实现图片剪切
文章目录前言思路分析绘制图片mousedownmousemovemouseup图片裁剪画布响应式前言在学习原生canvas，顺便做一个canvas进行图片剪切的小练习，加深自己对canvas的理解。计划做一个很简单很简单版的小demo，主要使用到canvas元素和一些鼠标监听事件。小demo: http://121.4.85.237:7778/思路分析1 图片可以在canvas上进行绘制2 绘制的图片在canvas中可以随意拖动(重绘)3 图片也要支持放大与缩小(重绘)4 点击图片裁
2022-04-23 18:12:39
3895
原创 javascript中call apply bind的实现
文章目录callapplybindcall封装一个很简单的函数，简单的理解一下call的工作机制。不考虑各种传参问题，假设按正常规则进行传参。Function.prototype.fnCall = function (thisArg, ...args) { const fn = this; // this指向sum函数 // 要转为一个对象类型，Object()的作用在讲对象时已经说过 thisArg = thisArg !== undefined && thisArg
2022-04-16 18:34:26
499
原创 javascript中的instanceof实现
文章目录前言instanceof前言在写对象相关方法时用到了instanceof来判断对象是否属于某种类型，研究一下是怎么实现的，加深自己的理解。instanceof如下面一个小案例：const arr = [1, 2, 3];console.log(arr instanceof Array); // true其实instanceof原理是判断左边对象的原型链中是否存在右边对象的原型对象。封装一个很简单版的函数，便与理解instanceof工作机制。function fnInstanc
2022-04-16 17:51:17
717
原创 npm install生产与开发依赖和package-lock.json
文章目录前言环境package.lock.json演示案例1前言今天在摸鱼时看到一篇文章，讲到了pnpm这个包管理工具，完全不知道是啥。突然发现npm我都不怎么了解呢，想了解一下。记得在项目开发时，从仓库拉取代码到本地后，执行 npm install，安装完依赖包后会发现package.lock.json文件会有修改。一直不理解，这个文件不是用来锁定依赖包版本的吗，怎么这个文件会被修改呢，探讨探讨一下。环境我使用的测试环境是npm的v8+版本，不同的大版本好像有不同的处理方式。package
2022-04-14 23:55:05
3014
原创 nvm版本导致npm install报错 Unexpected token ‘.‘
文章目录前言npm install报错降低node版本升级nvm版本总结前言前几天切换了node版本，顺带着升级了npm，今天使用nodemon启动node环境时发现报错，提示未安装。没安装就安装了下，结果！冒出来一大堆问题。npm install报错我使用npm install nodemon -g直接给我报错，不信邪接着npm install cnpm -g还是报错。这个报错我是真的看不懂，我去网上搜了下，发现也有人遇到过这个问题，好像是使用nvm-windows控制node版本才会遇到这
2022-04-09 11:07:00
28121
17
原创 npm link与bin的一些使用
文章目录前言binnpm link总结前言我在使用npm link与npm bin的相关配置时，学会了一些知识，也碰到了一些比较烦人的问题，有点懵懂。binpackage.json中的bin字段是命令名到本地名的映射，在安装时，npm 会将文件符号链接到 prefix/bin 以进行全局安装。当我们使用 npm 或者 yarn 命令安装包时，如果该包的 package.json 文件有 bin 字段，就会在 node_modules 文件夹下面的 .bin 目录中复制了 bin 字段链接的执行文
2022-04-07 00:51:28
1827
原创 npm升级、husky使用与prettier使用的坑
文章目录前言Huskynpm升级prettier总结前言今天试着系统玩下搭建项目代码规范时，碰到了一些问题，简直是无语他妈给无语开门，无语到家了。Husky此工具是一个git hook工具，基础的就不说了，反正使用此工具的命令行新建一个文件时，打印如下内容，并没有给我正确创建文件。这是嘛意思，也不报错也不给我建文件，我去网上搜了下，没找到原因，只是看到一个大佬说npm升级到v8+就自动解决了。后来我升级npm版本到最新后，这个问题就消失了。推荐以后开发使用高版本的npm，防止产生影响心
2022-04-05 18:08:13
2908
原创 前端拖拽布局
文章目录前言SortableJSvuedraggablevue-draggable-resizablevue-drag-resizevue-draggable-resizable-gorkysvue-grid-layout手撸拖动布局总结前言抽了两天空闲时间玩了一下拖拽布局，用的少有点生疏，通过学习熟练一下各种拖拽事件。主要有列表拖拽、表格拖拽、表单拖拽、自定义拖拽布局等，本文会使用开源库来实现这几种拖拽，自定义布局中也可以手撸代码。SortableJSSortableJS开源库是最基础的一个开
2022-04-03 04:17:01
5564
2
原创 服务器上的nginx如何配置多端口server
文章目录前言nginx.conf修改server配置重启nginx配置服务器防火墙总结前言前段时间使用了腾讯云服务器，并且部署了自己的项目，但是只会在默认的80端口部署项目，不会多端口配置server。今天上班时和老大哥讨论了一下线上项目的问题，老大哥教我怎么看nginx配置。nginx.conf服务器上安装nginx后，会有一个nginx.conf文件，这个文件是修改http相关配置的。查找此文件所在位置有个命令可以找到，我的目录是在 /etc/nginx/nginx.confsudo ng
2022-03-31 22:20:40
6394
2
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人