m0_61049675的博客

原创 【three】three.js实现3d动画

【代码】【three】three.js实现3d动画。

原创 【js】获取媒体流实现拍照功能，摄像头切换

【代码】【js】获取媒体流实现拍照功能，摄像头切换。

原创 【Vue】vue项目中使用高德地图教程

由于高德地图的API是异步加载的，你需要确保在API加载完成后才进行地图的初始化。由于API密钥可能会被滥用，因此请确保你的API密钥不会暴露在客户端代码中（例如，不要直接将其硬编码在前端代码中）。如果你需要在前端使用API密钥，请确保你的应用有适当的安全措施来防止未经授权的访问。你还可以为地图添加事件监听器，以处理地图的各种事件，比如点击事件、拖拽事件等。在你的Vue项目中，可以通过在main.js文件或者单个组件的。请将你的API密钥替换为你从高德开放平台获得的真实API密钥。你可以根据需要调整这个。

原创 【Vue】vue项目中使用百度地图教程

由于API密钥可能会被滥用，因此请确保你的API密钥不会暴露在客户端代码中（例如，不要直接将其硬编码在前端代码中）。如果你需要在前端使用API密钥，请确保你的应用有适当的安全措施来防止未经授权的访问。在你的Vue项目中运行并测试地图的显示和功能。在你的Vue项目的public/index.html或者相应的HTML模板文件中，通过。你还可以为地图添加事件监听器，以处理地图的各种事件，比如点击事件、拖拽事件等。元素作为地图的容器，并给它一个唯一的ID。是地图的中心点坐标，15是地图的缩放级别。

原创 【小程序】小程序跨平台兼容性问题

通过结合以上解决方案，你可以更好地处理小程序在不同平台和设备上的兼容性问题，提升用户体验和稳定性。

原创 【优化】强缓存和协商缓存

总结来说，强缓存和协商缓存各有优缺点。强缓存可以在缓存未过期的情况下直接使用本地缓存，减少网络传输开销；而协商缓存则需要与服务器进行验证以确定是否使用缓存。在实际应用中，可以根据具体需求和场景选择适合的缓存策略。

原创 【小程序】小程序如何适配手机屏幕

例如，可以通过判断手机的型号或屏幕尺寸来判断是否为全面屏手机（你可以使用wx.getSystemInfo方法来获取设备的屏幕尺寸和分辨率），并根据需要调整样式代码来实现全屏显示。通过采用合适的布局技术、单位选择和媒体查询等方法，可以实现小程序在不同屏幕尺寸下的良好显示效果和用户体验。响应式布局的核心思想是根据屏幕尺寸和分辨率的变化，自动调整页面布局和样式，以提供更好的用户体验。通过定义不同屏幕尺寸下的样式规则，可以实现不同屏幕尺寸下的不同显示效果。在小程序开发中，可以使用百分比布局来设置组件的宽度和高度。

原创 【小程序】怎么优化小程序的性能

通过以上方法，你可以有效地优化小程序的性能，提高用户体验和应用的顺畅运行。

原创 【小程序】小程序生命周期及触发时机

小程序的生命周期函数是在小程序运行过程中，由小程序框架自动调用的一系列函数，用于在不同阶段执行特定的操作。

原创 可视化面板布局适配屏幕-基于 flexible.js + rem 智能大屏适配

* 约束屏幕尺寸 */// 当屏幕宽度小于1024px时html {important;// 当屏幕宽度大于1920px时html {important;

原创 【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。