你可能不知道的React-Router
前言 一不小心想起来了账号密码， 就写点什么吧。 这一年多也是经历了裁员 \ gap year 找工作 找到工作 还没找到工作，从最开始的玩的不亦乐乎，到后面的找工作怀疑人生，只能说一手烂牌，打的更是稀烂。正好最近面试有被问到React Router的实现，其实好久没看过源码了，所以面试回来又去简单看了下。 前端路由 前端路由一般分为 hash 路由和 history 路由两种模式，hash 模式下监听 ，history 模式监听 ，从...
前端性能优化_白屏-首屏加载
1 路由懒加载 SPA单页面应用项目，一个路由对应一个页面，如果不做处理，项目打包后，会把所有页面打包成一个文件，当用户打开首页时，会一次性加载所有资源，造成首页加载很慢，降低用户体验。（前后大概降低30%） 2 组件懒加载 除了路由的懒加载外，组件的懒加载在很多场景下也有重要的作用 例如：当用户打开某个页面，会一次性加载该页面所有的资源，我们期望的是有些组件使用户触发按钮后，再加载该弹窗组件的资源，例如弹窗组件，这时候，就可以考虑用懒...
用VSCode调试React代码
作为前端开发，基本每天都要调试 Vue/React 代码，不知道大家都是怎么调试的，但我猜大概有这么几种： 不调试，直接看代码找问题 console.log 打印日志 用 Chrome Devtools 的 debugger 来调试 用 VSCode 的 debugger 来调试 .不同的调试方式效率和体验是不一样的，我现在基本都是用 VSCode debugger 来调试，效率又高、体验又爽。 可能很多同学还不知道怎么用 VSCode...
阻止用户离开页面，beforeunload和unload事件说明
定义 onbeforeunload事件在onunload事件之前触发。 调用方式 MDN官方示例： 或者在body标签上绑定onbeforeunload，但更推荐使用 的方式调用。 如果需要添加beforeunload点击确认后的处理代码，可以直接添加unload事件监听。 注意事项 使用方式 HTML规范建议作者使用 Event.preventDefault() 而非 Event.returnValue 的方式来提示用户。但是，该种方...
带圆角的虚线边框？CSS 不在话下
今天，我们来看这么一个非常常见的切图场景，我们需要一个带圆角的虚线边框，像是这样： 这个我们使用 CSS 还是可以轻松解决的，代码也很简单，核心代码： 但是，原生的 dashed 有一个问题，就是我们 无法控制虚线的单段长度与间隙 。 假设，我们要这么一个效果呢虚线效果呢： 此时，由于无法控制 产生的虚线的单段长度与线段之间的间隙，border 方案就不再适用了。 那么，在 CSS 中，我们还有其它方式能够实现带圆角，且虚线的单段长度与...
(Mac版)终于搞懂了浏览器是怎么唤醒本地应用了
之前写了一篇Windows版的终于搞懂了网盘网页是怎么唤醒本地应用了的文章， 发表后，直接窜上了综合热榜第一，这是令我没想到的。 传送门： 然后有些朋友就问了，好奇Mac上应该怎么配置自定义协议来通过浏览器唤醒本地应用。这篇文章我就简单记录一下。 不像Windows在注册表中配置，每个Mac应用都会有一个Info.plist的配置文件，这里还用VS Code来举例子 这个文件是每个app都会包含的，而自定义打开协议就在这里配置。 这里大...
终于搞懂了网盘网页是怎么唤醒本地应用了
用百度网盘举例，可以通过页面打开本机的百度网盘软件，很多软件的网站页面都有这个功能。这个事情一直令我比较好奇，这次终于有空抽时间来研究研究了，本篇讲的是Windows的，mac的原理与之类似，Mac文章已发布： 。 本身单凭浏览器是没有唤醒本地应用这个能力的，不然随便一个网页都能打开你的所有应用那不就乱套了吗。但是电脑系统本身又可以支持这个能力，就是通过配置自定义协议。 举个例子，当你用浏览器打开一个本地的PDF的时候，你会发现上面是f...
axios是怎么做到适配xhr和http的
前言 我们在使用axios的时候是不需要判断这个环境和指定发送的方法的，但是它既可以发送浏览器环境下xhr请求，也可以发送node环境下http请求，就来看一下这是怎么实现的。 基础结构 发送请求 通常我们使用axios发送请求使用的方法就是 或者 axios是Axios的实例，在Axios类中，有一个很重要的方法 , 其他的 等方法都是依赖request方法改造来的 首先，我们看一下Axios类中有什么 request()是 发送请求...
10 个功能强大的 JavaScript 动画库
首发于公众号 ，欢迎关注。📝 每周一篇实用的前端文章 🛠️ 分享值得关注的开发工具 ❓ 有疑问？我来回答 动画。从人群中脱颖而出、吸引访客注意力的绝佳方式。通过富有创意的物体运动和流畅的页面转换，不仅能为我们的网站增添独特的美感，还能提高用户参与度，创造令人难忘的第一印象。 有了这 10 个功能强大的 JavaScript 库，创建动画再简单不过了。滚动动画、手写动画、SPA 页面转换、打字动画、颜色动画、SVG 动画......它...