- 博客(66)
- 资源 (1)
- 收藏
- 关注
原创 js防抖和节流
通过减少连续重复事件的执行次数来减少消耗,优化用户体验。防抖主要用于输入框input事件等,节流主要用于页面resize,scroll事件等。
2024-04-02 15:18:51
338
原创 vue2响应式原理
对象类型:通过Object.defineProperty()对属性的读取、修改进行拦截(数据劫持)。数组类型:通过重写数组的一系列方法来实现拦截。(对数组的变更方法进行了包裹)。
2024-04-01 14:12:23
595
原创 __vueParentComponent和__vue__获取dom元素上的vue实例
__vueParentComponent和__vue__获取dom元素上的vue实例
2024-02-29 11:55:55
792
2
原创 原生js的animate()方法详解
Element 接口的 animate() 方法是创建一个新的 Animation 的便捷方法,将它应用于元素,然后运行动画。它将返回一个新建的 Animation 对象实例。同时通过Element.getAnimations() 方法可获取元素所有的Animation实例。
2023-09-22 16:47:39
4411
原创 innerText获取元素文本内容会缺失一部分?用textContent吧。
不要对 Node.textContent 和 HTMLElement.innerText 之间的差异感到困惑。
2023-04-26 09:59:11
324
1
原创 路由hash模式改成history模式的前端vue配置与后端配置
Web/static/ 表示项目部署路径,每个人的路径不一样,vue默认路径是根路径/,如果你项目不是部署在根路径,那就需要修改一些配置。history模式需要后端配合,具体的后端配置可以在网上找到,方法是获取不到资源时将url重写到 /index.html。特别注意的是,如果你的项目没有部署在根路径,那么你需要写入完整路径,例如 /Web/static/index.html。1.配置路由history模式并配置base。index.html 表示项目入口文件。/index 表示项目首页的路由地址。
2023-01-06 16:25:59
4088
原创 Error: Cannot find module ‘process-nextick-args‘,error:0308010C:digital envelope routines::unsupport
出现在node版本升级时,在原来的node文件夹里直接安装新版本node,却没有删除原来的node,导致运行npm命令报错。:将node换到V16版本,这样既可以运行以前的项目,也可以运行新的vite项目。用V17或以上版本的node运行之前的项目所报的错误。:先移除当前电脑上的Node,再安装新版本。
2022-10-27 10:18:47
499
原创 解决vue3中echarts的tooltip组件不显示的问题
如图,我将echarts实例赋值给了响应式的变量this.chartInstance,这便是在vue3中出错的原因,即不能将echarts实例赋值给响应式变量。②如果我们需要多次在一个dom元素上绘制echarts,又不想让元素多次echarts实例化,可以使用getInstanceByDom方法。
2022-08-25 14:56:43
788
原创 vue3使用箭头函数导入异步组件报错Invalid VNode type: undefined的解决方案
代码】vue3使用箭头函数导入异步组件报错Invalid VNode type: undefined的解决方案。
2022-08-05 15:00:20
5691
原创 ts给Number类型数据添加自定义方法报错:类型“Number”上不存在属性“divideStr”的解决方案
代码】ts给Number类型数据添加自定义方法报错:类型“Number”上不存在属性“divideStr”的解决方案。
2022-08-05 08:52:39
1459
原创 html的tabindex属性,让普通元素能够执行聚焦(foucs)和失焦(blur)事件
html的tabindex属性,让普通元素能够执行聚焦(foucs)和失焦(blur)事件。
2022-08-02 10:57:55
1071
原创 页面通过js获取并加载远程html文件,移除html文件中不需要的内容,修改html文件中img图片的路径
页面通过js获取并加载远程html文件,移除html文件中不需要的内容,修改html文件中img图片的路径。
2022-08-02 09:50:13
976
原创 js用变量保存函数名,并使用该变量调用函数的方式
1.用eval方法function fn1(){ console.log(123) } function fn2(){ console.log(456) } function fn3(){ console.log(789) } let index = 1 let fnName = 'fn' + index eval(fnName)() // 最终输出1232.使用对象保存函数
2022-04-25 09:50:41
1517
原创 使用axios插件传数据的Content-Type以及格式问题
1.一般来说,前后台对接,常用的Content-Type有:application/json,application/x-www-form-urlencoded 以及 multipart/form-data,当我们使用axios时,一般不需要我们主动去设置Content-Type,而是跟着我们传的数据格式自动适应。2.get请求get请求时传递的参数是会出现在url里面的,我们使用aixos传递get请求时可用格式如下(1)将参数拼接在url里this.$axios({ method: 'get
2022-04-01 10:07:34
6412
3
原创 Uncaught SyntaxError: await is only valid in async functions...,以及async的就近原则
当你遇到这个问题时:Uncaught SyntaxError: await is only valid in async functions and the top level bodies of modules。你就要去看一下你的await关键字是否放在async声明的函数里面,正确写法如下:async function insideFn() { await promiseFn() console.log('第二步执行完毕') }async的就近原则有时候我们在async声明.
2022-04-01 09:26:33
11466
原创 ‘$‘ is defined but never used,‘func‘ is defined but never used
1. ‘$’ is defined but never used删除下面这一行2. ‘func’ is defined but never used删除下面这一行
2022-03-15 09:59:25
309
2
原创 navicat连接sql server数据库时,提示安装sql server native client,但安装失败的解决方案
我的电脑是win11的,使用navicat提供的接口安装sqlncli 2008失败,报错系统不支持:直接去microsoft官网下载Microsof SQL Server 2012 Native Client:1.下载地址:https://www.microsoft.com/zh-cn/download/details.aspx?id=504022.安装服务,双击刚刚下载的文件进行安装3.使用navicat连接数据库...
2022-03-10 10:20:07
2492
原创 win11配置node环境的问题汇总
1.无法识别node或npm命令①去配置node路径②win11下有两个打开powershell的方式,有时用第一个方式打开的powershell无法识别node或npm命令,而用第二种方式可以。2.全局安装资源失败,例如 npm i @vue/cli -g 失败,报错The operation was rejected by your operating system…以管理员身份运行powershell 或者命令行,再全局安装资源3.npm run serve时报错’vue-cli-ser
2022-02-28 17:16:45
2178
2
原创 垃圾回收算法
1.引用计数算法(reference counting)原理:通过在对象头中分配一个空间来保存该对象被引用的次数。如果该对象被其它对象引用,则它的引用计数加一,如果删除对该对象的引用,那么它的引用计数就减一,当该对象的引用计数为0时,那么该对象就会被回收。未经优化的引用计数相比跟踪式垃圾回收有两个主要缺点,都需要引入附加机制予以修复:频繁更新引用计数会降低运行效率。原始的引用计数无法解决循环引用问题。...
2022-02-14 09:53:53
195
原创 使用a链接平滑滚动到页面某一元素位置
效果:代码:<div class="box"> <div class="top"> <div><a href="#content_1">1</a></div> <div><a href="#content_2">2</a> </div> <div><a href="#content_3">3</a> &l
2022-02-11 10:37:40
405
原创 js用数组的reduce方法实现一些简单的计算:数组累加,累乘,求最大项,去重,求每个元素出现的次数
累加const arr = [1, 2, 3, 4]arr.reduce((preV, curV) => preV + curV) // 10累乘const arr = [1, 2, 3, 4]arr.reduce((preV, curV) => preV * curV) // 24求数组最大项const arr = [1, 4, 3 ,5, 2 ,4]arr.reduce((preV, curV) => Math.max(preV, curV)) // 5.
2022-01-25 11:22:43
781
原创 echarts折线图设置Y轴的boundaryGap,使折线尽可能地在Y轴居中
1.如上图,没有设置boundaryGap时折线会在Y轴偏上位置,此时一般设置Y轴boundaryGap在最大值的延伸范围为1,这时折线会居中。但是当我们并不确定折线使用的数据时,就无法直接确定boundaryGap的值来实现居中。此时,就需要去计算boundaryGap的值:2.根据上图,要使折线上下居中,就需要:(b + 1)* max - max = min - 0得到b = min / max3.此时我们在实际情况中求boundaryGap:b = Math.min(...y.
2022-01-24 16:58:02
7911
原创 css设置hover时改变盒子背景图片的透明度,但不改变盒子文字的透明度
之前看到别人有用after伪元素来给图片添加透明度的写法,没有与hover相关联,于是我重新写了一下。用这种方法我们就可以用一张图片实现两种状态,减少资源的请求。<style> div{ position: relative; width: 100px; height: 25px; cursor: pointer; } div::after { position: absolute; content
2022-01-24 15:21:48
2318
原创 算法学习1
1.斐波那契数列指的是这样一个数列:1、1、2、3、5、8、13、21、34、……定义:F(0)=1,F(1)=1, F(n)=F(n - 1)+F(n - 2)(n ≥ 2,n ∈ N*)js实现:function fib(n) { // n为大于等于0的整数 if (n <= 1) return n return fib(n-1) + fib(n-2)}...
2022-01-14 13:45:56
115
原创 前端优化之资源按需导入_第一次更新
项目引用各种外部库时,总会碰到库太大而我们在项目中又不需要使用到库的所有内容,这就造成了网页加载速度变慢,例如用echarts时:可以看到echarts文件很大,而且未使用到的内容占比达到了82%,因为我们平时并不会用到echarts里所有图表和组件,这时就可以使用资源的按需导入。1.echarts按需导入所需的内容:官网介绍:https://echarts.apache.org/handbook/zh/basics/import自由选择所需图表、坐标系、组件等进行打包下载并压缩官网提供:h
2022-01-13 19:36:17
228
原创 echarts绘制双半圆环进度条,半圆环带icon图
效果:代码:<style> .chart1 { width: 300px; height: 150px; position: relative; margin-left: 400px; margin-top: 100px; background-color: #a18eec; } .chart1 .chart1_chart{ position: absolute; wid
2022-01-12 10:20:31
2591
原创 js简单实现input输入框的防抖处理,input输入时延迟一段时间后自动搜索
<input type="text" oninput="input()">let timer1 // 声明定时器function input(){ // 防抖处理 if(timer1){ clearTimeout(timer1) } timer1 = setTimeout(search, 500) // 500ms后执行 search 函数}function search(){ console.log('正在搜索...')}...
2022-01-11 16:41:36
1660
原创 echarts绘制圆环型进度条,圆环形比例图
效果:代码:(图表中间的文字可以使用label或自己写html元素)<script src="./echarts.min.js"></script><script> let option = { animation: true, series: [{ type: 'gauge', // 仪表盘图 startAngle: 90, endAngle: -270, min: 0, max:
2022-01-11 16:13:41
2940
百度富文本编辑器umeditor-1.2.3(免费版)
2021-12-20
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人