前端
虾十一
热爱前端,热爱生活, 记录一些随笔,欢迎前端的朋友.
展开
-
前端预防XSS攻击全攻略
前端如何预防XSS攻击?XSS攻击做了哪些坏事?原创 2023-02-23 17:45:32 · 2244 阅读 · 1 评论 -
vue项目的首屏优化策略
虽然标题是vue项目的首屏优化策略,但是里面绝大部分的方法,对于其他语言写成的单页应用同样适用。原创 2022-12-14 11:56:11 · 2041 阅读 · 0 评论 -
为什么你应当使用typescript
为什么你应该适用typescript呢原创 2022-10-31 12:20:42 · 339 阅读 · 0 评论 -
vue3/vue2的兄弟组件的传值
Vue2.x 使用 EventBus 事件总线进行兄弟组件通信,而在Vue3中事件总线模式已经被移除,官方建议使用外部的、实现了事件触发器接口的库,例如 mitt。原创 2022-09-16 12:47:07 · 789 阅读 · 0 评论 -
vite和webpack的区别
vite和webpack的区别原创 2022-08-25 16:56:20 · 6150 阅读 · 0 评论 -
前端工程师的素养
前端求职面试前端工程师素养原创 2022-08-24 10:51:05 · 425 阅读 · 0 评论 -
axios创建实例与不创建实例/创建实例的作用
3)在处理相应拦截时处理内容完全不同,比如两个不同的axios实例请求了两个完全不同的服务器,而这两个服务器返回数据的code规则完全不同,这就要在各自的拦截器中分别处理了。2)在处理请求拦截时处理内容完全不同,比如你可以在实例A的请求拦截里面设置Loading转圈,而在另一个实例B中不使用loading转圈。,其实并不是使用了axios.create()才创建了一个实例(单例),而是上面3种方法都创建了实例。我们看到axios的官方文档中有创建axios实例去发送请求的方式。...原创 2022-08-17 17:38:30 · 868 阅读 · 0 评论 -
webpack、vite--获取环境变量的区别(vue2/vue3)
vite获取环境变量的方法,vue3原创 2022-08-03 15:07:10 · 724 阅读 · 0 评论 -
通俗理解防抖和节流
答: 限制函数的执行次数防抖和节流都是为了限制函数的执行次数,避免短时间不必要的多次函数执行答: 防止高频调用函数带来的性能损耗和卡顿;答:防抖:连续多次触发事件,只执行最后一次节流:n秒内多次触发事件,只执行一次答:防抖:1)search搜索联想时,用户在不断输入值时,搜索框下面自动补全搜索关键字(用防抖来实现当用户暂停连续输入时才处理用户输入的数据)2)输入手机号,邮箱验证时输入字符的检测(用防抖来实现当用户暂停连续输入时才处理用户输入的数据)节流:1)触底加载更多/滚动加载更多事件(用节原创 2022-07-08 16:34:02 · 713 阅读 · 0 评论 -
前端---几种地图坐标系之间的转换
原因是,不同的产品他们对经纬度的表达方式不同(用的不同坐标系表达坐标)1、GCJ-02(又叫火星坐标系),国测局02年发布的坐标,国内多家地图厂商通常都用这个。2、GPS坐标系。这里分WGS-84和CGCS2000坐标系(中国国家大地坐标系)1)WGS-84坐标系:是GPS原始坐标体系,在中国,不允许任何一个地图产品直接使用WGS-84坐标下的地理数据,为了保密,不暴露真实坐标。2)CGCS2000坐标系:国家大地坐标系该坐标系是通过中国GPS 连续运行基准站、 空间大地控制网以及天文大地网与空间地网原创 2022-07-08 16:23:49 · 2129 阅读 · 0 评论 -
通俗讲跨域
浏览器跨域如何解决原创 2022-06-24 18:39:10 · 244 阅读 · 0 评论 -
跨域有哪些解决方法?
跨域解决方法原创 2022-06-09 18:33:27 · 130 阅读 · 0 评论 -
5种降低页面加载时间的方法
5种降低页面加载时间的方法1)压缩资源压缩js,css和图片文件2)减少http请求数合并js,css请求,使用精灵图3)样式先行,逻辑后行js文件放在body标签内的末尾(Yahoo优化指南)4)优化请求速度资源请求使用CDN链接就近获取,或服务器缓存资源5) 减少DOM操作过多的DOM操作,会引起重排,给渲染进程压力...原创 2022-03-29 19:04:24 · 5145 阅读 · 0 评论 -
重排和重绘
重绘(repaint)指某元素外观的改变所触发的浏览器行为,浏览器会根据元素的新属性重新绘制,使元素呈现新的外观。触发条件:1)重排;2)改变元素外观属性,如:color;重排(reflow)当渲染树中的某部分因为元素的规模尺寸,布局等改变而需要重新构建, 这就称为回流。触发条件:1、页面渲染初始化;2、添加或删除可见的DOM元素;3、元素位置的改变,或者使用动画;4、元素实际尺寸的改变;5、浏览器窗口尺寸的变化;6、填充内容的改变(文字或图片等)而引起的计算值宽度和高度的改变;原创 2022-03-25 16:58:20 · 182 阅读 · 0 评论 -
visibility 和 display 、 opacity的差别
display: none; 元素消失,脱离文档流。造成页面重排和重绘。子元素跟随父元素被隐藏,并且无法单独显示绑定的事件也无法触发。opacity: 0; 元素透明度为0;造成页面重绘不重排;子元素 opacity:1 无效,仍不显示;绑定的事件仍旧可以触发。visibility:hidden; 元素不可见;子元素设置 visibility:visible; 后,子元素显示;绑定的事件不能触发;共同点:DOM节点是存在的,仍旧可以用js 操作DOM。...原创 2022-03-22 14:04:17 · 554 阅读 · 0 评论 -
如何创建BFC
一、什么是BFC (Block Formatting Context):“块级格式化上下文”。BFC可以让元素成为隔离独立的容器且容器内的子元素不会影响到外面的布局二、如何创建BFC:1、(子)float:left/right。2、(子)position:absolute/fixed。3、(子)display:inline-block;3、(父)display:flex;4、(父)overflow:hidden/scroll/auto;三、可以干什么?1)解决兄弟和父子之间的margi原创 2022-03-11 14:29:51 · 2470 阅读 · 0 评论 -
css--盒子模型
盒子模型有什么用?在浏览器 渲染页面元素时,为了计算 元素的实际最终尺寸,会根据盒模型标准,将所有元素表示成一个个的矩形盒子,每个盒子包括4大区域。元素的盒子模型包括的4大区域: - content:内容的宽度、高度 - padding:内边距边界 - border:边框边界 - margin:外边距(margin 的尺寸不会被计算入最终容器宽度)W3C标准盒模型和IE盒模型的区别?区别在于box-sizing【元素的最终尺寸计算规则】默认值不同:1. 标准盒模型的box.原创 2022-03-07 14:41:28 · 213 阅读 · 0 评论 -
css--元素水平垂直居中的方法
css水平垂直居中原创 2022-03-03 17:53:15 · 116 阅读 · 0 评论 -
手把手教你用css画网格
用css 画网格原创 2022-02-24 21:46:06 · 2340 阅读 · 0 评论 -
scrollTop不生效的原因解决方法
scrollTop 设置 不生效;scrollTop 一直为0;原创 2022-02-21 12:01:31 · 16153 阅读 · 2 评论 -
2023最新前端规范
2023最新前端规范(全)原创 2022-02-10 16:44:21 · 3547 阅读 · 0 评论 -
前端提高用户体验的解决方案
提高用户体验原创 2022-02-08 10:05:52 · 1213 阅读 · 0 评论 -
vue单页项目中判断有没有上一页
场景:判断一个页面有没有上一页,没有就关闭页面,有的话就返回上一页测试了多种方法后,最后用window.sesstionStorage 结合router.afterEach实现了。我解决的思路:1)用window.history.length,如果 =1则是关闭页面,否则是返回上一页。最后发现history.length只增不减,它只记录你一共看了多少个页面;放弃;2)用document.referrer.它的值为url,当前页面就是从这个 url 所代表的页面跳转或打开的.但是我发现我的项目中.原创 2022-01-28 18:33:22 · 7534 阅读 · 4 评论 -
js数组排序的方法 汇总
js数组排序 sort原创 2021-12-24 11:05:23 · 773 阅读 · 0 评论 -
vue中清除路由缓存
场景:A跳转B,B跳转C。B在A第一次跳转B的时候,做了缓存,A在跳转B的时候,就不会重新走生命周期了。但真实的场景是,A在每次 跳转B的时候,都希望刷新,而C在返回B的时候,B需要保留现场,也就是用缓存的方式呈现。如下图:现在问题来了,如何解决紫色圈中的问题,清除pageB的页面缓存。解决思路:每次在pageB 返回pageA的时候,清除pageB 的缓存数据。所以这样在下次pageA跳转pageB的时候,就不会因为有缓存数据而读取首次的缓存数据,而在pageC返回pageB的时候,也去读原创 2021-11-04 11:32:50 · 5829 阅读 · 0 评论 -
前端面试之自我介绍
前面试过很多人,绝大多数都会要求做自我介绍,自我介绍其实很重要,给面试官留下第一印象,并且这个不是什么专业技能,完全可以通过稍微的练习把它做好,今天来直播一下我遇到的做自我介绍的奇葩。太简短型:曾经遇到一个面试者自我介绍:“你好,我叫XXX,今年24”。这样太简短了,而且说的都是我在简历上一眼能看到的东西,太简短了,会让面试官认为这个人是不是不愿意沟通,或者求职意愿不强不愿意多说话,而且面试官也没法继续接话下去。不说重点型:“我叫XX,今年24,毕业于XX学院,。。。有一个女朋友了”,这还是一个研.原创 2020-07-01 12:28:05 · 83132 阅读 · 26 评论 -
Lost connection to the flow server (0 retries remaining): |Out of retries, exiting!报错解决方法(flow)
最近在使用flow给javascript做静态类型检查,在安装flow后,运行flow,报错了报错信息如下:Lost connection to the flow server (0 retries remaining): |Out of retries, exiting!给这个目录启动flowm,但是flow server尝试连接了几次,都没有连上, 我推测了一下原因:我发现我一层一层的目录名字中,包含了中文字,造成了flow启动中解析不了。解决方法: 把含有中文字的目录名字,改成英文,好咧~.原创 2021-09-26 12:15:28 · 173 阅读 · 0 评论 -
vue双向绑定之(一)vue是如何知道数据发生变化的
vue最大的特点之一就是数据驱动视图。一个页面的数据是支撑页面变成一个活页面的基础。页面中数据变化的原因,可能是由于用户操作或者后端数据的变化引起的,数据data的变化,导致页面模板也随之变化。今天来说一下vue是如何知道数据变化了的。开门见山,vue监听数据变化其实是用了js自带的标准内置对象 Object 中的一个静态方法 definePropertyObject.defineProperty依据vue源码路径:项目中uve源码文件node_modules/vue/src/core/obs.原创 2021-09-24 16:32:34 · 646 阅读 · 0 评论 -
vue返回上一页不刷新页面的方法 / vue缓存页面
问题:vue在返回上一页的时候执行this.$router.go(-1) ,默认会让上一页重新执行一遍生命周期。解决方法:缓存上一页的数据,让其在已经存在的情况下,再次显示不重新执行生命周期;模板代码 (分发路由的页面): <!-- 缓存的页面 --> <keep-alive> <router-view v-if="$route.meta.keepAlive"></router-view> </keep-a原创 2020-10-09 17:41:43 · 11873 阅读 · 1 评论 -
vue 一招解决安卓5 IE浏览器 白屏 的兼容问题
公司最近的vue项目运行在安卓5或者IE浏览器中会白屏,找到了一招方法立马解决该问题,亲测有效出现问题的原因:浏览器兼容性问题,不支持ES6新特性,所以思路是加一些ES6转ES5的垫片,具体步骤如下:本方法适用于Vue CLI 4.x的vue2项目1、第一步在main.js中引入:import 'core-js/stable'import 'regenerator-runtime/runtime'2、第二步在babel.config.js中添加 useBuiltIns: ‘entry’:.原创 2021-07-28 12:07:46 · 1412 阅读 · 0 评论 -
vue 离开页面之前保存数据
这是一个常用的场景:用户在一个填写很多数据的表单页面,填写部分数据后,想返回到上一页做其它操作。这时产生了一个离开页面保存数据的需求。需要的知识点和步骤:监听离开页面的时机(建议用vue-router中的组件导航守卫:beforeRouteLeave);存储(建议用:window.localStorage 或者 vuex);下次进来之前读取缓存,如果有就赋值;下面写下实现的教程:监听离开页面的时机用:beforeRouteLeave,存储用localStoragebeforeRout.原创 2021-07-13 10:50:42 · 4252 阅读 · 0 评论 -
前端小白建站一步到位
对于前端工程师,Linux小白的我来说,买云服务器自己建站简直难如登天;后来在网上搜寻了各种参考资料,居然把买服务器,申请域名和备案,都跑通了,今天主要说说建站:目标:跑通用云服务器(一)准备工具, 跑通云服务器推荐工具:Xftp6、Xshell6why?什么是它们?1)因为我们要上传文件到云服务器主机,比如我们的前端项目,用到的插件或者引入的图片等;2)Xftp可以让我们直接在windows上图形化操作,Xshell可以直接让我们在windows上操作;3)Xftp支持SFTP协议(SF原创 2020-11-18 12:00:24 · 295 阅读 · 0 评论 -
CSS开发规范---BEM规范
BEM的意思是块(block),元素(element),修饰符(modifier)一、Why? 为什么要有BEM规范呢?因为我们经常写CSS的时候,命名按照日常业务逻辑来命名,在后期修改或者维护的时候,除了非常了解那个HTML元素和逻辑,不然很不易读和维护;错误示范:二、How?1、用"-" 代表块;2、用"__" 代表某个块下面的子元素;3、用"–" 来修饰某个块或者元素的状态;.person{}/* 块 */.person-tall{}/* - :块 */.person原创 2020-11-06 18:11:26 · 221 阅读 · 0 评论 -
一次说清js定义函数的三种方式及区别
1、函数声明(优先使用,声明的时候会被提升)function fun(){ console.log('123');}fun()//直接调用函数名2、函数表达式,也叫匿名函数;var fun = function(){ console.log('123');}fun()//调用匿名函数,使用变量名加()过程:这种定义方式是把函数赋值给了一个变量,函数并没有真正的名字;既然是变量,声明的时候,函数本身不会被提升,提升的是变量名;3、自执行函数(自己执行自己,并且在声明的同时原创 2020-09-14 14:32:55 · 700 阅读 · 2 评论 -
在apicloud上实现长按列表某一项弹出框
1、what:场景:用apicloud做APP时要求长按列表中某一项对该项做出操作2、如何做how:apicloud的文档里有一个监听长按的事件api.addEventListener({ name:'longpress'}, function(ret, err){ alert('长按了页面');});vue中有个@touchstar事件,手指刚触碰到元素时触发<li class="comment-item" v-for="(item, inde原创 2020-08-28 12:37:32 · 574 阅读 · 0 评论 -
js 时间转换标准格式、时间戳转换标准格式
前端经常需要用到时间格式为格式为:2020-08-10 10:00:34我整理了一个通用的函数现在直接上代码,拿来就能用:一、当前时间转换为标准格式:function getFormatDate() { var date = new Date(); var month = date.getMonth() + 1; var day = date.getDate(); var hour = date.getHours(); var minutes = dat原创 2020-08-10 10:19:51 · 2063 阅读 · 0 评论