- 博客(65)
- 资源 (1)
- 收藏
- 关注
RSS订阅原创 js防抖和节流
通过减少连续重复事件的执行次数来减少消耗，优化用户体验。防抖主要用于输入框input事件等，节流主要用于页面resize，scroll事件等。
2024-04-02 15:18:51
301
原创 vue2响应式原理
对象类型：通过Object.defineProperty()对属性的读取、修改进行拦截（数据劫持）。数组类型：通过重写数组的一系列方法来实现拦截。（对数组的变更方法进行了包裹）。
2024-04-01 14:12:23
507
原创 __vueParentComponent和__vue__获取dom元素上的vue实例
__vueParentComponent和__vue__获取dom元素上的vue实例
2024-02-29 11:55:55
600
2
原创 原生js的animate()方法详解
Element 接口的 animate() 方法是创建一个新的 Animation 的便捷方法，将它应用于元素，然后运行动画。它将返回一个新建的 Animation 对象实例。同时通过Element.getAnimations() 方法可获取元素所有的Animation实例。
2023-09-22 16:47:39
2693
原创 innerText获取元素文本内容会缺失一部分？用textContent吧。
不要对 Node.textContent 和 HTMLElement.innerText 之间的差异感到困惑。
2023-04-26 09:59:11
262
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
3833
原创 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
457
原创 解决vue3中echarts的tooltip组件不显示的问题
如图，我将echarts实例赋值给了响应式的变量this.chartInstance，这便是在vue3中出错的原因，即不能将echarts实例赋值给响应式变量。②如果我们需要多次在一个dom元素上绘制echarts，又不想让元素多次echarts实例化，可以使用getInstanceByDom方法。
2022-08-25 14:56:43
742
原创 vue3使用箭头函数导入异步组件报错Invalid VNode type: undefined的解决方案
代码】vue3使用箭头函数导入异步组件报错Invalid VNode type: undefined的解决方案。
2022-08-05 15:00:20
5503
原创 ts给Number类型数据添加自定义方法报错：类型“Number”上不存在属性“divideStr”的解决方案
代码】ts给Number类型数据添加自定义方法报错：类型“Number”上不存在属性“divideStr”的解决方案。
2022-08-05 08:52:39
1367
原创 html的tabindex属性，让普通元素能够执行聚焦(foucs)和失焦(blur)事件
html的tabindex属性，让普通元素能够执行聚焦(foucs)和失焦(blur)事件。
2022-08-02 10:57:55
938
原创 页面通过js获取并加载远程html文件，移除html文件中不需要的内容，修改html文件中img图片的路径
页面通过js获取并加载远程html文件，移除html文件中不需要的内容，修改html文件中img图片的路径。
2022-08-02 09:50:13
904
原创 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
1400
原创 使用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
6349
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
10654
原创 ‘$‘ 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
259
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
2203
原创 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
2072
2
原创 垃圾回收算法
1.引用计数算法（reference counting）原理：通过在对象头中分配一个空间来保存该对象被引用的次数。如果该对象被其它对象引用，则它的引用计数加一，如果删除对该对象的引用，那么它的引用计数就减一，当该对象的引用计数为0时，那么该对象就会被回收。未经优化的引用计数相比跟踪式垃圾回收有两个主要缺点，都需要引入附加机制予以修复：频繁更新引用计数会降低运行效率。原始的引用计数无法解决循环引用问题。...
2022-02-14 09:53:53
184
原创 使用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
383
原创 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
727
原创 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
7554
原创 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
2184
原创 算法学习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
100
原创 前端优化之资源按需导入_第一次更新
项目引用各种外部库时，总会碰到库太大而我们在项目中又不需要使用到库的所有内容，这就造成了网页加载速度变慢，例如用echarts时：可以看到echarts文件很大，而且未使用到的内容占比达到了82%，因为我们平时并不会用到echarts里所有图表和组件，这时就可以使用资源的按需导入。1.echarts按需导入所需的内容：官网介绍：https://echarts.apache.org/handbook/zh/basics/import自由选择所需图表、坐标系、组件等进行打包下载并压缩官网提供：h
2022-01-13 19:36:17
206
原创 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
2411
原创 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
1558
原创 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
2510
转载 vue的prop 验证，props设置类型检查、必填、默认值和自定义验证函数等
app.component('my-component', { props: { // 基础的类型检查 (`null` 和 `undefined` 值会通过任何类型验证) propA: Number, // 多个可能的类型 propB: [String, Number], // 必填的字符串 propC: { type: String, required: true }, // 带有默认值的数字 propD:
2021-12-31 17:28:22
5418
百度富文本编辑器umeditor-1.2.3（免费版）
2021-12-20
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人