- 博客(21)
- 收藏
- 关注
RSS订阅原创 前端React面试基础系列（React基础篇）
JSX 是一种表达式也是 React 的一种标准书写方式，允许我们使用书写 html 的方式去写 react 元素。
2024-04-29 14:00:13
287
原创 面试：轻松拿捏React事件机制、fiber架构
本文针对面试环节简单讲述了React的事件机制、渲染原理、以及fiber架构等等，内容全面，知识点丰富。
2024-04-29 13:59:06
995
原创 前端面试刷题必备（前端性能优化篇）
提升开发体验使用 Source Map 让开发或上线时代码报错能有更加准确的错误提示。提升 webpack 提升打包构建速度使用 HotModuleReplacement 让开发时只重新编译打包更新变化了的代码，不变的代码使用缓存，从而使更新速度更快。使用 OneOf 让资源文件一旦被某个 loader 处理了，就不会继续遍历了，打包速度更快。使用 Include/Exclude 排除或只检测某些文件，处理的文件更少，速度更快。
2024-04-23 16:03:14
752
原创 一文搞懂JavaScript的事件循环机制
JS的运行机制大家都知道JavaScript是一门单线程的语言，在一个时间下只做一件事。至于为什么是单线程呢，其实是与用途又关系的。因为JavaScript作为游览器脚本语言，它的主要用途是与用户进行交互，以及操作DOM。如果，它是一个多线程，那一个线程删除了一个DOM，另一个线程在这个DOM上增加内容或修改内容。那这时候该怎么渲染？因此，从一诞生，JavaScript就是单线程的，是这个语言的核心特征。当然，HTML5提出了Web Worker标准，允许JavaScript脚本创建多个线程，但是子
2022-05-16 10:03:22
375
原创 Webpack使用ReactHMR时出现SocketClient is not a constructor
在学习使用Webpack进行ReactHMR的时候出现了一个问题。Uncaught TypeError: SocketClient is not a constructorat initWDSSocket (build.js:2229:24)网上搜了一堆，也没发现啥原因。stackoverflow有人说把@pmmmwh/react-refresh-webpack-plugin升级到最新的。去github上也看了，作者的原话是0.5.0-rc.4 should work with WDS v4 by
2022-03-30 15:34:47
1620
原创 执行上下文与作用域
每个上下文都有一个关联的变量对象，而这个上下文中定义的所有变量和函数都存在于这个对象中。全局上下文是最外层的上下文，在游览器中，全局上下文就是window对象，所有var定义的全局变量和函数都会成为window对象的属性和方法。使用let和const的顶级声明不会定义在全局上下文中，但在作用域解析上效果是一样的。 var a = 1; console.log(window.a); // 1 let b = 12; console.log(window.b); // unde
2022-02-15 10:40:17
577
原创 原始值与引用值
在Javascript中，变量可分为两种：原始值（基本数据类型）和引用值（复杂数据类型）。原始值就是最简单的数据，比如Undefiend、null、Boolean、Number、String、Symbol（ES6引入），原始值变量是按值访问的。引用值则是由多个值构成的对象。对象保存在内存中，是不能直接访问的，因此不能直接操作对象所在的内存空间。实际上操作的是对象的引用，在内存上的一个地址。通过变量进行赋值时原始值通过变量进行赋值到另一个变量时，原始值会被复制到新变量的位置，赋值后他们是各自独立
2022-02-14 15:29:14
906
原创 js数组，根据数组内的对象中的某一个值进行分组
有一个数组：let list = [{name:'test',value:'value1',count:6},{name:'test1',value:'value2',count:4},{name:'test1',value:'value3',count:2},{name:'test',value:'value4',count:0},]假如想要根据数组中对象的名字进行分类，可以分为test和test1两类。希望得到如下数据：{ test:[ {name:'test',value:'v
2021-11-05 11:25:29
3826
11
原创 Webpack踩坑——Webpack-dev-server无法自动更新
如下所示，设置了webpack-dev-server后修改html代码页面无法更新，网上搜了一大堆说什么需要设置hot和inline发现都不行，最后发现是因为在package.json中配置了 browserslist字段，删了就可以了。const HtmlWebpackPlugin = require('html-webpack-plugin');const { resolve } = require('path');module.exports = { entry: './src/js/i
2021-03-23 15:13:38
1753
4
原创 节流阀，避免短时间内多次点击多次触发
节流阀顾名思义，就像是水龙头的阀门，控制着开关，避免水流不停的流出。实现比较简单，直接上代码。不懂留言。<body> <button onclick="test()">没有节流阀</button> <button onclick="test1()">有节流阀</button></body><script> var test = () => { console.log('没节
2021-02-04 20:24:48
231
原创 JavaScript 构造函数 原型 原型链
在ES6之前并没有类的概念，而是通过构造函数来创建实例。构造函数：function Animal(name, age) { this.name = name; this.age = age; this.sing = () => { console.log('这是方法!') }}如上所示，这就是一个构造函数，他可以用来创建对象，需要使用new关键词。 var dog = new Animal('狗蛋', '3个月');// new了一个对
2021-02-04 19:29:51
474
原创 JS深拷贝和浅拷贝
谈到深拷贝和浅拷贝，首先要知道javascript的数据类型和存储方式。JS数据类型:可分为简单数据类型（基本数据类型）和复杂数据类型（引用数据类型）：简单数据类型：String、Number、Boolean、undefined和null复杂数据类型：通过new创建的对象、系统对象、自定义对象。如：Object、Array、Date等简单数据类型和复杂数据类型的存储方式也是不一样的，这时就要引入堆和栈的概念。堆和栈不做深入讲解。总之，简单数据类型存储在栈中；复杂数据类型则存储在堆里，在栈中会存储
2021-02-03 17:31:56
110
原创 break、continue和return
break、continue、return都可用于跳出循环。return还可用于函数结束时的返回值。break：跳出循环后直接结束。continue：跳出本次循环，然后继续执行下面的循环。return:结束函数，并返回返回值，为空时直接结束函数。break代码 function test() { for (let i = 0; i < 10; i++) { if (i === 3) { break;
2021-02-03 16:38:16
654
原创 let const var的区别
let是es6中用来声名变量的，const是es6中用来声名常量(常变量)的。let:相比于var，let不存在变量提升，且具有块级作用域({}内有效),存在暂时性死区(先赋值，再声明，报错)const:相比于var,具有块级作用域({}内有效),且声明时必须赋值，后续不可修改。一.块级作用域： // let const 具有块级作用域 if (true) { let a = 1; var b = 2; const c = 3;
2021-01-29 16:25:39
277
原创 margin失效问题——嵌套块元素引起的外边距坍塌
当一个div嵌套了另一个div时，父盒子设置了外边距，如:margin-top:50px;内部的子盒子也设置一个外边距margin-top:100px时，会发现子元素并没有如预期所想，与父盒子有个边距。反而父盒子与相领的盒子的margin取了2者的最大值。如下所示： <div class="father"> <div class="son1"></div> <div class="son2"></div>
2021-01-29 13:05:52
266
原创 子元素设置浮动后，父元素高度为0的解决
子元素设置浮动后，如果父元素没有给定高度，则会引起父元素的高度为0。 <div class="father"> <div class="son1"></div> <div class="son2"></div> </div> /* 子元素设置了浮动 */ .son1 { background-color: powderblue; float
2021-01-29 11:15:57
2066
原创 display visibility 和overflow
display显示：none隐藏对象block显示，转换为块级元素特点：隐藏之后，不再保留位置visibility可见性：visible对象可视hidden对象隐藏特点：隐藏之后继续保留原有位置overflow溢出：visible默认的，超出显示auto自动，超出就显示滚动条，不超出就不显示滚动条scroll一直显示滚动条hidden超出部分隐藏<!DOCTYPE ...
2020-01-19 19:03:55
186
原创 固定绝对定位模式转换
元素添加了绝对定位和固定定位之后，会转变为行内块元素。/* 元素添加了绝对定位和固定定位之后，会转变为行内块元素 */ .father div:first-child { height: 2rem; background-color: green; } .father div:nth-child(2) { h...
2020-01-18 23:31:04
457
原创 浮动实现多个div盒子同行显示
浮动实现3个甚至多个div盒子在同一行显示。使用display时，将div转换为行内块元素，可以实现多个div在同一行显示。但是元素之间存在空隙，因此建议采用浮动实现。/*此处采用display将块级元素转换为行内块元素*/div{ width: 200px; height: 200px; background-color: pink; ...
2019-11-15 16:54:11
2867
原创 css3盒模型
box-sizing:content-box;和box-sizing:border-box；的差别：box-sizing: border-box;写了这句话后padding值不撑开盒子，border也不会使盒子变大，cs3新添加属性。即盒子大小为宽度div:first-child { /*盒子大小为width+padding+border*/ width: 2...
2019-11-13 23:48:26
246
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人