hyupeng1006的博客

原创 JS中的数组遍历 map, filter, find, findIndex,some, every, forEach, for in, for of 用法总结和区别

函数简述：map():返回一个新的Array，每个元素为调用func的结果filter():返回符合func条件的元素数组find():返回第一个符合条件的元素对象some():返回一个boolean，判断是否有元素是否符合func条件every():返回一个boolean，判断每个元素是否符合func条件forEach():没有返回值，只是针对每个元素调用func1.map...

原创 split 、splice 、slice、substr、substring终极区分

一、split() 方法用于把一个字符串分割成字符串数组。stringObject.split(参数1，参数2) //参数1是从指定分隔符处分隔，参数2是返回切割成数组的长度例如：var str="How are you doing today?" console.log(str.split(" ",3)) //["How","are","you"]...

原创 React Umi国际化配置

文件下新建zh-CN.ts、en-US.ts文件，并且在文件中做配置。在src下创建locales文件，如果项目配置了。

原创 React实现生成及打印二维码

react中一般生成二维码都是用react.qrcode，但是发现这玩意生成的是canvas，不是图片，打印的时候预览不出来。所以想进一切办法去把canvas转成图片，无奈拿不到这个canvas标签。最后还是用js的qrcode来生成二维码，这样生成的默认是base64位的图片，打印正常。

原创 JS 正则表达式去除字符串中任意(一个或多个)指定字符

【代码】JS 正则表达式去除字符串中任意(一个或多个)指定字符。

原创 实现文字超过显示宽度每间隔1s自动向左滚动显示（原生JS和vue两种实现方式）

【代码】实现文字超过显示宽度每间隔1s自动向左滚动显示（原生JS和vue两种实现方式）

原创 JS判断所有数据类型方法汇总(TS篇)

【代码】JS判断所有数据类型方法汇总(TS篇)

原创 React Antd pro 中 ProFormDependency 和 ProFormSelect 组合使用遇到的问题

ProFormDependency 和 ProFormSelect 组合使用时，不是每次修改依赖值都会触发ProFormSelect 的request远程请求函数。

原创 Ant-Design-Pro-V5：实现打开页面多页签切换

项目中打开多个页面，可使用多页签切换，相互切换时并保留各页面的状态

原创 Vue/原生JS实现图片鼠标拖拽，滚轮放大缩小

【代码】Vue，JS实现图片鼠标拖拽，滚轮放大缩小。

原创 Nginx压缩http传输数据

原创 React Hooks中使用useState异步回调获取不到最新值的问题

在 setState 的第⼆个参数回调函数中再次进⾏ setState，也不存在闭包作⽤域问题，但是 React Hook 中 useState 移除了 setState 的第⼆个参数，⽽且若嵌套太多也不佳；// 这⾥也可以不改，使⽤第⼀中传参⽅式 setArr([...arr, 1]);// 这⾥必须改成回调函数传参⽅式，否则会读取旧状态，导致异常。通常情况下 setState 直接使⽤上述第⼀种⽅式传参即可，但在⼀些特殊情况下第⼀种⽅式会出现异常；

原创 前端axios fetch 解决接口请求响应数据返回快慢不均导致的数据错误问题

实时搜索都会面临一个通用的问题，就是：浏览器请求后台接口都是异步的，如果先发起请求的接口后返回数据，列表/表格中显示的数据就很可能会是错乱的。会引发的bug如下：搜索的时候，连续快速输入或者删除关键字，搜索结果和搜索关键字不匹配。怎么解决呢？在想解决方案之前，得想办法必现这个问题，靠后台接口是不现实的，大部分情况下后台接口都会很快返回结果。

原创 Node模拟慢接口

为了快速搭建一个后台服务，并模拟慢接口，我们选择这个轻量的 Node 框架。

原创 vue3+webpack4 前端优化首屏时间

1.减少资源体积，从而缩短请求时间2.减少资源请求个数，从而缩短等待时间

原创 webpack打包类似报错：cannot read property ‘xx‘ of undefined

首先考虑到原因是某个打包插件版本问题引起的。直接npm install下来的是最新版本的，而webpack版本较低，就会导致插件版本与webpack版本不匹配的问题。解决方式：尝试降低插件的版本，安装时指定版本号。

原创 H5实现录屏功能代码

复制下面的代码至html文件，然后直接打开html文件即可使用录屏功能。

转载 在VSCode中使用MarkDown

Markdown 是一种轻量级标记语言，一个运行于Mac OS XWindows和Linux之上的，针对于编写现代Web和云应用的跨平台源代码编辑器Markdown文件后缀名为 .md轻量化、易读易写对于图片，图表、数学式都有支持许多网站都广泛使用 Markdown 来撰写文档使用标记语言语法编排文档，简洁明了Markdown可以快速转化为演讲PPT、Word、PDF等产品文档可用于编写说明文档，以“README.md”的文件名保存在软件的目录下面。

转载 微前端项目会碰到的一些棘手问题

为什么要用微前端业务管理系统多，技术栈分别为 vue3/vue2/react16/react hook管理人员需要同时使用多系统，但是又不想切换系统重新登陆，页面会刷新，需要新开浏览器tab部分子应用需要支持子公司的业务，需要独立部署运行。对于开发者来说，如果需要在应用 A 实现应用B的某些功能，例如在应用A的页面弹出应用B的弹窗，如果是react、vue两种不同的框架的话，重新写一遍业务逻辑代码很明显是不理智的。所以从技术角度来看，我们需要用一个父架构来集成这些子应用，把它们整合到统一平

原创 Antd input禁止点击Input输入框出现以前输入过的记录

autoComplete="off"

原创 requestAnimationFrame详解-js性能优化

它是一个浏览器的宏任务requestAnimationFrame的用法与settimeout很相似，只是不需要设置时间间隔而已。requestAnimationFrame使用一个回调函数作为参数，这个回调函数会在浏览器重绘之前调用。它返回一个整数，表示定时器的编号，这个值可以传递给cancelAnimationFrame用于取消这个函数的执行。

原创 React umi中使用sass

umi默认支持less和css，如果想要使用，需要安装插件以及配置。

原创 TypeError: this.getOptions is not a function 的解决

React这个实际上就是 sass-loader 的版本过高或过低，与当前node版本不对应，不兼容 getOptions 函数方法，所以需要对 sass-loader 进行升级或降级处理。1、命令行卸载node-sass和sass-loader，重新安装跟你当前node版本对应的node-sass和sass-loader。2、或者可以删除node_modules文件夹，直接修改package.json里sass-loader和node-sass里的版本，然后npm install四、node。

原创 前端项目持续集成和部署实现

要高效的把纯前端项目部署到云服务器上，研究了好几种持续集成部署方案，这里简单记录描述一下。方案选择编译后的文件部署，就是先在本地进行npm run build打包，生成 build 文件夹，然后将 build 文件夹传到服务器，再用 Nginx 配置一个静态解析即可。源码部署就是把源文件上传到服务器上，然后执行 npm install && npm run build，这种方式是将打包工作交给服务器，本地只是将源代码 push 上去，git 监听到推送然后自动开始构建。

原创 圣诞节下雪氛围代码-H5实现程序员的浪漫

此效果使用前端H5代码实现前四个是固定音乐，最后一个是可以选择自己存在电脑上的音乐 ，圣诞树会随音乐节奏闪动，氛围感满满。

原创 ReactHook hooks和定时器setInterval产生的bug

使用定时器改变state,state的值并不是最新值。产生原因：因为每次setValue后会重新创建函数,由于并没有及时清理掉setInterval，setInterval执行的上下文环境都是第一次创建本函数式组件的上下文

原创 Avue form表单联动

新增或修改的form中，其中一项改变会影响另一项的属性，那么可以使用以下方式。

原创 avue动态改变option里的值

avue动态改变option里的值，或者data中定义的其它对象类型的值

原创 React hooks之useCallback的使用场景及其深度解读

1、useCallBack不是每个函数都需要使用！2、useCallBack在什么情况下使用？

原创 VSCode 前端插件推荐

推荐一波前端开发必备插件，绝对可以提高你的生产力，剩下来的时间来 mo鱼，岂不美哉根据需求，大家安装对应插件即可（安装太多插件，VSCode会很卡）当然电脑配置足够强大，当我没说🤔。

原创 vue elementui menu导航菜单根据路由变化选中对应项

1、刷新页面，导航菜单选中项恢复成默认设置2、点击页面里的链接跳转到其它页面，但是导航菜单不会自动选中当前项

原创 vue同一页面动态路由切换animate.css动画不重新加载的问题

vue配合animate.css和wow实现的动效

原创 git远程创建了分支，本地如何更新到最新的分支

git远程创建了分支，本地没有主动同步到

原创 微前端架构的几种技术选型及详细介绍

微前端是一种类似于微服务的架构，是一种由独立交付的多个前端应用组成整体的架构风格，将前端应用分解成一些更小、更简单的能够独立开发、测试、部署的应用，而在用户看来仍然是内聚的单个产品...

转载 前端缓存（浏览器缓存和http缓存）详解

web缓存主要指的是两部分：浏览器缓存和http缓存。其中http缓存是web缓存的核心，是最难懂的那一部分,也是最重要的那一部分。浏览器缓存：比如,localStorage,sessionStorage,cookie等等。这些功能主要用于缓存一些必要的数据，比如用户信息。比如需要携带到后端的参数。亦或者是一些列表数据等等。不过这里需要注意。像localStorage，sessionStorage这种用户缓存数据的功能，他只能保存5M左右的数据，多了不行。cookie则更少，大概只能有4kb的数据。....

转载 CSS多种Loading动效

分享8种纯CSS实现loading加载特效的小技巧

原创 超大体量项目，微前端落地方案之qiankun

先介绍一下项目背景，项目中间搁置了很久导致项目架构比较落后并且后期继续业务开发的时候也没有持续对架构进行优化迭代而是直接进行了业务开发，导致后面有很多的问题比如启动慢、代码耦合性强、项目体量巨大导致开发效率降低之类的问题。...

原创 js获取服务器的时间

直接使用newDate获取到的是访问当前网站的客户端时间，这个时间有可能因为人为修改时间不准确。因此，在开发中，需要获取当前时间进行操作，应该使用服务器的时间。

原创 React移动端使用canvas实现手势密码登录

React移动端使用canvas实现手势密码登录。

原创 react生成二维码(qrcode.react)

安装npm提供的qrcode.react依赖包