- 博客(21)
- 收藏
- 关注
RSS订阅原创 强缓存和协商缓存
Etag 服务器返回资源时，在头信息中添加 Etag 属性，服务器资源发生改变，会修改掉 Etag 的值。协商缓存触发向服务器发送请求时，添加一个 If-None-Match 属性，这个属性的值就是上次返回的 Etag 值。协商缓存处理方式：向服务器发送请求，如果资源没有发生修改，则返回304，使用本地的缓存副本。Last-Modified 只能精确到秒，如果在一秒内被修改多次，则判断不准确，造成缓存命中不准确。no-cache 需要向服务器确认资源是否发生变化，如果资源没变化，则直接使用缓存的资源。
2023-01-11 22:29:31
317
原创 react-music 项目
memo 组件掘金https://juejin.cn/post/6844903954539626510React.memo 为高阶组件。它与React.PureComponent非常相似。默认情况下其只会对复杂对象做浅层对比。如果父组件更新，使用了memo的子组件可以不更新。该api使得组件仅在它的 props 发生改变的时候进行重新渲染。通常来说，在组件树中 React 组件，只要有变化就会 走一遍渲染流程。但是通过React.memo()，我们可以仅仅让某些组件进行渲染。不使用严格模
2021-11-25 10:24:21
370
原创 js 数据类型学习笔记
JavaScript 规定了8种数据类型，又分为：原始类型和对象类型。Symbol 符号值一种实例是唯一且不可改变的数据类型是一种实例是唯一且不可改变的数据类型。是一切非字符串对象的key 的集合Symbol 可以具有字符串类型的描述，描述相同，Symbol 也不相同。创建Symbol 是使用全局的 Symbol 函数Object对象是JavaScript 中最复杂的类型，也是JS 的核心机制之一。...
2021-11-25 10:23:54
242
原创 Ajax 是什么
https://juejin.cn/post/6844903618764603399AJAX即“Asynchronous Javascript And XML”异步js 和(xml)一般指可扩展标记语言是指一种创建交互式网页应用的网页开发技术可以令开发者只向服务器获取数据Ajax是一种异步请求数据的web开发技术Response 响应，回答，回复fetch 拿来，取来AJAX是个大类，相当于一个技术的总称XMLHttpRequest 是个api其下有xhrAP..
2021-10-28 18:06:42
494
原创 type 运算符 ，类型转换，深拷贝，null 和 undefined，暂时性死区
type运算符可以判断所有值类型数据变量计算 类型转换会类型转换原理就是 == 会进行类型转换，null 和 undefined 会被转换成统一类型（false），因此这里这么用假值（falsely值）与或运算会短路...
2021-09-23 20:22:41
626
原创 js-基础 实现深拷贝
function deepCopy(obj){ if (typeof obj !== 'object' || obj == null) return obj; let result = Array.isArray(obj) ? [] : {}; for (let key in obj){ if(obj.hasOwnProperty(key)){ result[key] = deepCopy(obj[key]); } } ret.
2021-09-23 20:02:35
122
原创 react基础知识点
虚拟DOM本质是Object类型的对象虚拟DOM是React内部在用，最终会被react转化为真实DOM，呈现在页面上jsx语法规则定义时不用写引号标签中混入JS表达式时用{}样式名用className，其他属性例如onclick 用onClick内联样式写法：style={{key:value}}。只有一个根标签标签必须闭合标签首字母：a）小写字母开头，转换为HTML中同名元素。 b）大写字母开头，react渲染对应的组件。函数式组件和类式组件函数式组...
2021-08-15 21:30:17
221
原创 0804-尚硅谷-react-路由
解决样式丢失 - p82路径层级的问题，如果错误，返回的是public下的index.js可能导致本地样式文件丢失解决办法：用绝对路径写，引入文件用上面这个前缀，相当于，在public下的绝对路径 使用hash路由，#后面的都是前端资源，发请求的时候忽略后面的路径 ？？？yarn 和 npm 不要混着用，可能造成包丢失，yarn挺好的路由模糊匹配和严格匹配exact={true} 开启精准匹配只写exact 效果一样，写在路由里Redirect的使用重定向...
2021-08-08 15:25:28
166
原创 5-13-原型、原型链（学习笔记）
function Person() {} Person.prototype.name = '我是人类' function Xiaoming() { this.name = "我叫小明" } Xiaoming.prototype = new Person() p = new Xiaoming() console.log(p); //Xiaoming{} res..
2021-05-14 00:07:50
349
原创 5-12防抖节流（学习笔记）
防抖函数的理解在事件被触发n秒后再执行回调，如果在这n秒内又被触发，则重新计时。 function debounce(fun, delay) { let timer; // 保存了变量timer // 闭包 return function(args) { // 键盘再按下的时候会清除定时器,又重新等待delay，用闭包做缓存 clearIn
2021-05-13 00:04:24
135
原创 5.11-闭包（学习笔记）
闭包是指那些能够访问自由变量的函数。通俗讲就是在函数中访问另一个函数中的的变量。只要某个变量在另外一个函数中还存在引用，那么这个变量的值在内存中就不会被释放，除非这个函数不会再执行。内部的函数被保存到外部。在JavaScript中，即使调用完函数，该函数内部定义的变量和方法仍会保留在内存中。在函数退出后，闭包还能够保留对所有局部函数变量的引用。当函数可以记住并访问所在的词法作用域时，就产生了闭包，即使函数是在当前词法作用域之外执行。 — 你不知道的JavaScript(上卷)闭包的构
2021-05-12 19:47:18
178
原创 5.7-history和hash两种路由
hash模式和 history模式由来异步请求使页面无缝刷新，url不改变，本次访问的页面会在下次用url访问时无法重新呈现。使用路由可以解决。单页面应用利用了JavaScript动态变换网页内容，避免页面重载；路由提供浏览器地址变化，网页内容也跟随变化。路由实现方式路由需要的功能刷新url呈现不同的网页内容有返回，前进的功能当浏览器地址发生变化时，内容变化hash模式：监听浏览器地址hash值变化，执行相应的js切换网页；history模式：利用history API实现url地
2021-05-07 23:29:50
115
原创 5.6-CSS层叠上下文（学习笔记）
张鑫旭CSS层叠上下文层叠上下文主要是页面元素元素显示的顺序。名词层叠上下文层叠等级层叠顺序z-index层叠上下文(stacking context)层叠上下文元素在Z轴更高层叠等级(stacking level，叫“层叠级别”/“层叠水平”也行）定义在他的规则中的上下顺序（分为层叠上下文和普通元素）“层叠顺序”英文称作”stacking order”这是一种规则：内容>布局>装饰所以内联元素（行内/行内块状元素）优先级比浮动、块状元素高层叠准则等级
2021-05-06 13:44:48
229
原创 5.5-css样式权重（学习笔记）
你必须懂的css样式权重和优先级权重1，决定 css被浏览器怎么 解析到生效2，决定样式的生效3，选择器有各自的权重，最终加权计算4，权重高者生效口诀：行内+1000，id+100，属性、伪类+10，元素、伪元素+1，通配符*+0！important（提升样式到最高优先级）（不建议使用）同一属性重复使用时，权重大的生效如果作用于简写样式属性，那么其子属性都会被作用上！important。例如：background，其众多子属性也会被作用上，影响性能。行内、内联和外联的优先级!im
2021-05-05 23:07:15
236
原创 5.4-flex布局
阮一峰-flex教程Flexible Box盒模型 “弹性布局” 更加灵活一维布局方案.box{ display:flex; }行内元素也可以使用.box{ display:inline-flex; }Flex布局后，子元素float，clear，vertical-align 属性将失效基本概念Flex容器的子元素为容器成员，称为flex项目，简称“项目”容器有水平主轴和垂直的交叉轴。main axis / cross axis项目默认沿主轴排列，开始的位置是main st
2021-05-04 23:40:44
124
原创 5.4-定位position
使用绝对定位会脱离文档流如果需要，您可以使用top，bottom，left和right 调整元素大小。 尝试设置 top: 0; bottom: 0; left: 0; right: 0; 和 margin: 0;这样这个元素会沾满一整个屏幕。定位上下文绝对定位的元素的父元素，要设置定位属性为relative，否则相当于所有的父元素position为static。结果绝对定位的元素会被包含在初始块容器中。即为被放在元素的外面。根据浏览器视口来定位。改变定位上下文，绝对定位的元素的相对位置元素
2021-05-04 21:50:41
103
原创 5.3-BFC原理（学习笔记）
BFC的布局规则内部的Box会在垂直方向，一个接一个地放置。Box垂直方向的距离由margin决定。属于同一个BFC的两个相邻Box的margin会发生重叠。每个盒子（块盒与行盒）的margin box的左边，与包含块border box的左边相接触(对于从左往右的格式化，否则相反)。即使存在浮动也是如此。BFC的区域不会与float box重叠。BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。反之也如此。计算BFC的高度时，浮动元素也参与计算。———
2021-05-04 11:33:55
137
原创 05-3-HTML行内元素和块级元素（学习记录）
本文为学习记录的文章原文链接行内元素常见：span、a、lable块级元素常见：div、p、h1-6可变元素：根据上下文语境决定该元素为行内元素或块级元素常见：button区别1.块独占一行，宽度自动填充行不独占，相邻的在一行，宽度随内容变化2.块元素设置width，height有效，行元素无效3.块设置padding和margin，行水平方向有效，竖直方向无效直观区别：行内元素在一条直线上排列，同一行，水平方向块元素各占一行，垂直方向排列。块元素从新行开始，结束时断行块元
2021-05-03 23:36:17
93
原创 5.3-CSS面试题
掌握盒子模型水平垂直居中的五大方案这个需求是我之前项目中非常常见的刚开始我用了，新技术出来之后我又用了，过了段时间我又看掘金/博客又会了定位：三种（1）不知道父亲的宽高，但也要有，需要知道该子盒子的宽高.box { position: absolute; top: 50%; left: 50%; margin-top: -150px; margin-left: -250px;
2021-05-03 17:39:30
143
原创 5月2日学习内容-浮动
浮动会脱离文档流 空间释放float:left;浮动导致塌陷清除浮动： clear: left right both（不推荐）伪元素 在父元素上添加（推荐）添加额外类名 设置伪元素伪元素是行内元素，正常浏览器清除浮动的方法 #main::after { content: ""; display: block; clear: both; }父元素添加overflow属性（不推荐）
2021-05-02 23:11:38
96
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人