m0_61049675的博客

原创 【JS】JS小数乘以100精度丢失

在JS中一些小数乘以100得到的结果会产生偏差，小数点后有很多位。如0.018*100得到的是1.7999999999999998。

原创 前端如何一次处理十万条数据的渲染

【代码】前端如何一次处理十万条数据的渲染。

原创 【JSON】什么是JSON?

原创 【React】react的生命周期调用顺序

react的生命周期一、新生命周期1、挂载阶段1.1 constructor（1）在React组件挂载之前被调用（2） 初始化函数内部 state或者在this上挂载方法1.2 getDerivedStateFromProps（1）为静态方法，不能访问到组件实例this（2）在创建或更新阶段调用或者在props、state和render方法前调用（3）返回一个对象来更新 state, 如果返回 null 则不更新任何内容1.3 render（1）用于渲染DOM结构（2）不要在 render 里面 setSt

原创 【面试官】什么是闭包？

可以这么理解，定义在一个函数内部的函数是闭包//代码中的f2函数，就是闭包。var n=999;alert(n);return f2;result();// 999。

原创 【GIT】git合并分支

假如目前我们处于dev分支。

转载 【Git】pull 分支报错 fatal: Need to specify how to reconcile divergent branches...

默认将pull下来的代码与现有改动的代码进行合并，该方法可能会造成代码冲突，需要处理下这个问题，2、回退到合并之前的代码，在进行pull拉取最新代码。

原创 【面试官】webpack和vite的区别

Vite: Vite以开发模式下的极速构建著称。Webpack: Webpack的构建速度相对较慢，尤其在大型项目中，因为它需要分析整个依赖图，进行多次文件扫描和转译。Vite: 采用了基于ES Module的开发服务器，只有在需要时才会编译对应的模块，大幅度提升了开发环境的响应速度。Vite: 没有打包的步骤，它利用了浏览器的ES Module Imports特性，只有在真正需要时才编译文件。Vite: Vite也有相当数量的插件，但相对较小，因为它的开发模式和构建方式减少了对一些传统插件的需求。

原创 【面试题】webpack的五大核心、构建流程、性能优化

在确定好输出内容后，根据配置确定输出的路径和文件名，把文件内容写入到文件系统，在以上过程中，webpack 会在特定的时间点广播出特定的事件，插件在监听到感兴趣的事件后会执行特定的逻辑，并且插件可以调用Webpack 提供的 API 改变 Webpack 的运行结果。：从入口文件出发，调用所有配置的Loader 对模块进行翻译，再找出该模块依赖的模块，再递归本步骤直到所有入口依赖的文件都经过了本步骤的处理。：根据配置中的 entry 找出所有的入口文件。这道题基本会问在Webpack性能优化之前。

原创 【JS】WebSocket:实现实时通信功能。

如果想需要websocket实现功能，后端也要进行对应的修改配置，本内容只讲前端部分，想了解后端如何让实现的自行查阅资料。

原创 【JS】WebSocket实现简易聊天室

2、客户端发送消息，其它客户端用户都会同步接收消息(服务端接受消息广播所有连接用户)3、客户端修改昵称，其它客户端用户都会同步接收消息(服务端接受消息广播所有连接用户)1、连接服务器先建立连接，默认生成匿名用户(admin01)4、第2和第3的区别为消息类别不同。

原创 【面试官】HTTP工作原理

客户端浏览器首先解析状态行，查看表明请求是否成功的状态代码。客户端浏览器读取响应数据HTML，根据HTML的语法对其进行格式化，并在浏览器窗口中显示。若connection模式为close，则服务器主动关闭TCP连接，客户端被动关闭连接，释放TCP连接；通过TCP套接字，客户端向Web服务器发送一个文本的请求报文，一个请求报文由请求行、请求头部、空行和请求数据4部分组成。一个HTTP客户端，通常是浏览器，与Web服务器的HTTP端口（默认为80）建立一个TCP套接字连接；

原创 【JS】大文件上传（切片上传）

大文件上传（切片上传）切片上传文件切片示例切片上传切片上传是指将一个大文件切割为若干个小文件，分为多个请求依次上传，后台再将文件碎片拼接为一个完整的文件，即使某个碎片上传失败，也不会影响其它文件碎片，只需要重新上传失败的部分就可以了。而且多个请求一起发送文件，提高了传输速度的上限。文件切片示例文件切片和核心是使用 Blob 对象的 slice 方法，File 继承于 Blob。所以我们也可以使用 slice 方法对文件进行切割。

原创 【JS】sort方法的基本使用与双重、多重排序：对象数组按照多个对象属性进行排序

【代码】【JS】sort方法的基本使用与双重、多重排序：对象数组按照多个对象属性进行排序。

原创 【Vue】Vue双向绑定原理

比如说，当在输入框输入文字时，vue会检测到数据的变化，然后更新对应的视图。同样，如果你通过代码修改了数据，那么vue也会自动更新视图。

原创 【JS】数组常用的方法（工作必用）

console.log('返回数组长度：', val) // 3console.log('改变后的数组：', arr) // [1, 2]

原创 【JS】对象常用的方法（工作必用）

*obj: 要定义属性的对象。prop: 要定义或修改的属性的名称或 Symbol。descriptor: 要定义或修改的属性描述符。*///使用value: 1, // value值});== 等价于 ==value: 1, // value值configurable: false, // 是否可删除enumerable: false, // 是否可遍历writable: false, // 是否可修改});

原创 面试官：vue2和vue3的区别

get方法用于拦截某个属性的读取操作，可以接受三个参数，依次为目标对象、属性名和proxy实例本身(严格地说，是操作行为所针对的对象)，其中最后一个参数可选。set方法用来拦截某个属性的赋值操作，可以接受四个参数，依次为目标对象、属性名、属性值和Proxy实例本身，其中最后一个参数可选。

原创 【CSS】margin塌陷和margin合并及其解决方案

给子元素添加margin-top属性时，此时只是想让子元素的边框距离父元素边框有一段距离，而却出现了父元素的顶端距离body这个边框出现了位移，这就是margin-top塌陷的现象。：当父元素包裹着一个子元素的时候，当给子元素设置margin-top:100px，此时不应该看到的是子元素距离父元素顶部100px嘛？：两个兄弟块元素，一个设置下外边距100px，一个设置上外边距100px，此时它们不应该是相距200px才对嘛？为什么只相距了100px？：给父元素添加overflow:hidden触发。

原创 【CSS】什么是BFC？BFC有什么作用？

BFC(block formatting context)块级格式化上下文，他是页面中的一块渲染区域，并且有一套属于自己的渲染规则，BFC 是一个独立的布局环境，具有BFC特性的元素可以看作是隔离的独立容器，容器里面的元素不会在布局上影响到外面的元素。：只需要把两个div放置不同BFC中，那这两个BFC的内容将不会互相干扰，将两个di分别放置container容器中，然后通过overflow:hidden触发BFC;：这是因为给子元素添加了浮动，使它脱离了文档流；：红色方框覆盖蓝色方块；

原创 【CSS】css如何实现字体大小小于12px?

文字需要显示为12px，但是小于12px的，浏览器是显示不来的。

原创 【Node】node版本管理、node版本升级（都推荐使用nvm、工作常用）

https://github.com/coreybutler/nvm-windows/releases注意：

原创 【React】redux状态管理、react-redux状态管理高级封装模块化

redux是一个JavaScript容器，用于进行全局的状态管理；redux三大核心；单一数据源头：所有state都会被挂载到一个叫Object tree中,Object tree又只存在唯一的Store(理解为容器，存储Object tree，Object tree挂在state)中；State是只读的：唯一改变state的方法就是触发action，触发action，store.dispatch ( {type: '字符串' , val: 1})，val自定义使用纯函数来执行修改：编写。

原创 【React】react组件传参

在任意组件外调用 createContext 创建一个上下文，createContext 返回一个上下文对象useContext： 是一个 React Hook，可以让你读取和订阅组件中的 context。//创建 context对象//createContext 参数 可以进行初始化操作//Child子组件//const 公共数据 = useContext(Context) 这里的公共数据就是根组件value的值我的子页面颜色值是：{color}

原创 面试官：cookie，sessionStorage，localStorage的区别

【代码】面试官：cookie，sessionStorage，localStorage的区别。

原创 【React】memo()、useCallback()、useMemo()的区别及使用场景

每点击一次，子组件的useState、props和context都没有改变，但是每点击一次子组件都会重新渲染。: 如果直接使用useState解构的setName传给子组件, 子组件将不会重复渲染，即使用。：修改父组件的 onClick 方法，用 useCallback 钩子函数包裹一层。每点击一次父组件的按钮，子组件都会重新渲染；每点击一次父组件的按钮，子组件都会重新渲染；：将memo函数包裹子组件。

原创 【CSS】页面自适应屏幕宽度（响应式布局媒体查询-@media、弹性布局、网格布局和相对单位-vh/em/%）

【代码】【CSS】页面自适应屏幕宽度（响应式布局媒体查询-@media、弹性布局、网格布局和相对单位-vh/em/%）

原创 【CSS】css选择器和css获取第n个元素（:nth-of-type(n)、:nth-child(n)、first-child和last-child）

二、:nth-of-type、:nth-child的区别:nth-of-type(n)：选择器匹配属于父元素的特定类型的第N个子元素所有兄弟节点中找到第三个p标签背景为红色。所以，3背景为红。:nth-child(n)：选择器匹配属于其父元素的第 N 个子元素，不论元素的类型找父元素的第三个子元素，如果该子元素为p，则其变为黄色，如果，第三个子元素不是p元素，则没有子元素的背景变为黄色。:first-child：获取元素的第 1 个子元素:last-child：获取元素的最后一个个子元素效

原创 【CSS】css获取子元素的父元素，即通过子元素选择父元素（使用CSS伪类 :has() :not() ）

【代码】【CSS】css获取子元素的父元素，即通过子元素选择父元素（使用CSS伪类 :has() :not() ）

原创 【Vue】vue项目中使用tinymce富文本组件（@tinymce/tinymce-vue）

除了以上的基本功能，TinyMCE编辑器还支持插件扩展，tinymce 通过添加插件plugins的方式来添加功能，在添加之前我们需要先来引入相应的插件，引入插件之后我们就可以在init中重新初始化下对应的toolbar（工具栏图标）和plugins（对应的插件组件）属性。powerpaste文件夹提取链接：https://pan.baidu.com/s/1Y7ziHe0Rgm2n5r1XcVEmNg。

原创 【ES6】一个页面上需要等两个或多个ajax的数据请求成功以后才正常显示（使用Promise.all和Promise.race）

【代码】【ES6】一个页面上需要等两个或多个ajax的数据请求成功以后才正常显示（使用Promise.all和Promise.race）

原创 【Antd】Module not found: Can‘t resolve ‘@ant-design/icons‘ in ‘E:\xx\xx\xx‘

【代码】【Antd】Module not found: Can‘t resolve ‘@ant-design/icons‘ in ‘E:\xx\xx\xx‘

原创 【React】前端项目引入阿里图标

注意：你的icon名字 icon-sousuokuang为图片红框部分。

原创 【Vue】前端项目引入阿里图标

注意：iconfont是固定的，icon-sousuokuang为图片红框部分。

原创 【Echarts】Echarts 图表宽度设置100%，图表显示只有100px的问题

图表的父容器设置了 display：none，图表在执行js初始化的时候找不到这个元素，所以自动将“100%”转成了“100”，最后显示出来的图表就只有100px；

原创 【Echart】echart图表不显示总结

2、是否使用了v-if（看是否能改为用v-show）和确保dom元素已经挂载到页面中；1、echarts.init时确认dom容器是否设置了宽高，

原创 面试官：v-show和v-if的区别？

1、v-show只是为元素添加样式display:none；，dom元素依然存在，v-if是将dom元素整个添加或删除；如果元素会频繁的改变显示状态，则使用 v-show 较好；2、当show为false的时，都会不占据页面的位置；1、当show为true的时，都会占据页面的位置；如果显示状态很少改变，则使用 v-if 较好；

原创 面试官：Vue和React的区别？

4、自动监听数据变化渲染视图，提供大量语法糖和组件框架等等，React手动setState修改状态，往往需要到社区寻找各种插件和解决方案；2、函数式编程：vue2使用声明式编程，Vue3（composition API）之后和React一样更推崇函数式编程；vue采用了vue指令+template,也可使用jsx；react：采用了jsx。3、Vue2使用声明式编程，Vue3之后和React一样更推崇函数式编程。vue，核心是数据响应式框架；3、虚拟DOM，使用diff算法操作DOM;

原创 【Vue】Vuex数据持久化（手动存储和vuex-persistedstate插件）

【代码】【Vue】Vuex数据持久化（手动存储和vuex-persistedstate插件）

原创 【Vue】Vuex Module模块化

1、在store文件下新建modules文件，里边放入我们想要区分的js模块文件，我目前写了两个模块，一个是购物车car.js，一个是我的goods.js，如图。随着我们项目越来越大，把所有的状态都放到一个文件中，会非常难以管理；模块化，就是将vuex分为不同的模块，无论从项目上还是结构上，都容易维护。每个模块拥有自己的 state、mutation、action、getter。2、先将module中的所有文件引入到index.js根文件中，如图。3、car.js文件（其他文件同理）