- 博客(48)
- 收藏
- 关注
RSS订阅原创 vue2中的$nextTick原理和简单实现
5.1、事件循环（Event Loop）是 JavaScript 引擎处理异步操作的一种机制，它使得 JavaScript 能够处理并发的任务而不阻塞后续代码的执行。在浏览器中，事件循环是浏览器实现的，而在 Node.js 中，事件循环是由 Node.js 运行时提供的。nextTick 利用了 JavaScript 引擎的事件循环机制，将回调函数推迟到下一个事件循环中执行，以确保在 DOM 更新完成后执行（简单来说就是利用微任务和宏任务）更新之后执行回调函数，确保你在回调中访问的是更新后的。
2024-01-26 18:21:04
1254
原创 ‘HEAD‘ 是 HTTP 请求的一种方法
而当你使用 ‘HEAD’ 请求时，服务器只会返回响应头信息，而不包括实际的资源内容。这使得 ‘HEAD’ 请求比 ‘GET’ 请求更轻量，因为它不传输整个资源，只传输元数据。http.open(‘HEAD’, url, false) 表示创建一个使用 ‘HEAD’ 方法的 XMLHttpRequest 对象，并通过同步方式发送请求。使用 ‘HEAD’ 请求的主要用途是获取有关资源的元信息，例如检查资源的存在性、获取资源的大小或检查资源的更新日期，而不需要实际获取资源的内容。
2024-01-25 17:17:30
2101
原创 localStorage、sessionStorage、vuex区别和使用感悟
我用的场景是打开多个窗口查看不同年度的数据，导致使用localStorage存储的年度信息被覆盖，比如A窗口是2023年，B窗口是2024年，当在打开B窗口年度切换到2024年，这时localStorage存储的就是2024，A窗口再去使用localStorage存储的年度时就变成了2024而不是正确的2023了，所以更改方案时；3.2、将Vuex中的数据直接保存到浏览器缓存中：可以将Vuex中的数据保存到sessionStorage、localStorage或cookie中。最后，移除本地存储中的数据。
2024-01-16 18:16:09
637
原创 window的两种监听方式区别
我遇到的情况是micro-app开启微前端的情况下iframe监听接收数据使用window.onmessage无法监听到信息换成addEventListener的方式就可以监听到，考虑到是window.onmessage在 iframe 加载完成前就已经被调用，而window.addEventListener则是在加载完成后才执行的，所以是否window.onmessage在onload之后执行就能成功，此方法未验证；当使用这个方式时，只能绑定一个事件处理函数，如果后续再次赋值，会覆盖之前的处理函数。
2024-01-10 18:00:00
1448
原创 promise.prototype.finally重写和兼容火狐低版本浏览器
promise.prototype.finally()重写和兼容火狐低版本浏览器
2024-01-02 17:06:48
788
原创 解决 no such file or directory, scandir ‘node_modules\node-sass\vendor 报错
运行项目突然报错【no such file or directory, scandir 'node_modules\node-sass\vendor】这个错误。报错说是找不到node-sass文件路径，最后找到了解决方案。重新构建一下npm rebuild node-sass包。再直接运行，就可以正常使用了。
2023-02-20 11:11:30
2592
转载 vue中v-bind=“$attrs“和v-on=“$listeners“的含义（记录）
vue中v-bind="$atts"和v-on="$listeners"的作用
2022-02-21 11:17:04
365
原创 git cz 配置
安装node.js：在cmd或者powershell敲入命令行：npm install -g commitizen进入工程项目仓库，使用 npm init --yes 生成package.json文件.4.输入commitizen init cz-conventional-changelog --save --save-exact //这句命令会自动帮你在项目安装cz-conventional-changelog包，并且帮你在package.son利进行配置,下图就是帮..
2021-11-24 16:15:12
1100
原创 throw er； // Unhandled ‘error‘ event 解决方案
启动vue项目，无法启动，报错内容如下：错误原因：端口号被占用解决方案：1、查找被占用的端口号1.1、cmd查询使用的端口号是否被占用netstat -aon|findstr “8888”回车，结果如下：“5436”就是被占用端口号的PID2、按快捷键“ctrl+shift+esc”调出windows的任务管理器，3、切换到“详细信息”，对照PID找到对应的程序，结束进程，即可...
2021-08-18 10:39:31
7411
原创 node升级之后导致vue项目打不开，node-sass版本错误
node升级之后，vue项目启动就报错报错内容：Found bindings for the following environments: Windows 64-bit with Node.js 8.xThis usually happens because your environment has changed since running npm install根据提示，是要重新构建node-sass，所以执行下面的命令：npm rebulid node-sass如果还是不行，重新安装n
2021-08-16 10:52:25
1603
原创 echarts竖屏显示折线图
echarts 折线图一般都是横屏显示，例如下图（官方案例）：但是如果在移动端显示折线图，数据有非常多的情况下，横屏显示显然数据看着会很拥挤，所以我就想在移动端时，是否可以竖屏显示，这样看着折线图相对来说比较清晰，最终结果如下图（截取手机上的图）：下面是具体的代码：一、实现折线图竖屏显示原理：将x轴和y轴对调，（1）、横屏显示的X和Y轴xAxis: { type: 'time', axisLabel: { show: true, rotate: 58 }
2021-08-04 18:13:27
3083
原创 echarts 中旋转提示框 ‘tooltip‘
找了很多文章，最后还是在官方文档中找到了答案（在此记录一下）：旋转 ‘tooltip’ 提示框，只需要设置extraCssText: 'transform:rotate(90deg)',如下图：官网中：
2021-08-04 16:44:08
2126
8
原创 axios连接多个服务器以及跨域代理的配置
以vue为例一、在.env.development和 .env.production文件中设置基础路径1.1 : 文件名不可乱改1.2：声明的变量必须以 VUE_APP_XXX为开头，并且都是大写比如：开发环境路径：比如：生产环境路径：二、axios拦截器的配置如上图生产和开发环境都定义了两个基础变量，分别为：VUE_APP_BASE_API 和 VUE_APP_BASE_API_OL（不同的变量对应不同服务器的基础路径）所以也需要声明两个拦截器。存在于不同的文件，分别为：request
2021-07-21 15:27:04
1957
原创 node + express搭建服务器
*** 1、express 说明 ***使用Express可以快速搭建完整功能的网站使用Express搭建框架需要先安装node.js*** 2、全局安装express-generator ***npm install express --save -gnpm install express-generator --save -g*** 3、开始搭建sever ***3.1 ： 创建一个文件，例如：demoServe3.2：进入创建的文件夹 ，cd demoServe3.3 输入命令‘
2021-07-20 15:01:35
285
原创 element-UI更换主题及使用gulp报错
1、进入项目文件夹 cd ‘文件夹名称’2、全局安装主题生成工具npm install element-theme -g3、在项目中安装chalk主题npm install element-chalk -D4、初始化变量et -i初始化成功之后，会在根目录下生成 element-variables.scss 文件5、打开文件，根据项目要求进行修改比如：修改主题色修改input的hover/focus的边框颜色6、修改完成之后，开始编译主题et显示如下内容，即编译成功，
2021-07-14 11:56:59
716
原创 使用git上传项目及‘fatal: remote origin already exist’错误的解决方案
一、上传内容到远程仓库`1、本地初始化仓库：git init本地文件夹内会生成‘.git’ 或者‘.github’的文件2、关联远程仓库git remote add origin url // url远程仓库地址3、将本地内容添加到暂存区git add .4、添加到本地仓库并且可添加说明git commit -m '说明'5、推送本地分支的内容到远程仓库对应的分支内git push origin develop内容成功上传到远程仓库二、下载远程仓库的内容到本地`1、克隆
2021-07-12 16:39:26
521
原创 封装将数字扩大1000倍的函数
由于js是弱计算能力的编程语言，直接使用*1000的计算方式对于一些数字会计算错误，例如：1.005 * 1000 我们想要的结果是 1005但是计算出来的最终结果是 1004.9999999999999, 如下方截图所以自己直接封装一个函数，可以直接使用/*** val： 接受的参数，可以是字符串、数字、null、 undefined*/handlerNumberZoom(val) { let result, buyoilArr if (!val) return 0 //
2021-06-09 14:50:31
323
原创 js 买卖股票的最佳时机 II
方法一：贪心策略（局部最优达到全局最优）解题思路：第i天买入，第j天卖出和第i天买入，第i+P天卖出所得的收益是一样的。例如：[1，2，3，4，5]，最大收益是4，如果第一天买入，第二天卖出，同时再买入，第三天又卖出…和第一天买入，第五天卖出所得收益是一样的。这就是贪心策略，一局部最优达到全局最优代码如下：var maxProfit = function (prices) { if (prices === null || prices.length === 0 ) return 0 // 没有收
2021-05-22 14:34:59
350
原创 用 indexof 实现模糊查询
使用forEach 和 indexOf 实现模糊查询以下代码复制到html文件中可直接运行<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-wid
2021-04-21 11:21:41
905
原创 axios的两种传参方式
1、json的方式 this.$axios.post(url, { data:JSON.stringify({ mess:'hello', dataArr:[{name:'test',vlaue:[1,2,3]},{name:"match",vlaue:[1,2]}] }), headers:{ 'content-type':"application/json" } })2、formData的方式（1）、利用
2021-03-10 20:55:03
1174
原创 父组件使用v-model，实现子父组件动态传值
一、实现动态传值<body><script src="https://cdn.bootcss.com/vue/2.5.16/vue.js"></script><div id="box"> <new-input v-model="name"></new-input> {{name}}</div><script>Vue.component('new-input',{ props: ['valu
2021-03-10 20:30:35
139
原创 javascript 导出CSV编码utf-8问题
解决方案如下：var csvString = 'ı,ü,ü,ğ,ş';var universalBOM = "\uFEFF";var a = window.document.createElement('a');a.setAttribute('href', 'data:text/csv; charset=utf-8,' + encodeURIComponent(universalBOM+csvString));a.setAttribute('download', 'example.csv');w
2021-02-23 15:07:15
1383
原创 烟花
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>FIR
2021-02-10 21:24:59
245
原创 elementUI中的$message提示消息换行
添加 ‘dangerouslyUseHTMLString’为true，使能够解析换行标签’< b r />’this.$message({ dangerouslyUseHTMLString: true, message: '当前上传的文件 导入失败 <br/> 失败的原因为：......', type: 'warning', duration: 5000})......
2021-02-05 16:54:14
3678
原创 vue mixins详解
第一： 使用mixins.js export default { data() { return { num: 1 } }, created() { this.hello() } methods: { hello() { console.log('--------- ,mixins ------------') } } }组件1：<template> <div> 组件1
2021-01-29 14:26:04
234
原创 query 和 params 传参
query传参第一种this.$router.push({ path: '/discomfortBook', query: {a:1, b:2, c:3 }})url为控制台打印：第二种this.$router.push({path:'/discomfortBook', query: {obj: {a:1, b:2, c:3 }}})url 为注 推荐方式二，如果属性比较多的时候，第一种传参会把query里面的字段全部都暴露在url地址栏中，url会比较长，还有可能会导致url超
2021-01-25 21:24:50
580
原创 浅谈深克隆和浅克隆
浅克隆和深克隆都是对引用地址的克隆。浅克隆浅克隆就是当我把obj{}对象里面的所有属性拷贝到obj1{}中后，然后我分别改变对象里面的变量，原始值互不影响，引用值一个改变，另一个跟着变。代码如下：function clone(origin, target) { var target = target || {} for (var item in origin) { target[item] = origin[item] } return target}var obj =
2021-01-12 15:40:42
104
原创 node环境端口号被占用导致Vue报错：Error listen EADDRINUSE: address already in use 127.0.0.1:8888
由于端口号被占用，所以会报上图所示的错误，找到被占用的端口，关闭它就OK了
2021-01-05 20:08:41
978
原创 JS块级作用域（var、let、const）
很多语言中都有块级作用域，但JS没有，它使用var声明变量，以function来划分作用域，大括号“{}” 却限定不了var的作用域。用var声明的变量具有变量提升（declaration hoisting）的效果。ES6里增加了一个let，可以在{}， if， for里声明。用法同var，但作用域限定在块级，let声明的变量不存在变量提升。一、块级作用域iffunction getVal(boo) { if (boo) { var val = 'blue' return val
2020-12-22 11:10:58
3249
原创 文件下载 （文件地址/二进制文件）
在HTML5中，download是 a 标签的新增属性，download属性能让我们指定浏览器下载文件时的默认名称，将download属性添加到 a 链接上，当我们点击这个链接，download属性值里的名称会显示到弹出的下载框里，而且download属性能够强制触发下载操作。下面是分别用地址和文件流的方式实现文件的下载一、直接用文件的地址将文件下载到本地handleDownload(url) { // 直接在浏览器预览 （同源就会直接下载） var a = document.create
2020-12-21 20:58:49
1140
原创 js 兼容浏览器
一、获取样式获取元素正在使用的样式（只读样式，仅IE支持）： element.currentStyle.样式名称获取元素正在使用的样式（只读样式，IE8除外）： getComputedStyle(element, null).样式名称TIPS: 返回object对象，该对象中封装了当前元素的对应样式，参数一：目标元素，参数二：伪元素，第二个参数不是必须的，当不查询伪类元素的时候可以忽略或者传入 null。(element.style 既支持读也支持写，我们通过 element.style 即可改写元
2020-11-27 18:02:37
208
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人