![](https://img-blog.csdnimg.cn/20190918140012416.png?x-oss-process=image/resize,m_fixed,h_224,w_224)
日常开发问题总结与反思
日常开发问题总结与反思
大佬桑
简
展开
-
为什么要使用异步加载
用于当一个页面中加载两个或多个页面,而这两个页面同时影响到了某个数据,那渲染页面的时候可能会报数据错误的问题,因此在自己页面使用异步加载的方式,及当所有页面加载完成之后自己再去渲染自己的页面,这样处理数据的时候就只有自己在操作数据,就不会再报数据的错误了。原创 2023-02-15 19:56:23 · 131 阅读 · 0 评论 -
vscode自动化写代码插件 自动生成代码插件
代码搜索工具原创 2022-12-11 20:06:25 · 1446 阅读 · 0 评论 -
iframe iframe参数
1.基本参数:<iframe src="path" //引用页面地址 name="myname" //框架表示名 frameborder="xx" //边框 scrolling="yes/no" //是否出现滚动条 noresize="noresize" //是否允许调整框架窗口的大小 width:"xx" //框架宽度 height:"xx" //框架高度 ></iframe>...原创 2021-11-07 18:09:33 · 951 阅读 · 0 评论 -
浏览器为什么要阻止跨域请求 如何解决跨域 每次跨域都需要到达服务端吗
1. 浏览器阻止跨域的原因是“同源策略”,“同源策略”主要解决浏览器安全问题。 1.1 同源策略:协议、域名、端口号必须相同,有一者不同都会造成非同源 1.1.1 非同源的影响 1. 无法获取cookie、localStorage、sessionStorag、indexedDB 2. 无法访问网页中的dom 3. 无法发送网络中的请求2. 解决跨域 1. jsonp跨域 2. postMessage跨域 3. 跨域资源共享(CORS) 4. nginx反向代理原创 2022-01-03 22:22:17 · 850 阅读 · 0 评论 -
如何生成简单的二维码
如何生成简单的二维码 草料二维码原创 2022-11-28 23:18:26 · 949 阅读 · 0 评论 -
cookie localStorage sessionStorage 数据传参方式
1. 存储大小 1.1cookie的数据大小不能超过4k. 1.2sessionStorage、localStorage 大小一般限制在5M左右(可以更大) 2. 有效时间 2.1 cookie可以设置过期时间,在设置过期时间未到之前,即使浏览器关闭也一直有效,如果不设置有效期,则在浏览器关闭时过期(cookie中的数据销毁) 2.2 localstorage 永久式存储数据,除非主动删除本地数据 2.3 sessionStorage 数据在当前浏览器窗口关闭后自动删除 3. 数据与服务器原创 2022-01-03 19:34:47 · 450 阅读 · 0 评论 -
sort 排序不准
sort排序不准问题是因为sort在做比较时会把数组中的元素转化为字符串去作比较,两个操作数都是字符串,则比较两个字符串第一个字母对应的ASCII码值,若拿 11 与 5 作比较,则5的ASCII码值大于1,即sort方法会认为11 < 5举个例子: var arr = [1,2,3,10,4,5,11,12,111]; var arrsort = arr.sort(); console.log(arrsort); // [1, 10, 11, 11, 111, 12, 2原创 2022-04-26 00:04:54 · 1635 阅读 · 0 评论 -
什么是token token用在哪 token放在哪比较好
1. token 其实就是访问资源的凭证,一般是用户通过用户名和密码登录成功之后,服务器将登录凭证做数字签名,加密之后得到的字符串作为token2. token用在用户登录城后之后会返回给客户端,3. token主要存储有: 3.1 存储在localStorage、sessionStorage中,每次调用接口的时候发送给服务端(每次调用接口放在HTTP请求头的Authorization字段里) 优点:可以跨域 缺点:没有任何安全防御,很容易受到xss攻击(简单理解在输入框输入js原创 2022-01-03 23:13:45 · 10763 阅读 · 0 评论 -
如何检查 VueJS 应用的大小?图片显示项目应用
** 生成报告webpack-bundle-analyzer****优点:**可直观地描述所使用的各种包的大小。首先附上webpack-bundle-analyzer插件地址:https://www.npmjs.com/package/webpack-bundle-analyzer使用步骤:npm install --save-dev webpack-bundle-analyzer查看package.js的"scripts"里是否有 “build-report”: “vue-cli-servic原创 2022-04-26 09:09:27 · 585 阅读 · 3 评论 -
记录几个超级好用的实用工具
记录几个超级好用的实用工具应用管理工具 geek磁盘分区文件恢复工具 DiskGenius贼好用的一款编辑器 Typroa原创 2021-09-13 01:20:25 · 91 阅读 · 0 评论 -
如何将object对象强制转换为字符串
1.若 obj= 1,2,3,4...; `${obj}`2.若 obj= {name:xiaoming}; JSON.stringify(obj);原创 2022-04-11 01:32:06 · 464 阅读 · 0 评论 -
精确判断数据类型的方法
精确判断数据类型的方法函数 var type = function(data) { let toString = Object.prototype.toString; let dataType = toString.call(data) .replace(/\[object\s(.+)\],"$1"/) .toLowerCase(); return dataType.split(' ')[1].split(']')[0]; } console.log(type('原创 2022-04-08 00:46:45 · 250 阅读 · 0 评论 -
变量提升与函数提升的优先级
每天一点小知识JavaScript中存在变量提升与函数提升,但是函数会先提升,变量后提升。foo(); //1var foo;function foo(){ console.log(1);}foo = function(){console.log(2);};//你会发现会输出1而不是2,因为它会被引擎理解为如下形式:function foo(){ closole.log(1);}foo(); //1foo = function(){ console.log(2);}/原创 2021-05-19 20:25:59 · 323 阅读 · 0 评论 -
在日常前端开发工作中,需要养成哪些比较好的习惯
在日常前端开发工作中,需要养成哪些比较好的习惯 我想要告诉前端开发的小伙伴及我自己,网上的好习惯,但是还要看看适不适合自己,不适合自己的就犹如毒鸡汤,喝的越久反而越能体味其中滋味,意思很简单,适合自己的才值得坚守。自己实战经验总结的才是良久难忘的。记录一下最近的开发总结吧: 1.想用原生写需求的时候,先去组件库里找一找有没有能用的组件,不然一个原生把人写的会怀疑人生才是噩梦的开始,后续再在原生的基础上添加需求才是原创 2021-05-17 20:04:34 · 294 阅读 · 0 评论 -
vue3 setup ‘return‘ outside of function报错 踩坑日记
vue3 script setup 报错 问题原创 2022-11-08 00:03:44 · 2476 阅读 · 0 评论 -
监听切回到浏览器当前页面
一般用于解决浏览器切到其他页面后 会暂停延时器的问题 document.addEventListener('visibilitychange', function () { // console.log(document.visibilityState); if (document.visibilityState == 'hidden') { console.log('页面离开时触发');原创 2022-04-27 11:22:54 · 538 阅读 · 0 评论 -
switch default多次触发
switch default多次触发default的触发次数与case匹配不到的次数是相关联的,当case有多少次未匹配,default就会触发多少次,所以再使用switch语法时,要注意这一特性,注意break的搭配原创 2022-04-24 23:13:42 · 509 阅读 · 0 评论 -
react 函数式组件 setInterval清除不掉 clearInterval失效
追查过程针对函数式组件:在组件内声明 { timer = null; timer = setInterval(()=>{},seconds); }的情景; 1.可以在 clearInterval(timer) 先console一下timer的值,看看是什么 2.一般清除不掉setInterval的情况是因为每次在清除之前重新走了一遍改组件的js代码,使timer又成了初始值null,再去clearInterval(timer);肯定不会成功了。解决办法: 再组件外声明 tim原创 2022-03-31 08:41:07 · 3610 阅读 · 1 评论 -
css 溢出隐藏显示三个点
几行代码实现溢出隐藏显示 … display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden;注意:有时你会发现溢出隐藏没有生效,浏览器打开打开样式编辑查看区,你会发现-webkit-box-orient: vertical;样式字段没有生效;因为在vue,react中使用样式无效,因为autoprefixer打包会自动生成前缀;全部复制下面代码即可。/* autopref原创 2022-03-23 22:18:53 · 1024 阅读 · 0 评论 -
vue Moment处理时间
Momentnpm install momentvar moment = require('moment');moment().format();使用本地时间var moment = require('moment');require("moment/min/locales.min");moment.locale('cs');console.log(moment.locale()); // cs原创 2022-03-03 18:37:51 · 487 阅读 · 0 评论 -
getBoundingClientRect 获取某个元素相对于视窗的距离
getBoundingClientRect() 获取某个元素相对于视窗的距离 Element.getBoundingClientRect() 方法返回元素的大小及其相对于视口的位置。 如果是标准盒子模型,元素的尺寸等于width/height + padding + border-width的总和。如果box-sizing: border-box,元素的的尺寸等于 width/height。 返回的结果是包含完整元素的最小矩形,并且拥有left, top, right, bottom,原创 2022-03-03 18:15:24 · 198 阅读 · 0 评论 -
动态创建style标签样式实现动态隐藏导航栏 隐藏导航栏 -webkit-scrollbar
根据条件动态隐藏导航栏1.先做好自己的判定条件2.在条件内放入下面代码块即可,超级好用 const stylee=document.createElement('style'); const sHtml = '::-webkit-scrollbar {display: none;}'; stylee.innerHTML = sHtml; document.getElementsByTagName('head').item(0).appendChild(stylee);...原创 2022-02-23 21:30:24 · 328 阅读 · 0 评论 -
git git版本回退 回滚 解决方案
git版本回退 回滚 解决方案1. git log --pretty=oneline // 查找版本由最近到最远的提交日志 主要是查找版本id2. git reset --hard id // 根据id回退到指定的版本3. git push origin HEAD --force // 推送到本地到远程仓库。4. git reflog // 查看命令操作的记录 当版本号回退错了,可以通过此命令查找一下对应版本id 重复2.操作即可...原创 2021-12-28 16:04:17 · 833 阅读 · 0 评论 -
The media could not be loaded, either because the server or network failed or because the format is
The media could not be loaded, either because the server or network failed or because the format is not supported 问题反复排查,视频资源没问题,调用方式也没问题。而且出问题的用户所占比例非常小,所在地区、宽带线路也无规律,而且均反映土豆、优酷等站的视频能正常播放。远程方式查看用户浏览器控制台,网络选项中提示视频资源404,由于视频托管在阿里云oss服务器中,提交工单,阿里工程师也没说出所以转载 2021-12-24 11:06:21 · 126421 阅读 · 1 评论 -
url传参 中文出现乱码问题 解决方案
js url http 传参 中文乱码原创 2021-12-20 15:06:04 · 3802 阅读 · 0 评论 -
如何实现 input 和 textarea 自动聚焦
如何实现 input 和 textarea 自动聚焦思路:直接获取元素标签后直接 .focus() 即可例(Vue环境):<template> <textarea ref="focusTextarea"></textarea></template><script> mounted() { this.$refs.focusTextarea.focus(); }</script>...原创 2021-11-05 20:54:57 · 1599 阅读 · 0 评论 -
npm安装依赖至指定版本 npm依赖升级
方法一先在package.json里修改好指定版本号(例:axios": "^0.19.2),然后输入:npm update webpack方法二npm update axios@0.19.2会把webpack更新至指定版本,但是不会写到package.json文件里,如果需要写到package.json里执行如下命令:npm update webpack@4.7.0 --save注:其中–save等于-S.方法三npm update webpack@latest -S–save和–sa原创 2021-11-03 19:30:59 · 6091 阅读 · 0 评论 -
js 拖放元素
记录一个十分好用的js原生拖拽效果<!DOCTYPE html><html><head><meta charset="utf-8"> <title>拖拽测试</title><style type="text/css">#div1, #div2 { position: relative; float:left; width:300px; height:150px; margin:10px; p原创 2021-09-28 19:53:33 · 80 阅读 · 0 评论 -
git for windows占用内存
在学习node的时候,我直接开启了在VsCode跑node项目,结果没一会电脑就变的卡了起来,使用ctrl+alt+. 查看本地的进程,结果内存与cpu全都快满了,大部分是 git for windows的进行占用了大量的内存,我的解决办法是在VsCode的设置中查找setting.json添加git.enabled": false, 目的是关掉git,在个人学习的时候可以这么办,很好用git.enabled": false, ...原创 2021-09-07 23:50:17 · 1697 阅读 · 0 评论 -
js 如何判断一个对象是否为空
1.直接使用:Object.keys(obj).length === 0 ? '空' : '不为空'原创 2021-09-04 15:39:39 · 161 阅读 · 0 评论 -
类组件与函数组件的区别 react中class创建的组件与function创建的组件有什么区别
使用 class 关键字创建的组件叫有状态组件,有自己的私有数据和生命周期函数;使用 function 创建的组件叫无状态组件,只有 props , 没有自己的私有数据和生命周期函数。区别:有状态组件和无状态组件的本质区别就是:有无 state 属性,有无生命周期函数; 1.无状态组件,由于没有自己的state和生命周期函数,所以运行效率会比有状态组件稍微高一点 2. 组件中的 props 和 state/data 之间的区别 props 中的数据都是外界传递过来的 state/dat.原创 2021-09-01 12:50:58 · 300 阅读 · 0 评论 -
css3 transform transition 动画效果
直接记住这几个transition的配置,就可以做出来漂亮的动画效果了1.变形——旋转 rotate('旋转值’deg) ,rotate()函数只是旋转,而不会改变元素的形状(旋转值为正顺时针旋转,旋转值为负逆时针旋转)transform: rotate(45deg);2.变形——扭曲 skew() skew()函数不会旋转,而只会改变元素的形状。skew(x,y)使元素在水平和垂直方向同时扭曲(X 轴和 Y 轴同时按一定的角度值进行扭曲变形,单值为单方向扭曲,先水平后垂直,也可单独设sk原创 2021-08-30 21:00:41 · 930 阅读 · 0 评论 -
开发依赖与生产依赖 --save --save-dev
首先--save 简写 -S 安装生产环境下的依赖包--save-dev 简写 -D 安装在开发环境下的依赖包其次谈谈我对–save 与 --save-dev的理解--save-dev之所以有开发环境的依赖,是因为在开发环境中我们打包时就直接利用开发环境的依赖使打的包是编译之后的代码,好处就是当别人把我们的包当做模块使用的使用的时候就不用再去安装我们包打包前所需要的依赖了。 --save应用依赖又叫业务依赖,即应用发布后运行时还需要的包,有啥优点呢??...原创 2021-08-27 23:25:41 · 442 阅读 · 0 评论 -
wifi密码 如何获取自己的WiFi密码
收藏一下如何获取自己的网络密码,下次直接用!1.移动端: 直接进入到WLAN页面,点击自己所连的无线网,即可弹出分享二维码,扫描二维码,P : ‘此处为wifi密码’ ;;2.pc端:通过 windows + r 弹出对话框 直接通过两条命令即可1.输入命令行 netsh wlan show profiles 获取当前"wifi名称";2.输入命令行 netsh wlan show profile name="wifi名称" key=clear来查看网络密码;(关键内容为wifi密码)原创 2021-08-27 22:46:16 · 1330 阅读 · 0 评论 -
滚动条隐藏后再设置显示
滚动条设置显示 一般只需要两部就能满足大部分的需求了1.设置滚动条样式 元素名::-webkit-scrollbar { display: block; width: 10px; background-color: rgba(0, 0, 0, 0.2); }2.设置滚动块样式 元素名::-webkit-scrollbar-thumb { border-radius: 10px; background: rgba(0, 0, 0, 0.1);原创 2021-08-27 09:43:07 · 402 阅读 · 0 评论 -
react <></> 是什么 有什么用
<></>其实算是是 标签的一个语法糖 表示一个Dom片段 它可以在一个内存里面创建一个Dom节点 但是并不在Dom模板上渲染,进而提升性能!原创 2021-08-16 00:20:04 · 1801 阅读 · 0 评论 -
redux 基础函数
redux超精简版只需要三个redux的函数1.store.getState(); //用来获取redux里的状态(也就是所存的值)2.store.dispatch({type:"redux所对应的数据操作",data:需要操作的值}); //用来告诉redux对哪个值进行操作 3.store.subScribe(()=>{this.setState({})})//this.setState({})是用来触发render的,由于react的虚拟diff算法,又因为store.sub原创 2021-08-03 23:50:23 · 180 阅读 · 0 评论 -
js 移动端 ios 滚动穿透解决办法
分享一个ios弹出mask蒙层或者是弹出框发生滚动穿透的问题,纯属自己慢慢从坑中摸索出来的,希望能帮助到身处坑中的朋友,如果能够解决问题还麻烦给个赞1.找到滚动穿透的mask蒙层或者是弹出框,去监听它的滚动(以mask为例,命名是react命名的,直接根据自己的框架转换命名就行)useEffect(()=>{ if (判断条件) { document.getElementsByClassName('mask')[0].addEventListener('touchmove', () =>原创 2021-07-27 14:49:40 · 1379 阅读 · 0 评论 -
微信小程序在关联代码的时候,报错SyntaxError: Unexpected end of JSON input
微信小程序在预览需要关联代码的时候,报错SyntaxError: Unexpected end of JSON input找了好久的原因,最后才发现是自己不小心把appID的那个.json文件里的代码删干净了,这时候只需要在代码里面加一个 {} 就好了,这样才能将关联成功。...原创 2021-07-27 00:04:50 · 293 阅读 · 0 评论 -
Failed to load resource: the server responded with a status of 404 (Not Found)
初级解决代码运行环境打开失败的问题,Failed to load resource: the server responded with a status of 404 (Not Found)放假两天,回到公司运行代码环境,项目突然报错,index.html未找到,这是可能是环境中的的部分功能更新了,这时只需要终端输入 npm i 更新一下环境就可以完美解决。...原创 2021-07-11 15:25:09 · 1813 阅读 · 0 评论