myBlog

zero to one. 个人日志

设计模式

写一个观察者模式（发布-订阅模式）例子

单例模式

开阔视野

puppeteer自动化开发神器！

微前端

封装npm组件

异步引入npm组件方案，免npm install，减少打包后体积

React

react阻止事件冒泡

Context执行上下文

Object.defineProperty与Proxy

React高阶组件

按需加载模块或者方法

使用React.lazy和Suspense进行组件延迟加载

微信小程序

云开发

js

图片懒加载

MessageChannel 管道通信

性能

前端代码线上出错如何解决？使用sentry + 生产环境报错如何定位源码位置 两者配合无需上传sourceMap至sentry

有趣的工具或方法

1. 用于检测当前手机是否支持css属性：https://css3test.com/

2. 域名ip绑定，多开发环境切换：iHosts

3. 抓包工具：Charles

4. 视觉稿图形软件：Sketch

5. json数据格式化查看，浏览器拓展程序：FeHelper

6. 用来更改页面请求响应的内容。通过指定规则，您可以把请求映射到其他的url，浏览器拓展程序：ReRes

7. 个性化终端：iTerm

8. 代码提交纪录，支持创建、克隆、提交、push、pull 和合并等操作：sourceTree

9. 手机端调试面板 vsConsole

10. webpack优化体验:

    Webpack 打包太慢怎么办? 试试 Dllplugin

    你拆分JS代码的方法可能是错的

11. 发布一个npm包译文

12. vscode插件代替postman

13. cdn调用npm资源.例子：https://cdn.jsdelivr.net/npm/[email protected]/dist/bundle.js

14. ast插件相关，ast代码在线生成，参考文章：https://mp.weixin.qq.com/s/i_XnxoRrO90lnW1fGGq4qQ

15. Service Worker，目前该技术通常用来做缓存文件，提高首屏速度。

16. puppeteer自动化

17. rrweb实现录屏回放

18. scroll-behavior: smooth; scrollLeft的平滑过渡方案

19. 在webworker中运行js https://www.youtube.com/watch?v=X57mh8tKkgE

20. memoize-one避免重复渲染

21. why-did-you-render--- 重复渲染检测

22. 去除背景色 图片转png

23. 图片压缩网站 http://tinypng.com 、 https://squoosh.app

24. document.designMode='on',网页数据全部变成可复制; document.body.contentEditable = 'true', 网页变为可编辑

25. github 搜索资源 xxx awesome、例子demo xxx simple、空项目架子xxx starter、教程xxx tutorial (例子： javascript awesome)

26. 好用工具集 https://tools.fun/index.html

27. lerna进行组件库搭建

28. AST Explorer，它可以让你可以看到各种语言的 AST 语法树

29. 2021年热度： vite、Astro、Remix、Rust、swc、monorepo中的Lerna、Strapi

30. vscode 的插件脚手架 npm install -g yo generator-code 开发文档：https://liiked.github.io/VS-Code-Extension-Doc-ZH/#/get-started/your-first-extension

31. 视频转gif: https://www.apowersoft.cn/video-to-gif-online

32. css Object-fit属性 防止图片拉伸 使其保持覆盖

33. node 服务 日志监控插件 winston

34. tsdx开发一个库，默认配置，节省繁杂的配置时间 https://github.com/jaredpalmer/tsdx

35. 日志信息生成文件 npm run build | tee -a ls.text https://blog.csdn.net/zong596568821xp/article/details/82997885

36. vscode插件： GitHub Copilot 人工智能 代码提示

其他

基于monaco-editor的代码编辑框