- 博客(47)
- 问答 (1)
- 收藏
- 关注
RSS订阅转载 浅谈浏览器HTTP缓存
原文链接：https://segmentfault.com/a/11900000158163311.HTTP缓存浏览器第一次向一个web服务器发起http请求后，服务器会返回请求的资源，并且在响应头中添加一些有关缓存的字段如：Cache-Control、Expires、Last-Modified、ETag、Date等等。之后浏览器再向该服务器请求该资源就可以视情况使用强缓存和协商缓存。强缓存：浏览器直接从本地缓存中获取数据，不与服务器进行交互。协商缓存：浏览器发送请求到服务器，服务器判定是否可使
2021-07-05 20:49:33
514
转载 HTTP协议基本知识
参考链接:https://juejin.cn/post/6844904005437669389#heading-16客户端发送一个HTTP请求到服务器的请求消息包括以下格式：请求行（request line）、请求头部（header）、空行和请求数据四个部分组成。示例：请求行：指定的是请求方法、请求URL、协议版本请求头：以键值对形式存在的字段，展示该请求的一些规则参数空行请求体：该请求所传递的数据2.2 响应报文与请求报文同理，HTTP响应也由四个部分组成，分别是：状态行、消息报头、空行和
2021-07-05 20:38:02
485
原创 JavaScript 生成器(Generator函数)和迭代器（iterator) 使用通俗讲解
1.迭代器送代器Iterator是ES6提出的一种接口机制。它的目的主要在于为所有部署了Iterator接口的数据结构提供统一的访问机制，即按一定次序执行遍历操作。并且ES6也提出了针对Iterator遍历操作的专属遍历命令的标准，即for of循环1.1默认Itearator接口一个数据结构只要具有Symbol.iterator属性，就可以认为是"可迭代的"(iterable)Symbol.iterator属性本身是一个函数， 执行这个函数，就会返回一个迭代器Iterator，当使用for…of循
2021-06-28 21:10:36
712
原创 浅谈JavaScript原型链机制
接上一条，如果遍历其原型链时存在对应的foo属性，并且该属性只读(writable:false)，则不会修改该属性或者创建该对象实例的直接属性，总之什么都不会发生(在非严格模式下会抛出错误)此方法与(2)相比，解决了原型对象引用共享的问题，但是如果函数Foo存在一些副作用(如修改状态，给this添加属性等)，同样会影响到Bar的实例对象，此法也不可取。如果obj对象没有直接包含名为foo的属性，就会历其原型链，如果仍然找不到名为foo的属性，则foo会被添加到obj的直接包含属性中。有一定轻微性能损失。
2021-06-20 16:15:51
297
转载 JavaScript 事件循环机制基本介绍
参考链接:https://juejin.cn/post/6844903621872582669https://juejin.cn/post/68449036382387568781. 单线程的jsjs作为主要运行在浏览器的脚本语言，js主要用途之一是操作DOM。在js高程中举过一个栗子，如果js同时有两个线程，同时对同一个dom进行操作，这时浏览器应该听哪个线程的，如何判断优先级？为了避免这种问题，js必须是一门单线程语言，并且在未来这个特点也不会改变。2. 执行栈和任务队列因为js是单线程
2021-06-20 14:29:00
97
原创 分清JavaScript中的各种“尺寸”和“位置”
1. 尺寸（1） node.style.width/height这个只能获取元素的内联style样式中定义的尺寸值，若该元素没有定义atyle属性，则返回值为空字符串此外，没有其他办法可以获取css样式设置的元素尺寸值（2） node.clientWidth/clientHeight表示元素的内容可视宽/高度 +水平/垂直方向padding值注意:针对纯行内元素(如apan，不包括行内块)该neI获取的值永远为0，通过document documentElement.clientWidth
2021-06-10 21:07:13
359
原创 React 状态管理工具 Mobx 基本使用
参考链接：https://juejin.cn/post/6844903766949363726Mobx官方文档前言Mobx是一个透明函数响应式编程（Transparently Functional Reactive Programming，TFRP）的状态管理库，它使得状态管理简单可伸缩：1. 基本概念actions：一些改变状态值（state）的动作。state：可观察的状态值computed value：根据state，用pure function计算出来的值reactions：因
2021-06-05 17:04:00
1159
原创 React Redux基本使用
原文链接：https://juejin.cn/post/6844903846666321934#heading-5https://juejin.cn/post/6926509360596123661#heading-11. reduxReact有props和state:props意味着父级分发下来的属性state意味着组件内部可以自行管理的状态，并且整个React没有数据向上回溯的能力，这就是react的单向数据流这就意味着如果是一个数据状态非常复杂的应用，更多的时候发现React根本无法
2021-06-05 14:31:03
391
原创 React Context 基本使用
前言Context 通过组件树提供了一个传递数据的方法（类似一个简易的redux来存放公共数据），从而避免了在每一个层级手动的传递 props 属性。有部分小伙伴应该使用props属性进行组件向下传值的操作。当多个组件嵌套时候，你需要从最外层的组件一层一层地通过props将数据传到最里层的组件时，你就需要慢慢向上寻找最初的值是什么，何苦呢？Context 提供了一种在组件之间共享这些值的方法，而无需显式地通过树的每一层传递 prop。1. 基本使用（1）创建contextcontext一般在顶层
2021-06-02 21:32:22
720
转载 React 高阶组件HOC详解
参考链接：https://juejin.cn/post/6844903815762673671https://juejin.cn/post/6844904050236850184前言高阶组件与自定义hooks是React 目前流行的状态逻辑复用的两种解决方案1.高阶组件是什么高阶组件就是一个函数，且该函数接受一个组件作为参数，并返回一个新的组件。高阶组件（HOC）是React中的高级技术，用来重用组件逻辑。但高阶组件本身并不是React API。它只是一种模式，这种模式是由React自身的组
2021-05-30 17:40:09
742
转载 浅谈React 虚拟DOM，Diff算法与Key机制
参考文章：https://juejin.cn/post/68449038246839582861.虚拟dom原生的JS DOM操作非常消耗性能，而React把真实原生JS DOM转换成了JavaScript对象。这就是虚拟Dom（Virtual Dom）每次数据更新后，重新计算虚拟Dom，并和上一次生成的虚拟dom进行对比，对发生变化的部分作批量更新。在此其中，React提供了componentShouldUpdate生命周期来让开发者手动控制减少数据变化后不必要的虚拟dom对比，提升性能和渲染效
2021-05-29 16:31:36
290
原创 JavaScript This机制详解
this是什么当一个函数被调用时，会创建一个执行上下文，它会记录函数的调用位置，调用方法，传入参数等信息。 this就是这些信息中的一个属性，会在函数执行时用到。this既不指向函数的词法作用城，也不指向函数自身。this是在函数被调用时才被绑定，并非函数编写或声明时绑定。它指向什么完全取决于函数在哪里被调用2.绑定规则2.1默认绑定当函数调用时，如果是使用不带任何修饰和前缀的，独立的函数引用进行调用时，此时的this为默认绑定，指向全局对象(浏览器中是window) function foo(
2021-05-25 21:43:44
269
1
转载 React Class组件生命周期详解
1. 旧版生命周期（v16.3之前）组件挂载过程（1） constructor()constructor 构造方法常用来初始化stateconstructor是ES6对类的默认方法，通过 new 命令生成对象实例时自动调用该方法。并且，该方法是类中必须有的，如果没有显示定义，则会默认添加空的constructor( )方法。当存在constructor的时候必须手动调用super方法。如果在constructor中想使用this关键字，就必须先调用super方法。在constructor中如果要
2021-05-23 15:26:28
2390
原创 JavaScript 数据类型，类型检测以及类型转换详解
基本类型(string,number等)的值本身不具有属性和方法(如Iength和toString())，通过对应的构造活数(如new String(),new Number())进行了对象封装处理才使其拥有了属性和方法。不过日常业务中我们用的最多的也就是字符串与数字或字符串之间的+运算，对于字符串与字符串则是拼接操作，对于字符串与数字，则是将数字默认进行 toString()操作，然后再进行字符串拼接。对于变量之间做+运算，它的隐式转换规则与+前后变量的数据类型有关，规则比较复杂，详细规则可以自行查询。
2021-05-20 21:26:42
284
原创 理解 React合成事件与JavaScript原生事件
1. 原生事件原生事件就是js的原生事件，如通过document.addEventListener来设置的监听事件。在react中即使有自己的一套事件机制（见下面合成事件），但有时候的业务场景我们仍然需要使用原生事件。比如我们封装一个Modal弹窗组件，需要在点击非弹窗区域时关掉弹窗，此时我们只能针对document进行原生点击事件监听。由于原生事件需要绑定在真实DOM上，所以一般是在componentDidMount阶段或者组件/元素的ref的函数执行阶段进行绑定操作，并且注意要在component
2021-05-12 21:46:08
3135
原创 JavaScript中的各种“循环”
前言日常开发中的业务场景，业务逻辑上常常用到遍历循环，JS中提供了许多对应的API方法，这里不会从零讲解它们怎么用，而是介绍他们的适用用场景和个中区别1. forEach,map, some,fiiter,every这几个是定义在Array.prototype上的数组专属的遍历API，forEach：单纯地遍历每个数组元素进行需要的逻辑处理，无返回值，不可中断遍历map：主要用于根据需求来格式化数组的每个元素，最终返回一个由每次遍历的返回值组成的新数组，不可中断遍历some：主要用于判断是否存
2021-05-10 21:42:50
162
转载 CSS变量（自定义属性）的基本使用
复杂的网站都会有大量的CSS代码，通常也会有许多重复的值。举个例子，同样一个颜色值可能在成千上百个地方被使用到，如果这个值发生了变化，需要全局搜索并且一个一个替换（很麻烦哎～）。自定义属性在某个地方存储一个值，然后在其他许多地方引用它。另一个好处是语义化的标识。比如，–main-text-color 会比 #00ff00 更易理解，尤其是这个颜色值在其他上下文中也被使用到。在CSS自定义属性出现之前，CSS变量只能在一些CSS预处理器中使用，如less，scss等。
2021-05-03 21:50:38
1682
转载 Node.js中setTimeout，setImmediate和process.nextTick的区别
原文链接：https://blog.csdn.net/hkh_1012/article/details/53453138node.js中的非IO的异步API提供了四种方法，分别为setTimeOut(),setInterval(),setImmediate()以及process.nextTick()，四种方法实现原理相似，但达到的效果略有区别：一、事件循环Event Loop首先，我们需要了解node.js的基于事件循环的事件模型，正是因为它才使得node.js中回调函数十分普遍，也正是基于此，nod
2021-05-02 18:56:10
213
原创 浅谈Nodejs框架里的“洋葱模型”
欢迎访问个人博客网站：http://www.zhuxin.club1. 洋葱模型洋葱我们都知道，一层包裹着一层，层层递进，但是现在不是看其立体的结构，而是需要将洋葱切开来，从切开的平面来看，如图 所示：可以看到要从洋葱中心点穿过去，就必须先一层层向内穿入洋葱表皮进入中心点，然后再从中心点一层层向外穿出表皮，这里有个特点：进入时穿入了多少层表皮，出去时就必须穿出多少层表皮。先穿入表皮，后穿出表皮，符合我们所说的栈列表，先进后出的原则。2. 洋葱模型与Node的关系目前比较流行的 Node.js
2021-05-01 17:59:58
2263
原创 Node.js的基本概念和应用场景
欢迎访问个人博客网站：http://www.zhuxin.club1. node是什么Nodejs是一个基于Chrome V8的JavaScript运行环境。它使得JS可以运行在服务器端并且可以跨平台运行（Windows,mac OS以及Linux）。此外，与其他后端语言（如php）不同，node内置了http服务器，不需要额外部署http服务器（如Apache）2. node的特点非阻塞I/O在node中，当线程遇到IO操作时，不会以阻塞方式（即传统同步IO方式，同一时刻只能做一件事）等待
2021-04-22 21:38:23
349
1
原创 JavaScript中new Object()和{}的区别
对于array，object，function和正则表达式这类既可以通过字面量（如let arr = []）又可以通过构造函数（如let arr - new Array()）来声明的对象类型，
2021-04-20 21:56:04
879
原创 浅谈Node.js中的事件循环机制
欢迎访问个人博客网站：http://www.zhuxin.club1. 循环原理node和js的事件循环原理有所不同，即使在node 10+版本后二者的执行顺序一致。node基于libev库，js基于浏览器。js事件循环核心是宏任务和微任务，而node除此之外还有现阶段任务执行阶段timers：本阶段执行setInterval和setTimeout的回调函数pending callbacks：执行某些系统操作（非node）的回调函数idle,prepare：仅系统内部调用poll：检索新的
2021-04-20 21:37:16
1235
原创 浅谈CSS层叠上下文与z-index
层叠上下文，英文称作 stacking context，是 HTML 中的一个三维的概念。如果一个元素含有层叠上下文，我们可以理解为这个元素在 z 轴上就有一定优先级层叠水平，英文称作 stacking level，决定了同一个层叠上下文中元素在 z 轴上的显示顺序。不要把层叠水平和 CSS 的 z-index 属性混为一谈。尽管某些情况下 z-index 确实可以影响层叠水平，但是只限于定位元素以及 flex 盒子的flex item元素；因为所有的元素都存在层叠水平。
2021-04-16 21:55:15
206
原创 CSS FlexBox布局全面详解
1. 什么是FlexBoxFlexBox（”弹性布局”）是CSS3提供的用于布局的一套新属性，这套属性包括针对容器（弹性容器，flex container）和针对其直接子元素（弹性项，flex item）的两类属性FlexBox可以控制弹性项（flex item）的以下方面：大小，基于内容和可用空间流动方向，水平还是垂直，正向还是反向两个轴向的对齐和分布顺序，可覆盖源代码中的顺序flex container默认存在两根轴：水平的主轴（main axis）和垂直的交叉轴（cross axi
2021-04-11 20:40:44
3297
1
原创 深入CSS vertical-align属性
1. 前置知识在真正讲解vertical-align属性之前，我们需要了解下面一些前置的知识1.1 x-Height在各种内联相关模型中，凡是涉及垂直方向的排版或者对齐的，都离不开最基本的基线（baseline）。例如，line-height 行高的定义就是两基线的间距，vertical-align 的默认值就是基线字母 x 的下边缘（线）就是我们的基线。通俗地讲，x-height 指的就是小写字母 x 的高度，术语描述就是基线和等分线（mean line）（也称作中线，midline）之
2021-04-07 21:50:34
7089
原创 CSS 关于margin你应该要知道的
1.margin与元素尺寸我们知道，在W3C盒模型下（即box-sizing:content-box）给一个元素设置padding内边距的时候，会改变元素原有的实际尺寸（即使你设置该元素的width属性）。而margin属性虽然其本意为外边距，让人以为只会影响其与其他元素间的距离。实际上，当元素处于“充分利用可用空间”的状态时，margin属性会影响其实际尺寸示例：<div class="container"> <div class="child"></div&g
2021-04-04 19:11:25
2350
原创 全面了解CSS“浮动”
由于浮动元素的脱离文档流，.box2会忽略浮动元素的原空间（即当其不存在），由因为普通div不设置宽度默认会是父元素宽度。普通的块级元素之间的margin-top和margin-bottom有时会出现margin合并的现象，而浮动元素由于其自身会变成一个BFC（块级格式化上下文），不会影响外部元素，所以不会出现margin重叠问题。此时我们发现：没有设置高度的container元素，其实际高度只由标准文档流的box2元素撑起来了21px，而设置了30px高度的浮动元素由于脱离文档流其高度被忽略了。
2021-04-02 22:27:10
453
原创 CSS 元素水平/垂直居中方法总结
注意文章中出现的块级元素包括纯块级和行内块元素，行级元素包括纯行级元素和行内块元素（除非进行了特别说明）1.1 text-align：center应用场景容器元素为块级元素，欲居中元素为行级元素。实现水平居中。<div class="container"> <span class="child">我要居中</span></div> .container{ text-align: center; }
2021-03-30 21:22:20
104
原创 CSS常用伪元素详解
只能用于块级元素。可用的CSS属性为font,color,background,word-spacing,letter-spacing,text-decoration,vertical-align,text-transform,line-height,clear。可用的CSS属性为font,color,background,marin,padding,border,text-decoration,vertical-align,text-transform,line-height,float,clear。
2021-03-29 21:31:57
12752
原创 CSS选择器优先级详解
欢迎访问个人博客网站：http://www.zhuxin.club1. 优先级分级按照优先级从高到低排列：1. ! important.foo{ color:red !important}!important是顶级优先级，唯一推荐使用它的场景为忽略JS脚本设置的样式，使js设置样式无效。对于其他场景都没有使用它的理由，切勿滥用2. style属性内联样式<span style="color:red">红色</span>3. ID选择器#foo{ colo
2021-03-26 22:03:19
2239
原创 CSS常用伪类选择器详解
1. 用户行为伪类1.1 :hoverselector:hover 表示匹配鼠标经过的selector选择器元素。应用场景：鼠标经过元素时的样式变化，Tips提示，下拉列表和过渡动画等细节优化：如果在鼠标移动到目标元素过程中触发了附近其他元素的:hover效果导致遮盖了目标元素，可通过设置目标元素效果hover的延时出现（通过visibility控制显隐和transition配合使用）通过:hover实现类似下拉列表这种重要功能时，需考虑用户交互环境无鼠标的情景（如触屏设备，智能电视），可通
2021-03-24 21:33:31
9605
转载 CSS 格式化上下文（BFC，IFC，FFC和GFC）基本介绍
格式化上下文Box 是 CSS 布局的对象和基本单位， 直观点来说，就是一个页面是由很多个 Box 组成的。元素的类型和 display 属性，决定了这个 Box 的类型。 不同类型的 Box， 会参与不同的 Formatting Context（一个决定如何渲染文档的容器），因此Box内的元素会以不同的方式渲染。格式化上下文（Formatting context） 是 W3C CSS2.1 规范中的一个概念。它是页面中的一块渲染区域，并且有一套渲染规则，它决定了其子元素将如何定位，以及和其他元素的关系
2021-03-19 21:22:17
984
原创 CSS Position定位属性全面讲解
前言CSS position属性用于指定一个元素在文档中的定位方式。top、right、bottom、left 属性（值可为CSS数值单位，正负决定其方向）则决定了该元素的最终位置。1. static定位position属性的默认值，指定元素使用正常的布局行为，即元素在文档常规流中当前的布局位置。此时 top、right、bottom、left 属性无效。2. relative相对定位基于元素原本的位置进行定位移动。此时 top、right、bottom、left 属性均基于原本的位置进行移动尺寸
2021-03-15 21:26:10
542
转载 浅谈前端安全攻防——XSS和CSRF
原文链接：1：https://juejin.cn/post/68449036385323581512：https://segmentfault.com/a/1190000004623125?utm_source=sf-related1. XSSXSS，即 Cross Site Script，为跨站脚本攻击；其原本缩写是 CSS，但为了和层叠样式表(Cascading Style Sheet)有所区分，因而在安全领域叫做 XSS。XSS 攻击是指攻击者在网站上注入恶意的客户端代码，通过恶意脚本对客户
2021-02-27 21:18:14
199
原创 基于Viewport的移动端web屏幕基本适配方案详解
欢迎访问个人博客网站：http://www.zhuxin.club1. 前言随着手机，平板等移动设备的普及，现如今的绝大多数web应用会对桌面端和移动端进行网页适配的兼容处理。由于移动端和桌面端设备的型号和分辨率种类比较繁杂，如果专门为这些不同设备和终端分别建立网站显然成本太高，很不现实，并且它们之间的界限也很模糊。所以创建可以适配多种设备的web应用是如今web开发的基本需求。在我们具体分析主流的适配方案之前，先让我们了解一下以下这些主要概念：2. 各种“像素”2.1 物理像素物理像素（又称
2021-02-21 20:21:19
4348
1
转载 浅谈浏览器同源策略和跨域解决方案
欢迎访问个人博客网站：http://www.zhuxin.club1. 同源策略1.1 定义所谓同源是浏览器的一种安全策略：若两个地址的域名、协议、端口 相同，则它们是同源的。域名：网站ip的唯一标识，如www.baidu.com，www.qq.com协议：浏览器连接并访问资源的遵从的统一约定。主要为http和https两种。端口：不同的端口对应不同的应用程序，http网站首页一般默认端口为80端口，https则为443。示例（以http://www.example.com/list.htm
2021-01-03 22:33:09
271
原创 localStorage和sessionStorage的基本使用和区别
欢迎访问个人博客网站：http://www.zhuxin.club1. WebStorage简介在WebStorage出现之前，浏览器中存储本地数据基本使用技术的只能是cookie，并且cookie需要频繁的地服务器端进行传输交互。Web Storage是HTML5标准提出的新的浏览器本地存储方案，它的出现克服了由cookie带来的一些限制，例如当数据需要被严格控制在客户端上时，无须持续地将数据发回服务器。Web Storage出现的目的：提供一种在cookie之外存储会话数据的途径。提供一种
2020-12-27 22:26:50
608
原创 Cookie，Session，Token和JWT的基本使用以及区别介绍
1. 前言由于http协议的无状态性。每一次的http请求不会记住和保存任何会话信息，比如上一次的请求发送者和这一次的发送者是不是同一个人？每次请求都是全新和独立的。随着交互式Web应用的兴起， 像在线购物网站，需要登录的网站等，马上面临一个问题，就是要管理回话，记住那些人登录过系统，哪些人往自己的购物车中放商品，也就是说我必须把每个人区分开。2. CookieCookie是浏览器实现的一种数据存储技术。一般由服务器生成，发送给浏览器（客户端也可进行cookie设置）进行存储，下一次请求同一网站时会把
2020-12-26 18:12:10
1062
空空如也
es6中weakmap和和weakset的应用场景在哪里？
2021-04-20
TA创建的收藏夹 TA关注的收藏夹
TA关注的人