自定义博客皮肤VIP专享

*博客头图:

格式为PNG、JPG,宽度*高度大于1920*100像素,不超过2MB,主视觉建议放在右侧,请参照线上博客头图

请上传大于1920*100像素的图片!

博客底图:

图片格式为PNG、JPG,不超过1MB,可上下左右平铺至整个背景

栏目图:

图片格式为PNG、JPG,图片宽度*高度为300*38像素,不超过0.5MB

主标题颜色:

RGB颜色,例如:#AFAFAF

Hover:

RGB颜色,例如:#AFAFAF

副标题颜色:

RGB颜色,例如:#AFAFAF

自定义博客皮肤

-+

前端小师姐迪迪_的博客

热爱前端,热爱生活,微信gxyzxowx,希望认识更多前端朋友

  • 博客(48)
  • 资源 (1)
  • 收藏
  • 关注

原创 2023最新前端规范

2023最新前端规范(全)

2022-02-10 16:44:21 3389

原创 前端面试之自我介绍

前面试过很多人,绝大多数都会要求做自我介绍,自我介绍其实很重要,给面试官留下第一印象,并且这个不是什么专业技能,完全可以通过稍微的练习把它做好,今天来直播一下我遇到的做自我介绍的奇葩。太简短型:曾经遇到一个面试者自我介绍:“你好,我叫XXX,今年24”。这样太简短了,而且说的都是我在简历上一眼能看到的东西,太简短了,会让面试官认为这个人是不是不愿意沟通,或者求职意愿不强不愿意多说话,而且面试官也没法继续接话下去。不说重点型:“我叫XX,今年24,毕业于XX学院,。。。有一个女朋友了”,这还是一个研.

2020-07-01 12:28:05 81622 22

原创 ajax和fetch的区别

但是原生的ajax不好用,我们会用$.ajax或者axios插件去请求,他们都是ajax的封装。因为 ajax只是一个异步xhr解决方案的概念,不能和fetch这个api同日而语。所以我们我们说ajax和fetch的区别的时候,其实是想说这里。问到这里的时候,你就已经入坑了,以前我们都用ajax去做请求,最近出来个fetch是什么?

2023-08-24 17:37:39 1946

原创 前端更新代码自动提示用户更新

在man.ts中引入autoUpdate.ts,并做更新后的处理。代码是基于vue3 + ts。

2023-08-24 11:01:51 244

原创 Typescript中的interface,type和class的相同点和不同点

感觉他们很像是不是?

2023-06-21 16:46:56 462

原创 前端预防XSS攻击全攻略

前端如何预防XSS攻击?XSS攻击做了哪些坏事?

2023-02-23 17:45:32 2174 1

原创 vue项目的首屏优化策略

虽然标题是vue项目的首屏优化策略,但是里面绝大部分的方法,对于其他语言写成的单页应用同样适用。

2022-12-14 11:56:11 1996

原创 为什么你应当使用typescript

为什么你应该适用typescript呢

2022-10-31 12:20:42 314

原创 vue3/vue2的兄弟组件的传值

Vue2.x 使用 EventBus 事件总线进行兄弟组件通信,而在Vue3中事件总线模式已经被移除,官方建议使用外部的、实现了事件触发器接口的库,例如 mitt。

2022-09-16 12:47:07 729

原创 Virtual script not found, may missing <script lang=“ts“> / “allowJs“: true / jsconfig.json. 报错解决

Virtual script not found, may missing / "allowJs": true / jsconfig.json. volar

2022-09-06 15:33:36 29443

原创 vite和webpack的区别

vite和webpack的区别

2022-08-25 16:56:20 6082

原创 前端工程师的素养

前端求职面试前端工程师素养

2022-08-24 10:51:05 401

原创 axios创建实例与不创建实例/创建实例的作用

3)在处理相应拦截时处理内容完全不同,比如两个不同的axios实例请求了两个完全不同的服务器,而这两个服务器返回数据的code规则完全不同,这就要在各自的拦截器中分别处理了。2)在处理请求拦截时处理内容完全不同,比如你可以在实例A的请求拦截里面设置Loading转圈,而在另一个实例B中不使用loading转圈。,其实并不是使用了axios.create()才创建了一个实例(单例),而是上面3种方法都创建了实例。我们看到axios的官方文档中有创建axios实例去发送请求的方式。...

2022-08-17 17:38:30 789

原创 webpack、vite--获取环境变量的区别(vue2/vue3)

vite获取环境变量的方法,vue3

2022-08-03 15:07:10 661

原创 通俗理解防抖和节流

答: 限制函数的执行次数防抖和节流都是为了限制函数的执行次数,避免短时间不必要的多次函数执行答: 防止高频调用函数带来的性能损耗和卡顿;答:防抖:连续多次触发事件,只执行最后一次节流:n秒内多次触发事件,只执行一次答:防抖:1)search搜索联想时,用户在不断输入值时,搜索框下面自动补全搜索关键字(用防抖来实现当用户暂停连续输入时才处理用户输入的数据)2)输入手机号,邮箱验证时输入字符的检测(用防抖来实现当用户暂停连续输入时才处理用户输入的数据)节流:1)触底加载更多/滚动加载更多事件(用节

2022-07-08 16:34:02 685

原创 前端---几种地图坐标系之间的转换

原因是,不同的产品他们对经纬度的表达方式不同(用的不同坐标系表达坐标)1、GCJ-02(又叫火星坐标系),国测局02年发布的坐标,国内多家地图厂商通常都用这个。2、GPS坐标系。这里分WGS-84和CGCS2000坐标系(中国国家大地坐标系)1)WGS-84坐标系:是GPS原始坐标体系,在中国,不允许任何一个地图产品直接使用WGS-84坐标下的地理数据,为了保密,不暴露真实坐标。2)CGCS2000坐标系:国家大地坐标系该坐标系是通过中国GPS 连续运行基准站、 空间大地控制网以及天文大地网与空间地网

2022-07-08 16:23:49 1957

原创 通俗讲跨域

浏览器跨域如何解决

2022-06-24 18:39:10 222

原创 跨域有哪些解决方法?

跨域解决方法

2022-06-09 18:33:27 110

原创 5种降低页面加载时间的方法

5种降低页面加载时间的方法1)压缩资源压缩js,css和图片文件2)减少http请求数合并js,css请求,使用精灵图3)样式先行,逻辑后行js文件放在body标签内的末尾(Yahoo优化指南)4)优化请求速度资源请求使用CDN链接就近获取,或服务器缓存资源5) 减少DOM操作过多的DOM操作,会引起重排,给渲染进程压力...

2022-03-29 19:04:24 5017

原创 重排和重绘

重绘(repaint)指某元素外观的改变所触发的浏览器行为,浏览器会根据元素的新属性重新绘制,使元素呈现新的外观。触发条件:1)重排;2)改变元素外观属性,如:color;重排(reflow)当渲染树中的某部分因为元素的规模尺寸,布局等改变而需要重新构建, 这就称为回流。触发条件:1、页面渲染初始化;2、添加或删除可见的DOM元素;3、元素位置的改变,或者使用动画;4、元素实际尺寸的改变;5、浏览器窗口尺寸的变化;6、填充内容的改变(文字或图片等)而引起的计算值宽度和高度的改变;

2022-03-25 16:58:20 167

原创 visibility 和 display 、 opacity的差别

display: none; 元素消失,脱离文档流。造成页面重排和重绘。子元素跟随父元素被隐藏,并且无法单独显示绑定的事件也无法触发。opacity: 0; 元素透明度为0;造成页面重绘不重排;子元素 opacity:1 无效,仍不显示;绑定的事件仍旧可以触发。visibility:hidden; 元素不可见;子元素设置 visibility:visible; 后,子元素显示;绑定的事件不能触发;共同点:DOM节点是存在的,仍旧可以用js 操作DOM。...

2022-03-22 14:04:17 525

原创 如何创建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 2399

原创 css--盒子模型

盒子模型有什么用?在浏览器 渲染页面元素时,为了计算 元素的实际最终尺寸,会根据盒模型标准,将所有元素表示成一个个的矩形盒子,每个盒子包括4大区域。元素的盒子模型包括的4大区域: - content:内容的宽度、高度 - padding:内边距边界 - border:边框边界 - margin:外边距(margin 的尺寸不会被计算入最终容器宽度)W3C标准盒模型和IE盒模型的区别?区别在于box-sizing【元素的最终尺寸计算规则】默认值不同:1. 标准盒模型的box.

2022-03-07 14:41:28 195

原创 css--元素水平垂直居中的方法

css水平垂直居中

2022-03-03 17:53:15 105

原创 手把手教你用css画网格

用css 画网格

2022-02-24 21:46:06 2203

原创 scrollTop不生效的原因解决方法

scrollTop 设置 不生效;scrollTop 一直为0;

2022-02-21 12:01:31 15442 2

原创 前端提高用户体验的解决方案

提高用户体验

2022-02-08 10:05:52 1180

原创 vue单页项目中判断有没有上一页

场景:判断一个页面有没有上一页,没有就关闭页面,有的话就返回上一页测试了多种方法后,最后用window.sesstionStorage 结合router.afterEach实现了。我解决的思路:1)用window.history.length,如果 =1则是关闭页面,否则是返回上一页。最后发现history.length只增不减,它只记录你一共看了多少个页面;放弃;2)用document.referrer.它的值为url,当前页面就是从这个 url 所代表的页面跳转或打开的.但是我发现我的项目中.

2022-01-28 18:33:22 7204 4

原创 js数组排序的方法 汇总

js数组排序 sort

2021-12-24 11:05:23 730

原创 vue 清空路由

vue 清空路由

2021-12-21 17:33:30 9030 2

原创 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 5666

原创 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 148

原创 vue双向绑定之(一)vue是如何知道数据发生变化的

vue最大的特点之一就是数据驱动视图。一个页面的数据是支撑页面变成一个活页面的基础。页面中数据变化的原因,可能是由于用户操作或者后端数据的变化引起的,数据data的变化,导致页面模板也随之变化。今天来说一下vue是如何知道数据变化了的。开门见山,vue监听数据变化其实是用了js自带的标准内置对象 Object 中的一个静态方法 definePropertyObject.defineProperty依据vue源码路径:项目中uve源码文件node_modules/vue/src/core/obs.

2021-09-24 16:32:34 625

原创 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 1344

原创 vue 离开页面之前保存数据

这是一个常用的场景:用户在一个填写很多数据的表单页面,填写部分数据后,想返回到上一页做其它操作。这时产生了一个离开页面保存数据的需求。需要的知识点和步骤:监听离开页面的时机(建议用vue-router中的组件导航守卫:beforeRouteLeave);存储(建议用:window.localStorage 或者 vuex);下次进来之前读取缓存,如果有就赋值;下面写下实现的教程:监听离开页面的时机用:beforeRouteLeave,存储用localStoragebeforeRout.

2021-07-13 10:50:42 3992

原创 前端小白建站一步到位

对于前端工程师,Linux小白的我来说,买云服务器自己建站简直难如登天;后来在网上搜寻了各种参考资料,居然把买服务器,申请域名和备案,都跑通了,今天主要说说建站:目标:跑通用云服务器(一)准备工具, 跑通云服务器推荐工具:Xftp6、Xshell6why?什么是它们?1)因为我们要上传文件到云服务器主机,比如我们的前端项目,用到的插件或者引入的图片等;2)Xftp可以让我们直接在windows上图形化操作,Xshell可以直接让我们在windows上操作;3)Xftp支持SFTP协议(SF

2020-11-18 12:00:24 274

原创 CSS开发规范---BEM规范

BEM的意思是块(block),元素(element),修饰符(modifier)一、Why? 为什么要有BEM规范呢?因为我们经常写CSS的时候,命名按照日常业务逻辑来命名,在后期修改或者维护的时候,除了非常了解那个HTML元素和逻辑,不然很不易读和维护;错误示范:二、How?1、用"-" 代表块;2、用"__" 代表某个块下面的子元素;3、用"–" 来修饰某个块或者元素的状态;.person{}/* 块 */.person-tall{}/* - :块 */.person

2020-11-06 18:11:26 200

原创 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 10611

原创 一次说清js定义函数的三种方式及区别

1、函数声明(优先使用,声明的时候会被提升)function fun(){ console.log('123');}fun()//直接调用函数名2、函数表达式,也叫匿名函数;var fun = function(){ console.log('123');}fun()//调用匿名函数,使用变量名加()过程:这种定义方式是把函数赋值给了一个变量,函数并没有真正的名字;既然是变量,声明的时候,函数本身不会被提升,提升的是变量名;3、自执行函数(自己执行自己,并且在声明的同时

2020-09-14 14:32:55 680 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 544

仿积目app上筛选年龄的双向滑块.html

仿积目app上筛选年龄的双向滑块,玩过积目的都知道里面筛选功能是个双向选择的滑块,我用vue实现了该功能

2020-06-29

空空如也

TA创建的收藏夹 TA关注的收藏夹

TA关注的人

提示
确定要删除当前文章?
取消 删除