Yanning's Blog

Module Not Found的部署问题竟归结于Git的Config?

一些背景今年7月进入新公司，参与一个已有项目的UI（部分新功能）改造，在了解完原有项目的问题之后，决定新建项目去实现全新的UI和新功能（整个过程无比杂乱，准备写一篇文件分析这次改造的问题）。新项目使用React 18 + React Router 5 + Webpack 5，CICD是公司自建的内部工具。本地运行和打包没问题，但流水线构建报错报错排查阶段1 - node版本过低查看流水线构......

Posted by gyn on 2023-11-13

有点难弄的计时器

在前端页面开发中，偶尔需要展示不同的计时或时间显示方式，本文将给出三种类型的相关示例。（仍在持续更新中…）计时器 (Stopwatch)通过useState，useRef和interval实现的计时器，点击Start开始计时，点击Stop结束计时。计时器显示格式hh:mm:ss，当然，也可以通过修改getTimeString来显示你想要的计时器格式。完整代码可在CodeSandbox上查看......

Posted by gyn on 2022-08-07

window.history.pushState你用对了吗？

在React项目中，我们使用react-route-dom的钩子函数去处理React组件中路由的跳转，而在非React组件中，我们还是会用到window.history和window.location去处理页面跳转的情况。在我的一个项目中，使用了Axios的拦截器去统一处理API的返回：若API返回信息是用户登录信息超时，则跳转到登录页面。代码示例如下： 1234567891011axio......

Posted by gyn on 2021-11-13

监听浏览器关闭事件，并发送异步请求

项目需求监听用户关闭浏览器事件，若关闭则发送异步请求给后端。问题问题1：浏览器关闭事件并不会触发vue实例的beforeDestroy和destroyed函数，所以无法在这两个钩子函数中处理浏览器关闭事件。解决方式：注册unload事件，参见MDN。问题2：用户代理通常会忽略在unload事件处理器中的异步XMLHttpRequest。解决方式：使用navigator.sendBea......

Posted by gyn on 2020-06-11

使用Flex布局实现左右拖动和上下拖动

最近的项目需要实现左右拖动和上下拖动的样式，先是使用float实现了简易版，后看到同事使用Flex布局实现了拖动效果，抽取成了组件。最终效果源码：github ...

Posted by gyn on 2020-05-28

Monaco Editor在Vue项目中的使用

本文以SQL为例，展示Monaco Editor在Vue项目中的使用安装包Monaco Editor的安装1$ npm install --save monaco-editor Webpack打包Monaco Editor的插件1$ npm install --save-dev monaco-editor-webpack-plugin Monaco Editor汉化包1$ npm in......

Posted by gyn on 2020-05-27

理解闭包

闭包是一个函数在词法域外被调用时，仍可以记住并访问它的词法域。例如 123456789function outerFun() { var a = 2; function innerFun() { console.log(a); } return innerFun;}var imp = outerFun(); // Oh, I saw ......

Posted by gyn on 2020-05-20