前端
文章平均质量分 68
Ashley的成长之路
无论处于什么环境,向下生根,向上开花
展开
-
TypeScript的基础类型和高级类型梳理总结
TypeScript常见的基础类型和高级类型梳理总结原创 2024-03-10 20:53:01 · 826 阅读 · 0 评论 -
SPA首屏加载慢的优化方案
单页面应用首屏加载慢的优化方案原创 2024-03-03 01:16:09 · 908 阅读 · 0 评论 -
小程序上新(2022.11.15~11.28)
小程序上新(2022.11.15~11.28)原创 2022-11-28 20:56:42 · 673 阅读 · 0 评论 -
vue3中文档查漏补缺小笔记
个人有个习惯,就是隔一段时间有空的话就会重新看看技术栈的官方文档,每次重新看都会有新的意外的收获,就像在不同年龄的时候去看同一本书,总是伴随着不一样的体验,这感觉不错(????) 本文主要记录一下,我自己之前对于vue没注意到的一些语法或者知识点,所以内容比较散和没有结构,所看文档 为vue3中文文档 :介绍 | Vue.js目录1、模板语法->动态参数2、模板语法->缩写3、Data Property4、方法5、防抖和节流6、计算属性(co...原创 2021-11-07 15:57:57 · 413 阅读 · 0 评论 -
vue3.0性能优化点之静态标记(PatchFlag)
vue3.0性能优化点之静态标记(PatchFlag)原创 2021-11-04 17:02:19 · 4256 阅读 · 2 评论 -
vue3的composition api中watch和watchEffect的使用差异
watch和watchEffect的使用差异原创 2021-10-09 08:53:41 · 505 阅读 · 0 评论 -
React中拖放的实现
React中拖放效果的实现原创 2021-08-22 18:23:44 · 416 阅读 · 1 评论 -
前端项目的理想架构
|最近在上王沛老师的React进阶课,做下学习笔记前端项目的理想架构可以从5个维度衡量:可扩展、可维护、可测试、易开发、易构建但这5个方面不是都可兼得的,易于开发的如angular把所有内容都写在一个文件上,但这显然是不易于维护的,这5个纬度怎么取舍需要我们在业务中根据实际情况衡量而要达到这5个要求,又分别需要考虑什么呢?如下:1、易于开发 a、开发工具是否完善 b、生态圈是否繁荣c、社区是否活跃2、易于扩展 a、增加新功能是否容...原创 2021-08-18 20:34:09 · 497 阅读 · 0 评论 -
深入学习Sass/Scss
最近在引入sass的变量、mixin时翻了下官方文档,发现很多好用的方法和细节以前没有注意到,再次扒一遍文档,记录下,本人觉得有用的内容。1、什么是Sass?Sass 是一款强化 CSS 的辅助工具,它在 CSS 语法的基础上增加了变量 (variables)、嵌套 (nested rules)、混合 (mixins)、导入 (inline imports) 等高级功能2、Sass的特色功能完全兼容 CSS3 在 CSS 基础上增加变量、嵌套 (nestin...原创 2021-07-22 15:54:49 · 524 阅读 · 0 评论 -
vue-cli3/4全局引入scss变量和使用
试了网上很多方法都不行,版本不一致,语法不大相同。最后通过各种实践,成功配置好了,记录下来方便以后查看,步骤如下:1、安装sass-resources-loader//安装最新版本npm i sass-resources-loader --save-dev//安装制定版本npm i [email protected] --save-dev在package.json的devDependencies中看到sass-resources-loader即安装成功...原创 2021-07-21 14:25:25 · 2141 阅读 · 1 评论 -
数据可视化学习笔记之预习篇
数据可视化学习笔记预习篇原创 2021-06-02 17:27:21 · 249 阅读 · 1 评论 -
vue组件通信方式总结
vue各个组件之间的作用域是独立的,数据能互相引用,在实际开发中,组件之间的数据交互无可避免,所以总结一下,可以通过哪些方式实现组件之间通信。一、组件之间的关系可以分为三大类 父子组件通信 兄弟组件通信 跨级组件通信二、通信方法如下 props/$emit (父子组件常用) $children/$parent provide/inject ref/refs eventBus Vuex (兄...原创 2021-04-27 14:33:06 · 143 阅读 · 1 评论 -
HTTP状态码
当浏览者访问一个网页时,浏览者的浏览器会向网页所在服务器发出请求。当浏览器接收并显示网页,此网页所在的服务器会返回一个包含HTTP状态码的信息头(server header)用以响应浏览器的请求。HTTP响应报文由三个部分组成,分别是:状态行、消息报头、响应正文。状态行(status line)包含:协议版本(HTTP-Version)、响应状态码(Status-Code)、状态码描述(Reason-Phrase CRLF) 即:HTTP/1.1 200 OKHTTP状态...原创 2021-03-11 22:05:59 · 88 阅读 · 0 评论 -
如何理解语义化
1、语义化的背景 以前的HTML的结构,基本上就是DIV+CSS。然而,DIV它并没有什么任何的意义,全靠CSS显示页面的样式。那么近几年呢,开发者提出了HTML结构的语义化,所以W3C就制定出了语义化标签。2、什么是语义化 语义化就是构成HTML结构的标签要有意义,比如有这样的标签:head表示页面头部,main表示页面主题,footer表示页面底部。那么这些标签构成的HTML结构就是有意义的,也是语义化的。如果说页面的头部、主体以及底部都用div来表示,那么他就不是...原创 2021-03-08 17:42:54 · 2816 阅读 · 0 评论 -
前端性能优化
一个项目,想要一个良好的用户体验,做好性能优化必不可少,而性能优化可以分为两大块,即加载时的优化和运行时的优化,下面看看在这两个阶段分别可以做哪些优化。1、加载时优化1)减少HTTP请求和减少HTTP请求大小 一个完整的 HTTP 请求需要经历 DNS 查找,TCP 握手,浏览器发出 HTTP 请求,服务器接收请求,服务器处理请求并发回响应,浏览器接收响应等8个步骤。当请求较多时就会严重消耗性能,这就是为什么要将多个小文件合并为一个大文件(如:雪碧图),从而减少 HTTP 请求次数的原因...原创 2021-03-06 11:03:48 · 256 阅读 · 1 评论 -
cookies、sessionStorage和localStorage的区别
1、概念1)cookies 这个单词英文本义是小甜饼,顾名思义,cookie是非常小的,它的大小限制为4KB左右,是网景公司的一位员工在1993年3月发明。主要用于保存登录信息,比如PC端的网站登录页面经常看到“的记住密码”功能,就是通过在Cookie中存入一段识别用户身份的数据来实现的,这也是有些网站二次打开不需要再次登录的原因。2)localStorage它是 HTML5 标准中新加入的技术,它并不是什么划时代的新东西。早在 IE 6 时代,就有一个叫 userData 的东西...原创 2021-03-06 09:52:18 · 273 阅读 · 0 评论 -
深入解析Promise
之前一直在用Promise做http请求,但是一直对其中细节不怎么清楚,只停留在会用的状态,趁这次技术分享会,查了几天资料,认真的去看了相关知识,包含同步、异步编程还有Event Loop事件循环相关内容1、同步编程和异步编程1.1JavaScript单线程2、Promise的含义和作用3、Promise的特点和优缺点4、Promise的使用4.1 Promise的基本用法4.2 Promise.proto...原创 2021-01-22 09:18:31 · 188 阅读 · 0 评论 -
从输入URL到页面显示都发生了什么?
本周技术分享会,我选了这道经典面试题作为主题,通过学习,写了分享的PPT在这里记录留档一下原创 2021-01-15 10:12:33 · 196 阅读 · 2 评论 -
vue基于element封装分页组件
写管理后台,分页组件必不可少,提取一个分页公共组件,便于全局调用。在这个组件中把当前页、每页条数、每页条数选项、总条目数、组件布局、页码按钮的数量 都写成可通过props接收从页面传进来的参数,同时每个参数都设置默认值,这样用户就不用每个参数都要传值,在用户没有传值的参数中,就使用默认值,这样很好的提高了组件灵活性,满足多种场景需求。1、在vue项目的components文件夹下新建 pagination.vue文件,代码如下:通过props接收父组件传入的值,通过 自定义事件 $emi..原创 2020-12-08 16:53:23 · 689 阅读 · 8 评论 -
代码质量提升措施
最近学习了一下代码质量提升相关知识,在这里总结记录一下一、代码质量提升 代码质量提升主要从三个单面去考虑:代码健壮性、可读性、可复用性; 1、代码健壮性:代码出现bug时,bug不至于让整个程序崩溃,同时bug是能快速定位到的; 加强代码健壮性的措施: (1)参数层面//a、直接简单的参数function add(a, b) { return a + b;}add(2);//因漏传参数,出现bug// 优化:...原创 2020-10-23 11:57:50 · 883 阅读 · 0 评论 -
前端安全加密-对称加密、非对称加密、哈希算法(md5/sha)
一、对称加密 在密码学上,加密和解密使用的是同一个秘钥的称为对称加密。对称加密的秘钥一般比较短,小于256kbit,当然,秘钥越大,安全性就更强,但是加密和解密的过程耗时也就更长,其中权衡,取决于实际应用场景。优点:计算量小,简单快速,适合于对海量数据进行加密处理;缺点:加密人和解密人需要拥有同一把秘钥,那秘钥如果通过 不安全的通道进行交换,就存在被黑客窃听的风险,安全性丧失;同时双方还需要好好管理秘钥,不能泄露秘钥,否则也不安全了,管理秘钥成本较高。常见对称加密算...原创 2020-09-10 15:53:02 · 3916 阅读 · 1 评论 -
vue项目按需引入Echart以及动态渲染Echart图表
最近做大数据展示平台,需要用到很多图表去实现数据可视化,图表比较多,但其实用到的就是 饼图、柱状图和折线图,如果完整引入,会多很多不必要的插件和增大包的体积,最近一直在上性能优化的课,明白 完整引入和按需引入的差别,所以认真去了解了Echart如何按需引入,在此记录一下:1、安装babel-plugin-equire插件,装在devDependencies 里,即装在开发环境里,不需要装在生产环境里npm install babel-plugin-equire -D2、在.b...原创 2020-09-01 12:23:16 · 2450 阅读 · 1 评论 -
pc端使用rem进行适配 (vu-cli3/4+lib-flexible+postcss-pxtorem)
1、使用vue-cli3 创建好项目 vue create responsive-website-template2、安装lib-flexible依赖原创 2020-07-24 17:15:38 · 3486 阅读 · 33 评论 -
修改浏览器默认滚动条样式,兼容IE和谷歌
在项目中,很经常会需要修改浏览器滚动条的默认样式,因为浏览器本身的滚动条可能和设计师设计的页面很不搭配,话不多说上代码1、谷歌浏览器写法,webkit内核浏览器::-webkit-scrollbar :滚动条整体部分,其中的属性有width,height,background,border等。::-webkit-scrollbar-button :滚动条两端的按钮。可以用display:none让其不显示,也可以添加背景图片,颜色改变显示效果。::-webkit-scrollbar-tra原创 2020-07-11 20:52:17 · 1388 阅读 · 1 评论 -
在vue中使用WebSocket通信
WebSocket 是 HTML5 开始提供的一种在单个 TCP 连接上进行全双工通讯的协议。很多人可能会问,我们不是已经有HTTP了吗?为什么还要推出websocket?万物产生必有因,HTTP请求有一个很大的缺陷,那就是,他只能由客户端发起通信,WebSocket 的全双工通讯很好的弥补了这一缺陷。 在websocket没有出现之前,很多网站为了获取实时数据,...原创 2020-04-25 10:31:47 · 1621 阅读 · 0 评论 -
前端错误监控捕获和上报
1、前端错误分为两大类: a、即时运行错误:代码错误; b、资源加载错误;2、错误的捕获方式 a、即时运行错误: 1)try..catch 2)window.onerror 捕获; b、资源加载错误: 1) object.onerror 2) performance.getEntries() 3) Error事件...原创 2020-04-21 23:34:43 · 736 阅读 · 0 评论 -
JavaScript中call()、apply()的使用
每个函数都包含两个非继承而来的方法:call()和apply(), 这两个方法是为了动态改变上下文,即改变this指向而出现的,当一个object中没有某个方法,而其他对象的有,我们就可以借助call或apply用其它对象的方法来操作1、不带参数的call()Function.call(obj) //不带参数看一个例子,本例调用 person 的 fullName 方法,并用于...原创 2020-04-20 22:57:11 · 204 阅读 · 0 评论 -
HTTP和HTTPS有什么区别?你了解HTTP/2吗?
一、HTTPHTTP协议即超文本传输协议,HTTP被广泛用于web浏览器和万维网服务器之间传递信息;HTTP的主要特点就是:简单快速、灵活、无连接、无状态;但HTTP存在以下不足: 1、通信使用明文,这导致可能被窃听窥视,不能传敏感信息,比如:支付密码等; 2、不验证通信方的身份,因此有可能遭遇伪装; 3、无法证明报文的完整性,所以有可能已遭篡改...原创 2020-03-07 13:59:26 · 682 阅读 · 0 评论 -
POST方法和GET方法的区别总结
最近在深入学习http协议类,对http请求中 post方法和 get方法 的区别 做一下总结记录:1、get 在浏览器回退时是无害的,而post会再次提交请求;2、get 产生的URL地址可以被收藏,而post不可以;3、get请求会被浏览器主动缓存,而post不会主动缓存,除非手动设置;4、get请求参数会被完整的保留在浏览器 历史记录中,而post不会;5、get请...原创 2020-02-06 12:32:21 · 420 阅读 · 0 评论 -
在vue中wgs84和gcj02互相转化,地球坐标系转火星坐标系
在开始转化前先理清几个名词的定义,以及为什么要转化?WGS-84坐标系:也叫地球坐标系,他是国际上通用的坐标系,谷歌地图用的就是WGS-84(谷歌中国除外),使用GPS芯片或者 北斗芯片的设备获取到的经纬度就是符合WGS-84坐标系的。GCJ-02坐标系:也叫 火星坐标系或国测坐标系,他是由中国国家测绘局独创的坐标体系;它是一种对经纬度数据的加密算法,即 加入随机的偏差,国...原创 2020-01-07 15:13:14 · 4630 阅读 · 4 评论 -
vue数组的深克隆和浅克隆
在开发过程中,前端获取到后端的数据之后,通常直接复制后就使用,比如:var _data = res.data; //浅克隆 data是一个数组这就是浅克隆的写法,因为后端返回的data是一个数组,而数组是引用数据类型(自行了解基本数据类型和引用数据类型)如果我们接下来的代码对 _data 进行的处理操作,res.data也会一起改变,这是因为浅克隆, 克隆的是一个地址,下面我用...原创 2020-01-02 14:48:31 · 4577 阅读 · 0 评论 -
解决vant 无法修改组件的样式问题,亲测有效
在vue中,常规写style都会加上scoped,以避免全局污染,但是加上了scoped会导致无法修改 vant UI框架组件本身的样式但是scoped是不能放弃的,这辈子都不能放弃的,那就得另寻出出路了 我有用sass预处理器在有sass预处理器 情况下,要解决上述问题不难,只要在原有的样式类前面加 /deep/ 即可这样就可以达到了...原创 2019-11-18 19:41:33 · 10534 阅读 · 6 评论 -
解决element 弹出多个message消息提示 问题
在新版本的element中,官方对 message消息提示 做了修改,修改成一个请求对应一个提示语,这就会导致一个多条消息提示共存的一个问题,而很多情况下,这多条消息提示的内容是一样的,从用户的体验来说,并不友好我们可以通过 重写 message 来解决这个问题首先 先写一个resetMessage.jsimport { Message} from '...原创 2019-11-08 10:56:04 · 12940 阅读 · 2 评论 -
vue-router 路由怎么传递一个或多个参数?
在前端开发过程中,经常会遇到 在页面跳转的时候 ,需要把一个或多个参数传到 目标页面,那么如何实现带一个参数或多参跳转呢? vue-router中传递参数主要分两大类:编程式的导航 router.push 声明式的导航 <router-link>本文主要演示一下编程式导航 router.push 传递参数的实现。编程式导航又分两种方式:第一种是...原创 2019-06-04 19:53:35 · 33369 阅读 · 7 评论 -
vue i18n+element +lockr 实现语言切换 国际化
在一些项目中需要做国际化,即显示语言切换,最常见的就是中英文切换,基于vue前端框架、结合element+vue-i18n即可实现,同时使用vue的本地存储插件 lockr 记录语言状态,可以防止因为刷新 而丢失语言状态。1、 首先 先在vue项目中安装 vue-i18n 和 lockr 执行语句:npm install vue-i18n --save ...原创 2019-06-12 21:18:59 · 1065 阅读 · 0 评论 -
在html5中使用hotcss实现手机端自适配
Html5页面在手机端做自适配是很常见的技术需求,下面介绍下在html页面使用hotcss,hotcss不是一个库,也不是一个框架。它是一个移动端布局开发解决方案。1、新建一个项目文件夹,目录结构如下图:hotcss.js 文件可以下载官方的,也可以在我GitHub(https://github.com/Grace110/hotcss)上下载整个demo//pc2rem.sc...原创 2019-06-14 16:44:38 · 1327 阅读 · 0 评论 -
win10开放端口、vue局域网访问
在vue项目中,启动之后,可以看到两个访问网址,一个本地访问地址(Local),一般为http://localhost:8080/ 还有一个是局域网访问网址(Network),一般是http://你本机的ip:端口/, 当你的vue项目运行起来之后,与你同在一个局域网内的其他人可以通过这个ip地址访问你的项目,公司现在流行前后端分离开发项目,有了这个局域网访问网址,很大程度的...原创 2019-06-10 18:40:55 · 5982 阅读 · 8 评论 -
const that = this; 的重要性
在看一些大神的代码时,经常会看到 const that = this;或var that = this,(const是ES6的新属性,是变量标识符)那为什么要写 const that = this;呢?const that = this 其实就是将当前的this对象复制一份 给 that变量 中那是因为在JavaScript中,this代表的是当前对象,他是会随这程序运行不停改变的...原创 2019-06-11 19:11:39 · 10416 阅读 · 3 评论 -
browserslist 目标浏览器配置
browserslist的作用:可以根据提供的目标浏览器的环境来智能添加css前缀,达到兼容旧版本浏览器的目的;这样避免了一股脑的添加,也避免冗余的兼容代码,以提高代码的编译质量。//packpackage.json 页{ "browserslist": [ //注意是一个数组 "> 1%", //全球超过1%人使用的浏览器 ...原创 2019-07-29 18:14:25 · 2123 阅读 · 0 评论 -
前端项目如何引入字体包? 引入字体包不起效果?
因为设计师用的是IMac电脑,设计图默认使用的字体为 pingFangSC-Regular,这就需要我们做开发的 引入苹方字体包 以达到和设计图一致的视觉效果,(引入其他字体包 同理)先上个苹方字体包下载链接: https://pan.baidu.com/s/1xI4A7MO3u-P2qQbvS8pu0w 提取码:gqwi首先先演示下如何引入字体包1、下载好字体包之后,在项目中新...原创 2019-07-30 14:05:12 · 10056 阅读 · 0 评论