使用 React Hooks 定义函数式组件，当需要对外暴露接口方法时，需要结合使用 React.forwardRef 和 React.useImperativeHandle 实现。 在基于 TypeScript 的开发模式下，如何正确的实现相关的类型定义和引用呢？ 参考以下示例进行了解： /** 对外暴露接口的约束类型 */ interface LzwmeInputHandles { focus

敏感消息交换对正确性和安全性都有比较强的要求。 使用消息摘要算法对消息体计算和验证摘要，可以防止消息传输过程中被篡改为非法消息值；使用加密算法加密消息体，可以防止消息传输过程中被拦截并读取。二者结合则可以实现较强的安全性消息交换。 1 保证消息交换正确性 消息传输过程中可能被中间人篡改。比如 A 发送消息转账给 B，中间人在消息转发过程中进行了拦截，解密消息体并篡改为转账给 C，而且篡改转账额度，

在使用 TypeScript 开发的过程中，类型定义是一个必要但又繁琐的过程。 当需要对一个第三方库方法的入参进行单独定义，而该库又没有导出该方法的入参类型时，就需要获取该方法的入参类型。 例如，有如下示例函数，我们想获取其参数类型和返回值类型，那么具体应该如何实现呢。 示例函数： function test(lzwme: string, idx: number) { return { lzwme

通过使用 npm outdated 和 npm update 命令，可以对前端项目中的第三方依赖版本进行分析与升级。但他们可用的参数较少，有些过于简单。 在 Microsoft Visual Code 编辑器中，当鼠标停留在依赖行并保持不动时，它会去查询该行依赖的最新版本。这在对单个的第三方依赖版本升级上会有比较简单快捷的辅助。 对于依赖众多的中大型项目，其第三方依赖包可能多达上百个。当希望进行大

当需要对 electron 进行删减或逻辑修改以实现个性化的需求时，第一步要做的就是其源码构建环境的搭建。由于涉及 chromium 和 nodejs 的源码编译，整个构建项目是非常庞大的，其过程中任何一个小环节出现问题都可能会导致最终的失败。 electron 官方维护了 build-tools 工具库，以尽可能简单的实现源码构建环境配置。 在不采用该工具的情况下，我们需要参考官方指南手动进行相

windows 10 的 cmd 命令提示符下，如果你双击界面中的字符，则可能会发现可以快速选中部分文字，鼠标拖动模式也可以进行区域选择。 这是因为在 cmd 的选项配置中，默认开启了 “快速编辑模式”。但是可能你也会发现，控制台可能会在此时被卡住，本应继续执行的命令被暂停了，此时只有按一下回车键才会继续执行。 简单来说，“快捷编辑模式”方便了我们从命令提示符中快速选取和复制信息，但也可能因此导致

在前后端分离的协作开发过程中，mock 数据是一个不可避免的需求。针对普通 http 方式的数据mock有非常多的成熟解决方案，但面向 websocket 这种推送模式就变得复杂一些。 下面分享一下借助 simple-mock 插件库实现 websocket 服务的数据请求 mock 方案。 1 simple-mock 简介 在无需产品和后端等其他角色参与、仅为前端开发提供便利的情况下，我个人在开

自 React 16 起，任何未被错误边界捕获的错误将会导致整个 React 组件树被卸载。 对于开发已久且 Code Review 不是那么严格的庞大项目来说，在升级到 React 16 以后，可能会发现以前只偶尔在局部出现影响不大而未获得足够关注的异常，现在会时常导致整个应用垮掉。 React 16 引入了错误边界（Error Boundaries）来解决这种情况。 1 错误边界(Error

1 Anguar9 新特性简介 1.1 默认使用 Ivy 编译器 Ivy 在 Angular8 时即可使用，但需要自行在 tsconfig.json 中增加配置以开启，曾经尝试过但会有一些构建问题。在解决了数百 BUG 后，Ivy 在 Angular9 中 作为了默认的编译方式。lvy 编译器和运行时提供了不少的优点： 打包尺寸更小：Ivy 编译器的设计目的是删除那些无法通过摇树优化使用的 Ang

在 webpack 中一般都会设置 webpack 的 devtool 以开启 sourceMap 功能。在使用了 resolve-url-loader 和 sass-loader 的情况下，当进行生产环境输出关闭 webpack 的 sourceMap 功能时，可能会产生类似如下报错信息： ModuleNotFoundError: Module not found: Error: Can\'t r