Amethyst紫宣
码龄6年
求更新 关注
提问 私信
  • 博客:42,645
    42,645
    总访问量
  • 54
    原创
  • 18
    粉丝
  • 30
    关注
IP属地以运营商信息为准,境内显示到省(区、市),境外显示到国家(地区)
IP 属地:上海市
加入CSDN时间: 2019-12-19
博客简介:

Amethyst的博客

查看详细资料
个人成就
  • 获得46次点赞
  • 内容获得36次评论
  • 获得126次收藏
  • 代码片获得115次分享
  • 博客总排名1,808,838名
创作历程
  • 5篇
    2022年
  • 37篇
    2021年
  • 12篇
    2020年
成就勋章
TA的专栏
  • 前端面试
    12篇
  • ajax
  • JavaScript
    13篇
  • ES6
    2篇
  • react
    5篇
  • web移动端
    5篇
  • Redux
    3篇
  • webpack
    3篇
  • Bootstrap
    2篇
  • css
    1篇
  • Canvas
    2篇
  • jQuery
    2篇

TA关注的专栏 1

TA关注的收藏夹 0

TA关注的社区 0

TA参与的活动 0

创作活动更多

新星杯·14天创作挑战营·第13期

这是一个以写作博客为目的的创作活动,旨在鼓励大学生博主们挖掘自己的创作潜能,展现自己的写作才华。如果你是一位热爱写作的、想要展现自己创作才华的小伙伴,那么,快来参加吧!我们一起发掘写作的魅力,书写出属于我们的故事。我们诚挚邀请你们参加为期14天的创作挑战赛!注: 1、参赛者可以进入活动群进行交流、互相鼓励与支持(开卷),虚竹哥会分享创作心得和涨粉心得,答疑及活动群请见:https://bbs.csdn.net/topics/619781944 【进活动群,得奖概率会更大,因为有辅导】 2、文章质量分查询:https://www.csdn.net/qc

90人参与 去参加
  • 最近
  • 文章
  • 专栏
  • 代码仓
  • 资源
  • 收藏
  • 关注/订阅/互动
更多
  • 最近

  • 文章

  • 专栏

  • 代码仓

  • 资源

  • 收藏

  • 关注/订阅/互动

  • 社区

  • 帖子

  • 问答

  • 课程

  • 视频

搜索 取消

常见React-hooks原理

文章目录useMemouseCallbackuseStateuseReduceruseRefuseEffectuseMemouseMemo的功能是记忆某个结果,只有当依赖项发生改变时才会更新输出结果组件初始化:执行计算函数,获取计算结果缓存计算结果和依赖项计算返回结果组件更新:判断依赖项和缓存的依赖项是否相同,相同则直接返回已缓存的计算结果不同则执行计算函数,获取新的计算结果,缓存新计算结果和新的依赖项并返回计算结果注意:React会使用Object.is()对新旧依赖数组中
原创
博文更新于 2022.04.10 ·
1098 阅读 ·
0 点赞 ·
0 评论 ·
1 收藏

前端面试——安全相关

XSS推荐一篇文章跨站脚本攻击,在网页中嵌入一段js代码反射型xss(非持久型):攻击的代码放在url中,提交到服务器,又返回给客户端,浏览器解析执行存储型xss(持久型):常见的攻击方式是在留言的地方,输入一段xss脚本,服务端将评论内容存储在数据库中,这样每次刷新浏览器都会解析执行攻击代码防御输入过滤、输出编码(如把留言全部当成字符串)设置cookie为http-only:只要cookie含有http-only字段,那么任何javaScript脚本都没有权限读取这条cooki
原创
博文更新于 2022.04.09 ·
2505 阅读 ·
1 点赞 ·
0 评论 ·
0 收藏

跨域问题相关

文章目录跨域问题解决跨域的三种方法1、跨源资源共享(CORS)JSONPreact脚手架配置代理(proxy)第一种配置代理的方法第二种配置代理的方式跨域问题通过xhr进行ajax通信的一个主要限制是跨院安全策略。默认情况下,xhr只能访问与发起请求的页面在同一个域内的资源。这个安全策略可以防止某些恶意行为。解决跨域的三种方法我们在5000端口开启一个服务,需要做的是跨域请求服务端返回的数据。sever1.js如下const express=require('express');const
原创
博文更新于 2022.03.31 ·
1510 阅读 ·
3 点赞 ·
5 评论 ·
4 收藏

虚拟DOM和Diff算法

文章目录虚拟DOM和diff算法虚拟DOMDiff算法单节点diff多节点diffreact中key值的作用如何理解fiberReact的双缓存机制虚拟DOM和diff算法虚拟DOM背景:以前使用jq等命令式的完成一些DOM操作,伴随着前端工程化的不断发展,涌现了react、vue等MVVM框架,不用再关心具体的DOM操作,而是把重点放在了基于数据状态的操作,一旦数据更改,相应的DOM元素也会跟着变化,这种声明式的开发方式极大地提高了开发体验,更好地帮助我们实现组件复用、逻辑解耦等虚拟DOM本质上
原创
博文更新于 2022.03.31 ·
1543 阅读 ·
1 点赞 ·
0 评论 ·
0 收藏

JS创建对象的四种方式

对象:特指某个事物,具有属性和方法创建对象:实例化一个对象的同时对其属性进行初始化1、字面量创建对象var obj1={ name:"amethyst", color:"blueviolet", code(){ console.log('love coding'); }}console.log(obj1.color);//bluevioletobj1.code();//love coding调用系统的构造函数创建对象var obj2=new
原创
博文更新于 2022.03.26 ·
3568 阅读 ·
4 点赞 ·
7 评论 ·
14 收藏

前端面试——跨域问题

文章目录cookie和session的区别cookie,localStorage,sessionStorage的区别CSRF和XSS攻击及防范跨域问题浏览器的同源策略跨域解决方案跨域资源共享(CORS)通过JSONP跨域websocket协议跨域cookie和session的区别cookie数据存放在浏览器上,session存放在服务器上cookie一般在客户端有大小限制,一般为4K,session没有限制,但是考虑到服务器性能,一般不能存放太多数据cookie可以设置过期时间,否则一直有效,se
原创
博文更新于 2022.02.15 ·
2817 阅读 ·
3 点赞 ·
0 评论 ·
26 收藏

前端面试——浏览器存储&浏览器缓存(http缓存机制)

浏览器存储cookie和session的区别cookie数据存放在浏览器上,session存放在服务器上cookie一般在客户端有大小限制,一般为4K,session没有限制,但是考虑到服务器性能,一般不能存放太多数据cookie可以设置过期时间,否则一直有效,session在超过一定的时间(通常30min)后就会失效,当关闭浏览器时,会自动调用session.invalidate()方法,清除掉session中的信息cookie安全性较低,可以通过分析本地的cookie并进行co
原创
博文更新于 2022.02.15 ·
2897 阅读 ·
6 点赞 ·
0 评论 ·
29 收藏

事件循环例题,你能做对几道?

例题1new Promise((resolve)=>{ resolve();}).then(()=>{ console.log(1); Promise.resolve().then(()=>{ console.log(2); })}).then(()=>{ console.log(3);})例题2new Promise((resolve)=>{ resolve();}).then(()=>{
原创
博文更新于 2022.02.12 ·
822 阅读 ·
0 点赞 ·
1 评论 ·
3 收藏

前端面试——设计模式之发布-订阅模式

文章目录发布订阅模式(观察者模式)通用的发布-订阅模式取消订阅的事件全局的发布-订阅对象模块间通信先发布再订阅总结发布订阅模式(观察者模式)定义:定义对象之间一对多的依赖关系,当一个对象状态发生改变时,所有依赖它的对象都将得到通知发布-订阅模式让两个对象松耦合地联系在一起,虽然不太清楚彼此的细节,但这不影响它们之间相互通信。当有新的订阅者出现时,发布者的代码不需要做任何改变,同样发布者需求改变时,也不会影响到之前的订阅者。只要约定的事件名没有变化,就可以自由地改变它们实现发布-订阅模式指定发布者
原创
博文更新于 2021.11.27 ·
1156 阅读 ·
0 点赞 ·
0 评论 ·
4 收藏

前端面试——设计模式之策略模式

文章目录策略模式使用策略模式计算奖金表单验证(多种校验规则)策略模式的优缺点策略模式定义:定义一系列的算法,把它们一个个封装起来,并且使它们之间可以相互替换将不变的部分和变化的部分分隔开是每个设计模式的主题,策略模式的目的就是将使用的算法和算法的实现分离开来使用策略模式计算奖金绩效为S的人奖金为4倍工资,A为3倍,B为2倍,要求提供一段代码,方便地计算每个员工的奖金//策略对象const strategies={ 'S':function(salary){ re
原创
博文更新于 2021.11.27 ·
851 阅读 ·
0 点赞 ·
0 评论 ·
0 收藏

前端面试——设计模式之策略模式

文章目录策略模式使用策略模式计算奖金表单验证(多种校验规则)策略模式的优缺点策略模式定义:定义一系列的算法,把它们一个个封装起来,并且使它们之间可以相互替换将不变的部分和变化的部分分隔开是每个设计模式的主题,策略模式的目的就是将使用的算法和算法的实现分离开来使用策略模式计算奖金绩效为S的人奖金为4倍工资,A为3倍,B为2倍,要求提供一段代码,方便地计算每个员工的奖金//策略对象const strategies={ 'S':function(salary){ re
原创
博文更新于 2021.11.27 ·
851 阅读 ·
0 点赞 ·
0 评论 ·
0 收藏

前端面试——设计模式之单例模式

文章目录单例模式透明的单例模式用代理实现单例模式惰性单例单例模式核心:确保只有一个实例,并提供全局访问 (注意:全局变量不是单例模式)实现:用一个变量标志当前是否已经为某个类创建过对象,如果是,则在下次创建类实例的时候,直接返回之前创建的对象(用闭包缓存数据),若不是则通过new创建一个新的对象应用场景:登录框透明的单例模式需求:实现一个透明的单例类,用户从这个类中创建对象的时候,可以像使用其他任何普通类一样。为了把标志变量instance封装起来,此处使用自执行的匿名函数和闭包const
原创
博文更新于 2021.11.27 ·
454 阅读 ·
0 点赞 ·
0 评论 ·
0 收藏

关于js和css是否阻塞dom解析和渲染

关于css和js是否会阻塞DOM解析和执行通常我们把script标签放在body尾部,link标签放在head头部,通过CDN引入第三方库时,放在link标签前面概括CSS不会阻塞DOM解析,但是会阻塞DOM渲染,严谨一点则是CSS会阻塞render tree的生成,进而会阻塞DOM的渲染JS会阻塞DOM解析CSS会阻塞JS的执行浏览器遇到<script>标签且没有defer或async属性时会触发页面渲染Body内部的外链CSS较为特殊,会形成FOUC(样式闪烁)现象,请慎用
原创
博文更新于 2021.11.27 ·
3001 阅读 ·
3 点赞 ·
0 评论 ·
18 收藏

前端面试——CSS篇

01-css盒模型box-sizing:padding-box(包含padding和content)、border-box(IE盒模型)、content-box(标准盒模型)CSS中盒模型分为IE盒模型和标准盒模型:二者主要区别是width的包含范围IE盒模型的width表示content+padding+border这三部分的宽度标准盒模型的width只是content部分的宽度02-BFC(块级格式化上下文)块级格式化上下文,是一个独立的渲染区域,并且有一定的渲染规则,约束
原创
博文更新于 2021.11.14 ·
501 阅读 ·
0 点赞 ·
0 评论 ·
1 收藏

前端面试——HTML篇

01-href和src的区别请求资源类型不同:href表示超文本引用,用来建立当前元素和文档之间的连接,如: link、a请求src资源时会将其指向的资源下载并应用到文档中,如script、img、iframe作用结果不同:href用于在当前文档和引用资源之间确立联系src用于替换当前内容浏览器解析方式不同:用href引入,浏览器会识别为css文件,会并行下载资源并且不会停止对当前文档的处理(因此建议css使用link加载)使用src,浏览器解析到src时会暂停其他资源的下载和处
原创
博文更新于 2021.11.14 ·
1079 阅读 ·
0 点赞 ·
0 评论 ·
0 收藏

正则表达式

文章目录元字符(限定符)示例创建正则表达式对象正则表达式其他方法的使用match()replace()exec(str)ES9正则扩展命名捕获分组正则断言dotAll模式ES11-String.prototype.matchAll元字符(限定符)元字符含义.除了
以外的任意一个单个字符[]范围()分组,提升优先级|或者*0-多次+1-多次?0-1次{0,}*{1,}+{0,1}?\d数字\D非
原创
博文更新于 2021.06.02 ·
225 阅读 ·
0 点赞 ·
2 评论 ·
0 收藏

JS实现瀑布流布局

瀑布流布局的特点:各元素等宽不等高大概效果如下:分析通过定位布局先确定在浏览器显示区域内,一行能放多少列图片获取页面的宽度pageWidth(做兼容)图片盒子宽度itemWidth间隙gap列数:column=pageWidth/(itemWidth+gap)先排第一行当盒子索引小于列数column的时候,就排在第一行确定在第一行后,动态设置left的值,top值为0left=i*(itemWidth+gap)第一行排好之后,因为第二行需要考虑top值,将
原创
博文更新于 2021.05.18 ·
565 阅读 ·
1 点赞 ·
1 评论 ·
0 收藏

数组扁平化的四种方法

文章目录数组扁平化数组扁平化的四种方法数组自带的flat方法利用正则函数递归使用reduce数组扁平化数组扁平化是指将一个多维数组变为一个一维数组const arr=[1,[2,[3,4]]]=>[1,2,3,4]数组扁平化的四种方法数组自带的flat方法const arr=[1,[2,[3,4]]];console.log(arr.flat(Infinity));// [1, 2, 3, 4]利用正则先使用JSON.stringify(arr)将
原创
博文更新于 2021.05.16 ·
600 阅读 ·
1 点赞 ·
0 评论 ·
1 收藏

reduce方法详解(含数组扁平化、数组去重)

文章目录参数应用场景数组求和reduce实现数组扁平化统计数组中元素出现的次数reduce数组去重参数arr.reduce(callback(prev,cur,index,arr),init);prev:上一次调用时的返回值,或者初始值init(传入init)cur:当前正在处理的数组元素index:和当前正在处理的数组元素一一对应arr:原数组init:初始值,该值也决定了返回值的数据类型常用的参数:prev、cur、init应用场景数组求和、求乘积计算数组中每个元素的出现次
原创
博文更新于 2021.05.16 ·
541 阅读 ·
1 点赞 ·
0 评论 ·
0 收藏

JS的事件循环机制-event-loop

文章目录JS运行机制event-loopJS运行机制1、谈谈JS的运行机制JS是单线程的,因为js离不开用户的操作,和用途有关例如:操作页面上的dom元素,假设js是多线程,一个线程是删除dom,一个线程是增加dom,这样就不知道该以哪个线程为主了2、JS语言的特点?单线程、解释性语言event-loop事件循环机制 由三部分组成:调用栈、微任务队列(微队列)、消息队列(宏队列)event-loop开始的时候,会从全局一行一行地执行,会压入到调用栈中,被压入的函数被
原创
博文更新于 2021.05.15 ·
263 阅读 ·
1 点赞 ·
0 评论 ·
0 收藏
加载更多